Is there a way to use max-width and height for a background image?
ImageFluidCssImage Problem Overview
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%;
}
Image Solutions
Solution 1 - Image
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
Solution 2 - Image
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
Solution 3 - Image
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
<img src="images/bg.jpg" id="bg" alt="">
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()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});
I hope this helps!
Solution 4 - Image
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 Vmax
units 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
Solution 5 - Image
This is the solution you are looking for!
background-size: 100% auto;