Grow your CSS skills. Land your dream job.

Full Width Background Image Sizing

  • # May 22, 2013 at 2:19 am

    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;
    }

    # May 22, 2013 at 3:15 am

    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.

    # May 22, 2013 at 10:05 am

    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

    # May 22, 2013 at 10:15 am

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

    KP1
    # May 22, 2013 at 10:34 am

    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: http://github.com/louisremi/jquery.backgroundSize.js).
    You can use conditional statement only for IE7 & IE8 (helps to optimize site loading time )

    # May 22, 2013 at 10:49 am

    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
    # May 22, 2013 at 11:28 am

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

    KP1
    # May 22, 2013 at 11:31 am

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

    # March 20, 2014 at 7:20 pm

    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.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".