Home/ Questions/Q 5999337
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T00:32:16+00:00

That simple. Moving my layout into a fluid territory, working on scalable images. Using

  • 0

That simple.

Moving my layout into a fluid territory, working on scalable images. Using the img tag and setting max-width to 100% works perfectly, but i’d rather use a div with the image set as its background.

The issue I’m running into is that the image doesn’t scale to the size of the div it’s in the background of. Any way to add markup to the background code to set it to 100% width of it’s container?

#one {
    background: url('../img/blahblah.jpg') no-repeat;
    max-width: 100%;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can do this with background-size:

    html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    background-size: cover;
}

    There are a lot of values other than cover that you can set background-size to, see which one works for you: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

    Spec: https://www.w3.org/TR/css-backgrounds-3/#the-background-size

    It works in all modern browsers: http://caniuse.com/#feat=background-img-opts

    • 0