Responsive CSS Background Images

Responsive css background images

If you want the same image to scale based on the size of the browser window:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

Do not set width, height, or margins.

EDIT:
The previous line about not setting width, height or margin refers to OP's original question about scaling with the window size. In other use cases, you may want to set width/height/margins if necessary.

Background image responsive to mobile view using pure css

Ciao,

one elegant solution would be to better controlling exactly what you want to show in landscape and portrait mode. If you want to be responsive with a landscape image on a portrait screen you necessarily have to "lose something", as per @salff comment

My snippet for being more flexible depending on user screen:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>


html
{
    background:url("https://www.hotelmedici.com/images/slide_home/11_Fori_imperiali_1600X917.jpg") no-repeat center center fixed;
    background-size: cover;
    width: 100%;
}

#warning-message { display: none; }

@media only screen and (orientation:portrait)
{
    #wrapper { display:none; }
    #warning-message { display:block; color: white;}

    html
    {
        background:url("https://s3files.core77.com/blog/images/2013/11/ESB-HalloweenLightShow-1.jpg") no-repeat center center fixed;
        background-size: cover;
        height: 100%;
    }       
}


</style>
</head>
<body>

<div id="wrapper">
    <h2>Responsive Images</h2>
    <p>If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto.</p>
    <p>Resize the browser window to see the effect.</p>
</div>

<div id="warning-message">
    this website is only viewable in landscape mode
</div>

</body>
</html>

NOTE: the code was produced crossing and tweaking your code, w3schools snippet and this answer

Hope this helps, enjoy the weekend,

Antonino

background image not responsive

.img-responsive is for imgs, not normal elements. The fixed height/width on .page-header is keeping that element from being responsive. If you want that element to be responsive (and then the background will be responsive because you're using a responsive background-size), then use relative units (%, em, rem, vh, vw, etc) on .page-header instead of fixed (px) units, or use some @media queries.

How to make a CSS responsive background img for a long one page website

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Setting these to cover is going to stretch the image to fit the container, no matter how big it is. That is what's causing your stretching.

Set them to auto, or don't set them at all, if you want the image to retain it's original size.

Responsive CSS background image

Background Image

One way to do the background is to use background-size: cover as per this post:

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

Text

To do the text, you could look at using @media queries, but as you've selected the answer, I'll leave the rest up to you guys :)

CSS - Responsive Background Images inside a div

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>

Responsive image with div by css background-image

Height in percentage wont work unless any of the parent element has height in pixel.

My suggestion is to use img tag instead of background-image to make it responsive.

But If you can only use div with background image, then you have change the height of the div on window resize event using javascript.

Like if image is 4:3 ratio, the code will something like below :

<body onresize="resizeFunction()">
   <style>
    .imgBackground {
       width : 100%;
       background : your image link;
       background-size : 100%;
    }
   </style>
   <div class="imgBackground"></div>
   <script>
       function resizeFunction() {
         var widthOfDiv = $('.imgBackground').width();
         var heightOfDiv = width/1.33;
         $('.imgBackground').height(heightOfDiv);
      }
   </script>
</body>

Make two background images responsive alongside divs with CSS

theres a lot of error on your css. dont give fix width on your container if you want it to be responsive. ive edited your fiddle and came up with this: https://jsfiddle.net/kjyopdL8/4/

#seats:before {
    content: '';
    display: block;
    padding: 50%;
}

#seats {
    margin: 10px 0;
    padding: 10px 0;
    position: relative;
    background-image: url(http://i.imgur.com/qn56yss.gif);
    background-repeat: no-repeat;
    background-size: cover;
}

take a look at the pseudo selector before. it did the trick!