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%;
}
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!
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
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.
#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
Source: Stackoverflow.com