Hey everyone. I encounted one hell of an odd issue today.
I caught this issue by chance and wonder if anyone knows how to correct it.
I am using a background image on the body tag - the image is a gradient that has a set width, and then repeats y down the page as needed.
However if the viewer has a smaller view window, the gradient image is shrunk. So instead of using the width the image actually IS (in this case 1225px), it adjusts to the size of the window, mucking up my layout.
The only way I can think to fix this issue is to move the image into the div box setting the size of the site (since it sets a width value), however, the background will only appear there if I set a height value (I also don’t like the look as it adds space at the top), but I use the layout on many different sized pages, and want to be able to add text without having to resize the background every time.
I have tried using a height of 100% - no background image when used in the wrapper.
Does anyone know how to make the browsers leave the image at it’s correct size, or how to put a background image into a DIV that repeats as long as there is content, withOUT a height value (if I HAVE to do that)?
This is only an issue because the background image is a gradient. Any other image - no problem. Bizarre!
If anyonen wants a screenshot - please PM me, as I can’t post links yet.
Please note Stomme poes’ remark, then I hope you try SitePoint the first for solutions from now.
The body width will need a min-width to stretch to embrace the 1224px wide wrapper, but the body background will, according to the specs, be applied to the root element (the html) when the root background is not set. That is why the background image is centred to the viewport and not to the body element.
You could solve this by moving the body background colour to the html instead:
However if the viewer has a smaller view window, the gradient image is shrunk. So instead of using the width the image actually IS (in this case 1225px), it adjusts to the size of the window, mucking up my layout.
A background image won’t do that.
just write the url to your example page like www . example . com - it shouldn’t prevent you from doing that.
The background is positioned in the center - so it’s not stretching exactly - it’s just moving left / right depending on the window size so it’s in the middle. The body is a little special in that it’s width is dependent on the viewport. Even though the wrapping div is 1224px the body is smaller than that at smaller window sizes.
Apply the background to the wrap div if you want it to stay within those bounds.
Just so you know, many of us visit multiple forums. And it is considered bad Nettiquette to ask the same question within the same day on multiple forums, because in all likelyhood instead of one person giving you the right answer, you’ve got three or four doing it. Which can be considered a waste of someone’s time.
Generally it’s best to give it a few days on the one forum (start with the most populous forum), then go to the next, wait a few days, etc.
Thanks for the suggestions, but all the posted codes make the gradient not appear at all.
I will stick it in the wrap if it’s the only solution (though it adds ugly space to the top and bottom, rather than having the image all the way through), but the issue is - the image will ONLY appear on the wrap if I set the height (and not in 100% - that doesn’t work). I can’t set the height as it will vary from page to page, and I want to be able to add to sections without having to adjust the height every single time.
Adding colour to the HTML makes the image disappear. :S
Min-width does nothing. The problem remains (I had already tried this).
Stomme - I had no idea. I am on an insanely tight deadline for this site (it’s a favour for a friend, but she really wants it ready for Feb, and the work left to do is crazy), and this is the last glitch holding me back. I thought I would find an answer faster by casting a wide net.
It only seems like it disappear. Because all content in the wrap div is absolutely positioned and therefore is not expanding its height, so the height is zero and so also is the body height. The background is on the body, cut at zero height.
Either you reconsider the AP for layout and change it to position by floats and margins.
Or in order to keep all AP content, switch the scrolling from the root/viewport to the body and size the body to the viewport. That way instead the body will display the background in the centre of the whole viewport and from there scroll any overflowing content of the body. (Otherwise it is the body that is scrolled from the html element.)
Only IE5mac really needs them otherwise it will ignore the background image, though that browser is just about dead. Maybe a few visitors here and there :). Quotes are just outa habit sometimes.
Erik - Your code made the gradient appear again, but did not remove the issue of it mucking up when the window is shrunk.
I used AP because it was the only thing that would put everything where I needed it to be. Nothing else was working (I did try floats). The issue is because there’s two items with javascript that won’t allow me to overlap items over the javascript. The only way I could get the java on the bottom was with AP.
All right - I threw up a mostly together example (tossed some quick graphics together to give you the idea).
I do really appreciate everyone’s assistance and efforts. By all means - if you think a float will work, please suggest something and I’ll try it. It’s completely possible I was using it wrong.
Of course, on this page the text box is contained in size. It won’t be on other pages (and will extend as far as the page will be). And, also, the rotating java slideshow is only being used on this page - on the other pages it will be a single image (no longer java)
Correction - the above code worked for short pages - but doesn’t work on any long pages that need to scroll - the background cuts off. This is most wacky.
Correction - the above code worked for short pages - but doesn’t work on any long pages that need to scroll - the background cuts off. This is most wacky.
Posssibly because the background’s height is set to 100% which like all set heights, has a limit. Possibly min-height is necessary. This would start the body element out at 100% (of the viewport or of its parent the HTML element… which may then need “height: 100%;” added to it as well) but allows content to grow.
I’m not sure of this because normally I set html and body to height: 100% and set an immediate child (some page wrapper) to min-height… setting both html and body to height: 100% I’ve not run into a cut-off problem but I think this is because I don’t use absolute positioning for the rest of my page, and there are certainly different rules with height and ap elements.
He can’t place the image on the <body> because after 100% height it wouldn’t work since the background image would stop there.
If you WOULD do the body to min-height:100% that wouldn’t count as establishing a height on a parent and thus the #wrapper or w/e element has 100% height would not work then :).
