Hello all,
I need to make a div BGimage overflow.
<div id="wrapper">
more stuff goes here.
</div>
#wrapper {
background: url("../images/myimages01.png");
overflow-x: visible;
overflow: visible;
width: 1000px; /* the images is like 1800px; */
}
I need the image to be able to overflow but im not sure if its possible?
Thanks
Steve
hi
what about using
background-repeat:repeat;
vineet
Keeping the inner width, you could extend the background width by padding and soak up that extra width by a negative margin:
#wrapper {
background: url("../images/myimages01.png");
width: 1000px; /* the images is like 1800px; */
[COLOR="Red"]padding-right:800px;
margin-right:-800px;[/COLOR]
}
Hi,
I’m not sure I understand the question so you may need to clarify what you want to happen and how this will be occuring.
A background image can never escape from its container because it is painted on the background of that container and it is impossible for it to be bigger than itself.
If the div is 100px wide and the background image 1800px wide than only 100px of it will ever show.
You could place a foreground image and let it overflow the container but any parts outside the container would be ignored (except in ie6 where the container will get stretched to fit the image).
Either way I can’t see how that will be any real use.
If you want an 1800px background image to show then you will need an 1800px container to hold it.
Of course you may mean something else and just want it repeated as Vineet has mentioned above.
Eriks method above will also allow the background image to overflow the container but the parts that are outside will still effectively be ignored but may be close to what you want.
Perhaps the answer is to place the image inside the div (rather than as a background image) and position it behind the content with a lower z-index.
Sorry maybe i didn’t make myself very clear. I’m not needing to repeat the image, i understand that if i have a 1.8k px image i need a div this big to hold it however. The #wrapper div also contains all the body content with borders etc inside if i change it from 1000px it messes everything up.
When setting the BG image
url(“…/images/myimages01.png”) no-repeat scroll center 0 transparent;
its cut off either side, i need the BG image to over flow this div?
I dont know if that explains it any better?
@Erik J - This didn’t work for me. I’m using “margin: 0 auto;” to center it.
@ralph.m - I did consider this but wasb’t sure on how to “send to back” if you know what i mean?
Thanks
Steve
Hi,
You can make an inner div overflow the parent using neagtive margins and here are a couple of examples:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.wrap {
width:800px;
border:1px solid #000;
background:red;
margin:20px auto;
padding:20px 0;
}
.overflow {
margin:0 -400px;/* now equals 1600px wide */
min-height:0;
background:blue;
position:relative;
}
* html .overflow {
height:1px
}
.wrap2 .overflow {
padding:0 400px;
}
h1 {
text-align:center;
}
</style>
</head>
<body>
<div class="wrap">
<h1>Overflow parent</h1>
<div class="overflow">
<p>some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text </p>
</div>
<p>following text</p>
</div>
<div class="wrap wrap2">
<h1>Overflow parent</h1>
<div class="overflow">
<p>some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text some filler text </p>
</div>
<p>following text</p>
</div>
</body>
</html>
However the extra width on the right will cause a browsers scrollbar and I’m not sure whether you want this or not?
Sorry maybe i didn’t make myself very clear. I’m not needing to repeat the image, i understand that if i have a 1.8k px image i need a div this big to hold it however. The #wrapper div also contains all the body content with borders etc inside if i change it from 1000px it messes everything up.
When setting the BG image
url(“…/images/myimages01.png”) no-repeat scroll center 0 transparent;
its cut off either side, i need the BG image to over flow this div?
Thanks for this clarification. You are asking the wrong question (you see how everyone’s answering you about HTML images, because “background” and “overflow” have nothing to do with each other).
But, I think if you post some of the html (the wrapper and at least one child) with maybe also a screenshot, then we’ll know what you mean. When I hit reply I thought I knew what you were asking, but it’s not quite clear yet. More code (or a link to the page, whatever) will help.
*edit Paul’s answer came up while I was typing. Let us know if this what what you wanted?
This may be stupid, but it sounds to me like you just need to put the background image on the body element.
body {
background: url("../images/myimages01.png") no-repeat 50% 0;
}
Not stupid at all, ralph. Maybe the idea of the OP is to constrain the body content, but have the background image wider?
Its my fault, i really should explain things alot better.
The Image is a background for the whole site and must align up correctly, adding it too the body would not work because of resizing etc . It works exactly how i need to by adding to the #wapper div except it needs to “overflow” the div (I now know overflow / bg img has nothing to do with each other, thanks Stomme).
I will post some of the code soon, need to rip it from the server on my lunch break.
Really apprciate all your help.
Will get back to this soon.
The Image is a background for the whole site and must align up correctly, adding it too the body would not work because of resizing etc
Adding it to the body should make no difference to it being applied to the #wrapper (apart from the 1px jog - and the fact that the image can be as wide as you want) because if it is a centered background image (background-position:50% 0) then it will stay centered when the viewport is resized and stay in place with a centred container.
I think we’ll need to wait to see your code and then perhaps it will all be clear
Well i’ve managed to sort it out.
My issue was when i have the BG images attached to the <body> and resized the browser everything shifted out of alignment.
With the help of Paul O’B 's post i managed to figure something out. I’ve also learn some other stuff from this too.
Im using the #wrapper then #innerwrapper which is using negative margins.
The only problem being the huge gap on the right + empty scroll, but from a customer POV do you think i should worry about it? i mean, without moving the scroll bar it looks perfect.
Thanks
Steve
Any chance you could show us what you are describing? It sounds like the images still is not centered.
(At the risk of generating the ire of my CSS peers, you might like to have a look at this cool background effect with jQuery. I’ve used it several times with a single image, rather than as a gallery.)
Ok this is what im looking at.
http://img231.imageshack.us/img231/4876/img01b.jpg
The part marked in yellow is this random blank space i dont think should exist?
The park marked in red is the background image.
The park marked in green is button actually links which are chopped from the BG images. Just needed to explain this incase you thought there was a problem there. I’'ve just slipped in a margin-top: 1.2em so dont worry about it - its just so i can they align correctly.
http://img641.imageshack.us/img641/2670/img02d.jpg
This images - in yellow is the excess scroll bar that i think shouldn’t be there?
Let me know if you need anything else explaning.
Thanks
Steve
Hi,
Which is the image that you have overflowing? Is it that red starburst effect and header image?
I can’t see from your design why you would need something to overflow as the starburst image could be centred on the background of the body as we mentioned earlier and would still match up with page content if done correctly.
Either I’m missing something important or you are over-thinking this a little
Sorry to be a little vague as I am still trying to visualise the dynamics of what you want.
Yes Paul O’B your correct i could have it on the <body> tag except when i resize the browser everything shifts… the nav doesn’t line up with it. Also for people with smaller resolution like 800x600 or so…
The background image which is overflowing is pretty much everything you see…
http://img641.imageshack.us/img641/174/img03dv.jpg
Thats the images which overflows from the .overflow div as you explained.
Steve
edit: typo
Yes Paul O’B your correct i could have it on the <body> tag except when i resize the browser everything shifts
It shouldn’t make any difference. If your page container is centred width a width and using margin:auto then it will keep pace with the background image on the body as the window is resized (there will be a 1px jog at odd pixel sizes but you don’t have any overlap that I can see that would notice).
The background image would need to be perfectly centred of course.
I am just on the way out of the door so can’t show an example but will be back tomorrow unless someone else can jump in here now
Yes, the background image should be centered on the body, and the content centered over the top of it with margin: 0 auto and a set width.
But you are asking fro trouble having the menu images as part of the background image. Bad idea. Instead, construct an unordered list <ul> in the content and, if you wish, replace the list text with the button images. We can help you with that.
Hi,
I’ve put up a quick example of what I think you are trying to do based on what you have shown us. As stated a number of times the large image can be placed on the body element without any problems.
The nav has been removed from the background image so that it can be placed more easily and text replacement added plus rollover effect.
You can find it here:
http://www.pmob.co.uk/temp/steview.htm
Just view source as the code is in the head.
If that’s not what you wanted then you will need to explain where it differs and what added functionality you require.