and how to examples, this 'bad example is actually exactly what i need... the background and the content are 'fixed' together, and slide around as a unit.
this example is fine in IE6, dammit it bkrnd slides around in IE8 (at least the version i have installed, from april 2009... (try newer version??), IE7 is fine. Except for all IE versions, the size of the background image is the maximum window size you can stretch to... weird, i wonder what this looks like on a large res screen, how weird to constrain the window size to the background image size....
body { padding: 0; margin: 0; background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top; width: 100%; /*stops the background image from shifting when you resize the browser window in FF and..saf?*/ display: table; /*stops the background image from shifting when you resize the browser window in FF and..saf?*/ }
and tip from there
Although large backgrounds at website look very nice it kills bandwidth and scares of visitors with slow internet connections.
So here are some tips&tricks how to use large background images and still have a fast loading speed:
- use the .gif extension (max 256 colors, with transparency support)
- use the .jpg extension with a higher compression (between 60 and 70)
- split the large image into smaller chunks, but requires some extra CSS
- load the background at the bottom of the HTML, requires some extra CSS
So here are some tips&tricks how to use large background images and still have a fast loading speed:
- use the .gif extension (max 256 colors, with transparency support)
- use the .jpg extension with a higher compression (between 60 and 70)
- split the large image into smaller chunks, but requires some extra CSS
- load the background at the bottom of the HTML, requires some extra CSS
and this helpful things to note
Markup4U team
October 20th, 2008 at 1:38 pm
And heres a solution for centering massive things in content not just bkrnd images, works in IE6, like a large flash file, that dosn't bump up against the edge of the browser
incase the page disappears heres the css:
body { margin:0; padding:0; } #wrapper { width:(element width); height:(element height); margin: (1/2 height) 0 0 (1/2 width); padding:0; position:absolute; left:50%; top:50% }starting to think this is going to be too cross browser buggy (my plan was to exactly pixel perfect join an img, and elsewhere a swf, with a background image line, and have it all stretchy and centered... ... might just use one big image / flv centered like as above.... with some z-index magic over that... breaking up the image into different bits is asking for trouble..
Posts
@Tor, Aaron Bassett
Setting a background for an html tag (thus, forcing the browser to calculate the width and height of the html element) will cause the body tag to be rendered as div and *not* fill the browser window’s full height (only as far as the content goes).
In such cases height/min-height properties should be set additionally.
@Colin
display:table works here because the body is not *shown* as table, but *rendered* as table, i.e. the minimal box width is calculated. No side effect on seo/semantics
@Cédric
Notes for IE6
1. setting expression like property for body’s min-width will fix this issue.
2. In some cases the width of the image needs to be wider than the container’s width.
For example:
* html body {width: expression(document.documentElement.clientWidth < style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">}
Please note that such css selector is not valid so it should be placed in a separate CSS file and linked using conditional comments. 904px is a value for webdesignerwall.com site’s min-width.
Great. This tutorial would have helped much when I tried to put a fixedbackground on my site. http://la-cajita.es/blog/
If anybody is willing to try it, the CSS would look like this:
body {
background: fixed url(’./images/lacajita.jpg’) no-repeat center;
color: #333333;
}
This way, with “fixed” and without “top”, it stays completely centered, even when you’re seeing just a little part of the website through a small browser window.
I would be more careful with huge backgrounds in terms of using website for different browsers - and I’m not talking about chrome/safari issue. Major problem is still pixel rounding which is different in different browsers.
E.g. FF3 will put offset 1px to the left, while IE7 will do it other way plus 1px more. Issue is appearing mainly when ‘center’ is in use.
Personally I found the way doing backgrounds in separate divs (one below body) with ‘top left’ or ‘top right’ (image is still fixed with pixel size, so shouldn’t be any problems with it). That way makes it safer for cross-browssing & saving your time to make fixes in IE.
I hope pixel rounding will be unified one day in all of the browsers (knowing market actually, proofs me wrong).