Full Width Background Image Sizing

[goalieman34]

I am looking to fix my second full width image (the one in the middle of the page) so that it auto fits horizontally the same as the one above in the header image. Can somebody check my CSS so see if it is correct. It needs to auto resize to fit the screen like the header image above. When I view it on mobile it is not fitting correctly. Thanks for taking a look.
http://www.jobspark.ca

.fullWidthSectionBG {
background-image: url(‘http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg’);
margin-left: -1600px;
margin-right: -1600px;
padding-top:40px;
padding-bottom:260px;
overflow: hidden;
background-repeat: no-repeat;
background-size: auto;
background-position: center;
}

[TheDoc]

Generally you just use `background-size: cover`, but there is some crazy CSS going on here.

margin-left: -1600px;
margin-right: -1600px;

That’s a huge red flag.

[schill]

I was told not to use background-size:cover, because it isn’t supported in IE8. Does anyone have any recommendation on how they would approach this.
http://www.jobspark.ca

[unasAquila]

A [jQuery](https://github.com/louisremi/jquery.backgroundSize.js) solution

[KP1]

Hi friend,

” background-size:cover ” is the best solution for this issue. for ie7 and ie8 try to use jquery background image re-size plugin (Please visit the link: https://github.com/louisremi/jquery.backgroundSize.js).
You can use conditional statement only for IE7 & IE8 (helps to optimize site loading time )

[schill]

When i change background-size to cover it stretches the image all weird. Can you show me the css and html i need to insert for the JQuery. I have looked at the Github and not sure where the correct code is. Thanks for the help

[KP1]

Please download source code from github as ZIP file, zip file includes demo folder, you can find it the demo index.html file.

[KP1]

Add jquery file link to your project file.
Line Number: 63
File Name: index.html

[dhimage]

how about these sample codes to resize image, will it help you fit to the full screen. it does a great job when you want to get the size you desire.

[Author]

Posts