Is there a way to use max-width and height for a background image

Question

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

User · Answer

Unfortunately there s no  min  or max -background-size in CSS you can only use background-size  However if you are seeking a responsive background image you can use Vmin and Vmaxunits for the background-size property to achieve something similar   example    one       background url     img blahblah jpg   no-repeat      background-size 10vmin 100       that will set the height to 10  of the whichever smaller viewport you have whether vertical or horizontal  and will set the width to 100    Read more about css units here  https   www w3schools com cssref css units asp

User · Answer

As thirtydot said  you can use the CSS3 background-size syntax   For example   -o-background-size 35  auto  -webkit-background-size 35  auto  -moz-background-size 35  auto  background-size 35  auto    However  as also stated by thirtydot  this does not work in IE6  7 and 8    See the following links for more information about background-size  http   www w3 org TR css3-background  the-background-size

User · Answer

It looks like you re trying to scale the background image  There s a great article in the reference bellow where you can use css3 to achieve this   And if I miss-read the question then I humbly accept the votes down   Still good to know though   Please consider the following code    some div or body       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      This will work on all major browsers  of course it doesn t come easy on IE  There are some workarounds however such as using Microsoft s filters   filter  progid DXImageTransform Microsoft AlphaImageLoader src   myBackground jpg   sizingMethod  scale    -ms-filter   progid DXImageTransform Microsoft AlphaImageLoader src  myBackground jpg   sizingMethod  scale       There are some alternatives that can be used with a little bit peace of mind by using jQuery   HTML   lt img src  images bg jpg  id  bg  alt    gt    CSS   bg   position  fixed  top  0  left  0     bgwidth   width  100      bgheight   height  100       jQuery      window  load function          var theWindow            window        bg                    bg        aspectRatio         bg width      bg height     function resizeBg          if    theWindow width     theWindow height     lt  aspectRatio              bg              removeClass                addClass  bgheight          else            bg              removeClass                addClass  bgwidth              theWindow resize resizeBg  trigger  resize           I hope this helps   Src  Perfect Full Page Background Image

User · Answer

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

[image] Is there a way to use max-width and height for a background image?

example:

Examples related to image

Examples related to fluid

Examples related to css