Hello,
How can I load images to cover the whole background like some websites, using CSS. Not the usual background-image property but I want to load the images quickly.
example sites - http://www.marinayachting.it/ http://alexandraowen.co.nz/
Thanks Jean
background-image is the only way to place images in CSS. If you want it to be vary large put it on the body element or a container div that fills the entire viewport.
body {
margin: 0;
padding: 0;
width: 100%;
background-image: url('my_big_image.jpg') norepeat;
}
If you use a container div you can set position:fixed; top:0; left:0 and the image will remain stationary when the page scrolls.
There's no magic to it. As far as getting it to load quickly I don't think there's much you can do if it doesn't repeat. If it does repeat then make sure your image is the size of one module. This can be as little as one pixel tall or wide depending on the content.
Bing is loading a normal background image with a fixed size. It´s not particularly fast (for me...), but perhaps it seems fast because the image is cached after the first time you load it.
You can set the style inline so that the image can start downloading without waiting for any css file to be ready.
There is no magic to making a background image load quickly, you just:
If you set an image let's say a picture as a background you need to make it large enough to accommodate large screen sizes. You don't want the experience on your site to be, that your picture repeats multiple times on the screen. Probably at the least width should be 1260px. If background is just a simple gradient, you can cut a small part of it in photoshop and apply it on the body like this:
body {
margin:0;
padding:0;
background:#fff url(your/image/location.jpg) repeat-x scroll 0 0;
}
This method could be applied to divs too, Good luck.
In your second example site, alexandraowen.co.nz, if you took a second to look at the JS they use, you would have seen the following:
// backgrounds --------------------------------------------------------------//
var Backgrounds = {};
Backgrounds.init = function()
{
$('body').each
(
function()
{
var imgsrc = $(this).css('background-image');
if(imgsrc != 'none')
{
imgsrc = imgsrc.slice( imgsrc.indexOf('(') + 1 , -1);
$(this).css('background-image', 'none');
$(this).prepend('');
if($.browser.msie)
{
// ie 7 is the slow kid and we have to strip out quote marks ffs!
$(this).find('div.bg img').attr('src', imgsrc.split('"').join(''));
}
else
{
$(this).find('div.bg img').attr('src', imgsrc);
}
}
}
);
Backgrounds.resizeHandler();
$(window).resize(Backgrounds.resizeHandler);
$('div.bg img').load(Backgrounds.resizeHandler);
}
Backgrounds.resizeHandler = function()
{
var w = $(window).width();
var h = $(window).height();
$('div.bg img').each
(
function()
{
var wr = w / $(this).width();
var hr = h / $(this).height();
var r = Math.max(wr, hr);
var imgw = Math.round($(this).width() * r);
var imgh = Math.round($(this).height() * r);
$(this).width( imgw );
$(this).height( imgh );
var l = Math.round((w/2) - (imgw/2));
$(this).css('margin-left', l+'px');
}
);
}
As well as the HTML on the page:
<body style="background-image: none; ">
If you dig into their scripts a bit more, you can see what they did. But I guarantee you it's nothing faster than just setting the background-image property.
Hello, I'm the guy who made marinayachting.it.
Basically, there are three way for big (and scaled) backgrounds: use css background-image, stretch an <img /> tag positioned: fixed or use both ways.
The best way is to use css background-image with the new cool background-size property. Firefox (since 3.6, i think), Safari, Chrome and Opera support it (with vendor prefixes, for now). The bad guy is (guess!) Internet Explorer. So, the trick is to target IE and Firefox < 3.6 via javascript and inject a streched <img /> tag in the document onready event.
For making things fast, export the image no larger than 1024px (on some kind of images, even smaller resolution works well) and not more than 100kb in size. A fast server or even better a CDN will help, of course.
Note that IE prior to version 8 renders streched images in a very ugly way (linear scaling) and is slooow! Using the proprietary vendor css -ms-interpolation-mode:bicubic; will help a bit, but will also make that crappy browser even slower. For best quality and performance you can use the AlphaImageLoader filter. Yes, the same used for solving png transparency issues in the old IE6. For Example. the backgrounds and the animated carousel in the gallery sections of marinayachting.it are all loaded with the AlphaImageLoader filter. The carousel in particular, wich uses slightly streched pngs animated via javascript, was running at 0.5fps without the filter!
Hope that helps. If you have more questions feel free to ask!