Jump to content

Background Image


Graeme

Recommended Posts

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 by Wickham
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by Wickham
Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...