Spanning an image acrosss the browser like in facebook banner but now an image

I was wondering how i can make an image across the browser such that even though, my website is viewed in a larger monitor, the image will still span 开发者_开发技巧out and extend without showing a white space at the end.

You basically have two choices:

1. Use a repeating pattern that fills the entire width: you can do this using

   width: 100%; background: url(your-image-file) repeat-x

2. Use a fixed main image and a background filler image that fills the remaining area: the background would use the same code as above and the main image could be an img within the background container.

Well, to start, lets clear your margins with this code.

* {            
    margin: 0;
    padding: 0;
}

By using this in your style sheet or section, it will allow for those images to stretch all the way with no white space.

Next, you'll want to create an image that doesn't look skewed. To do this you will need to create it in a fairly wide format to begin with. If you are looking to fill the entire background, I would suggest 1028X768 px as a good size.

Finally, it's time to place the last bit of code and get it all working.

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

This will work with dang near all current browsers (except IE8 and below).

In order to place an odd size image that you want to span but not entirely cover, I would suggest using a <div> to create a place for the image and add a style to the <div> that says width: 100%;.

This can be done with height as well.

Hope this helps.