100% width background image with an 'auto'

Question

I'm currently working on a mobile landing page for a company. It's a really basic layout but below the header there's an image of a product which will always be 100% width (the design shows it always going from edge to edge). Depending on the width of the screen the height of the image will obviously adjust accordingly. I originally did this with an img (with a CSS width of 100%) and it worked great but I've realised that I'd like to use media queries to serve different images based on different resolutions - let's say a small, medium and a large version of the same image, for example. I know you can't change the img src with CSS so I figured I should be using a CSS background for the image as opposed to an img tag in the HTML.

I can't seem to get this working properly as the div with the background image needs both a width and a height to show the background. I can obviously use 'width: 100%' but what do I use for the height? I can put a random fixed height like 150px and then I can see the top 150px of the image but this isn't the solution as there isn't a fixed height. I had a play and found that once there is a height (tested with 150px) I can use 'background-size: 100%' to fit the image in the div correctly. I can use the more recent CSS3 for this project as it's aimed solely at mobile.

I've added a rough example below. Please excuse the inline styles but I wanted to give a basic example to try and make my question a little clearer.

<div id="image-container">
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>

Do I maybe have to give the container div a percentage height based on the whole page or am I looking at this completely wrong?

Also, do you think CSS backgrounds are the best way to do this? Maybe there's a technique which serves different img tags based on device/screen width. The general idea is that the landing page template will be used numerous times with different product images so I need to make sure I develop this the best way possible.

I apologise is this is a little long-winded but I'm back and forth from this project to the next so I'd like to get this little thing done. Thanks in advance for your time, it's much appreciated. Regards

Answer 1

Just use a two color background image:

<div style="width:100%; background:url('images/bkgmid.png');
       background-size: cover;">
content
</div>

Answer 2

It's 2017, and now you can use object-fit which has decent support. It works in the same way as a div's background-size but on the element itself, and on any element including images.

.your-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

Answer 3

Instead of using background-image you can use img directly and to get the image to spread all the width of the viewport try using max-width:100%; and please remember don't apply any padding or margin to your main container div as they will increase the total width of the container. Using this rule you can have a image width equal to the width of the browser and the height will also change according to the aspect ratio. Thanks.

Edit: Changing the image on different size of the window

$(window).resize(function(){
  var windowWidth = $(window).width();
  var imgSrc = $('#image');
  if(windowWidth <= 400){			
    imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
  }
  else if(windowWidth > 400){
    imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
  <img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>

In this way you change your image in different size of the browser.

Answer 4

try this

html { 
  background: url(image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

Answer 5

Add the css:

   html,body{
        height:100%;
        }
    .bg-img {
        background: url(image.jpg) no-repeat center top; 
        background-size: cover; 
        height:100%;     
    }

And html is:

<div class="bg-mg"></div>

CSS: stretching background image to 100% width and height of screen?

Answer 6

html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}