<html> Background-Image with 75% width?

HTML & CSS
1

Hi,

is it possible to set a background-image to just 75% width while adding it to the <html> tag without setting the whole page to 75%?


html {
	background-image: url({vb:raw imageurl});
	background-repeat: no-repeat;
        background-position:left;
}

Thanks a lot!

2

Unfortunately, background images don’t scale like that … well, not in CSS2, anyway. (They will do so in CSS3, but that’s not widely supported yet.)

There are, however, ways of doing such things with JavaScript. An example would be something like Supersized. It’s a lot of code for a simple effect, but anyhow, it’s possible. ([URL=“http://buildinternet.com/project/supersized/core/3.2/core.html”]Here is a version of it that just uses one background image rather than a slideshow.) I suppose you could set up your background image so the 25% of it (12.5% either side) is the plain background color of the site. Just a thought, anyhow.)

3

Hi,

CSS3 has background-size which allows for background images to be scaled with percentages etc. You can see browser support for the property [URL=“http://caniuse.com/#search=background-size”]here. Its supported only in ie9+.

I would avoid applying background to the html element unless you know the consequences as that relegates the body background to content height only. It’s best to use the body elements for backgrounds unless you really have no choice.

Edit:

Whoops ralph beat me to it :slight_smile:

4

We actually try to put a background-image as kind of “ambient-image” into a vbulletin-forum. Depending on the subforum a specific background-image shows up, with a low opacity. As the <body> tag got border with padding around it we went ahead using the <html> tag.

Thanks a lot guys, I will go for the CSS3 background-size attribute for now.