CODEWITHSUNDEEP
css
nsilva
nsilva

Reputation: 5612

CSS - Responsive Background Images inside a div

Take the following code:-

HTML:

<div id="wrapper">
<div id="nottingham-park">
</div>

CSS:

#wrapper {
  width: 100%;
  height: auto;
}
#nottingham-park {
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/nottingham-park.png);
    background-size:100% auto;
    background-repeat: no-repeat;
    display: block;
    //height: 700px;
}

FIDDLE

If I don't set a height to #nottingham-park, the background image isn't visible, if I set a height, it's not responsive.

How can I display the image so it's always 100% width and auto height?

Upvotes: 2

Views: 3221

Answers (2)

NewsletterPoll
NewsletterPoll

Reputation: 554

you can force the size of #nottingham-park to the size of the background-image with padding-top. see the comments in the css to see how you can calculate what the padding-top should be.

this way your image will be responsive and never stretched out of proportion.

hope this is what you are asking for.

#wrapper {
  width: 100%;
  height: auto;
}
#nottingham-park {
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/nottingham-park.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
  
    /* 
    width of image / height of image * width
    699px / 1200px * 100  = 57.7208918249
    (change the 100 in this formula to whatever you want.)
  */
    padding-top: 57.7208918249%;
}
<div id="wrapper">
  <div id="nottingham-park">
  </div>
</div>

Upvotes: 4

Nutshell
Nutshell

Reputation: 8537

EDIT

How about a fluid padding-bottom ?

Like this 

#nottingham-park {
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/nottingham-park.png);
    background-size:100% auto;
    background-repeat: n-repeat;
    display: block;
    padding-bottom : 55%;
}

Upvotes: 0

Related Questions