Graeme Posted August 22, 2010 Report Share 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 Quote Link to comment Share on other sites More sharing options...
Wickham Posted August 22, 2010 Report Share 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 Quote Link to comment Share on other sites More sharing options...
Graeme Posted August 22, 2010 Author Report Share 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 Quote Link to comment Share on other sites More sharing options...
Wickham Posted August 22, 2010 Report Share 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.