Graeme Posted August 22, 2010 Report Posted August 22, 2010 Hello All, Is it possible to have one background image that fits the screen and if so what size should it be? Thank you as always, Best wishes Graeme
Wickham Posted August 22, 2010 Report Posted August 22, 2010 (edited) Background-image will not stretch to fill a screen resolution. You can do it using a normal <img> in a div. Give the div with the image position: fixed or position: absolute; width: 100%; left: 0; right: 0; and z-index: -1; to put it behind everything else. Position: fixed or position: absolute take the div out of the normal flow and it just sits there without affecting anything on top. (Or don't have the div tags and make the img display: block; instead with all the styles for the img instead of the container div). See http://www.wickham43.net/backgroundfullwidthflexible.html Edited August 22, 2010 by Wickham
Graeme Posted August 22, 2010 Author Report Posted August 22, 2010 Hello There, Thank you for this. I think I understand. Should I put <div class="noborder"> <img class="background" src="images/daimlerdartfrontfaint.jpg" alt="Daimler Dart"> </div> within <div id="body"> and what would be the right size for the background image? Thank you, Best wishes Graeme
Wickham Posted August 22, 2010 Report Posted August 22, 2010 (edited) You can ignore the noborder class, that was just because my default stylesheet had a border and padding and I wanted to get rid of it. Put <div> <img class="background" src="your-image.jpg" alt="Image description"> </div> as the first code inside the <body> tag. You don't need to create a <div id="body">...</div> The image should be quite large, say 1200px wide, as it may need to be expanded and would look pixellated if you try to enlarge a small image. The height needs to be about 650px high to cover the screen at most screen resolutions but some screen resolutions may show the body background under the image as its height will decrease in proportion as the width is decreased. In my example, make the window smaller and drag the window width larger and smaller to see the effect on the image and its height. Note that the CSS code does not state a height, so the height will always be in proportion to the width. Edited August 22, 2010 by Wickham
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now