Create background image that adjusts to different screen resolutions?

Community Forums Forums Design Tips and Tricks Create background image that adjusts to different screen resolutions?

This topic is: not resolved

This topic contains 3 replies, has 3 voices, and was last updated by  Herman 1 year, 3 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #62537

    Herman
    Participant
    Post count: 91

    I replaced the background image behind the slider in Outreach but it won’t display correctly in different desktop resolutions.

    Here’s the CSS code:

    #inner {
    background: #5282C4 url(images/inner.png) no-repeat center center;;
    clear: both;
    margin: 0 auto;
    overflow: hidden;
    padding: 30px 0;
    }

    Any solutions?

    http://www.washdcfamilyfed.org/
    #62751

    ramseyp
    Participant
    Post count: 99

    Herman,

    You can add background-size: 100% auto; to that style declaration.

    #inner {
    background: #5282C4 url(images/inner.png) no-repeat center center;;
    clear: both;
    margin: 0 auto;
    overflow: hidden;
    padding: 30px 0;
    background-size: 100% auto;
    }

    #62752

    nunotmp
    Participant
    Post count: 192

    You can use a background size of cover. something like this

    
    #inner {
    background: #5282C3 url(images/inner.png) no-repeat center center;
    clear: both;
    margin: 0 auto;
    overflow: hidden;
    padding: 30px 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    

    This will adjust to all screen sizes and uses the necessary browser prefixes.


    #62811

    Herman
    Participant
    Post count: 91

    Thanks a lot ramseyp and nunotmp. I decided to go with nunotmp css code. Please check if the image displays correctly in your browser.

    http://www.washdcfamilyfed.org/

    Here’s my follow-up question:
    Should I decrease the size of the image or align the monument and church differently on the blue background?

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

You must be logged in to reply to this topic.