css - how to make this background work?

Scam

Scam

Scam

Soldato
Joined
20 Oct 2002
Posts
18,998
Location
London
I've been slowly putting together a site for a friend of mine and he's sent through a replacement background (he did originally want flash/video as the background, eek!). He's mocked it up as below, but I'm just wondering what would be the best way to implement it?



Height/length is no problem as it will be static, but I'm just wondering about the best way to make it work for users with ultra-wide screens (etc.)? :confused: Any recomendations? Surely using a 3000px image as a background is not going to go down well!

Thanks!
 
300px background will not matter, as long as you set the background to something like this:

background: url(/backgroundlink.png) no-repeat;

It may be slightly different for your website, but as long as you use the no-repeat, the image size will not make a difference, then it will be automatically adjusted for wider browser screens.
 
Step 1: Take one instance of the logo that makes up that pattern, and use it as a small repeating background tile on the body.

Step 2: Apply a CSS3 radial gradient [white to transparent] in a container div above it. Use vendor prefixes to tailor the gradient for different browsers.

Step 3: ???

Step 4: Profit*. Or at least bask in the substantial bandwidth saving for pretty much the same effect :)



* Not actually possible when working for friends.
 
Last edited:
Last edited:
Thanks guys, I think I'll try the non-CSS3 (last link) method. I'll see how I go.

I'm a bit out of the loop to be honest, how well is CSS3 supported now?
 
Very well supported on Webkit (Chrome/Safari/Arora/Rockmelt etc), Mozilla needs FF4 before it will be well supported, like transition isn't supported atm, and IE9 will support various parts of it I do believe.
 
Ah, dont ask me why but for some reason I'm still running FF 3.6. I was looking back at this thread wondering why I couldnt see any backgrounds on the link FabienO posted! (http://www.fabieno.com/27).

I've just realised the massive version of the background I requested from the client continues with a gradient from white in the middle, all the way to practically black. Nowhere to 'stop' it for tiling, without it looking obvious. Time to do some quality control :p

EDIT: Quick question; is using two images as a background a CSS3 thing? I was setting the tiling on the html element, and then the radial splash thing on the body. But then thought why not just do this:

Code: 
background: url('img/backgrounds/radial-bg1.jpg') no-repeat top center, url('img/backgrounds/g2-tile1.gif') repeat top center;
as suggested above. Which is the most friendly to the most browsers? :confused:

Now my problem is that my tiles dont lineup with the main picture and I don't know why :(
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom