Do you have a question? Post it now! No Registration Necessary. Now with pictures!
- Posted on
- CSS Background
June 13, 2005, 4:14 pm
rate this thread
I'm very new to CSS so please be gentle!
I'm starting a blog in reference to my World of Warcraft adventures and I'm
using a default blog theme that I'm hacking to pieces in Dreamweaver. If you
take a look at http://www.brightonbreaks.co.uk/blog/ you can see the start
of something that I hope will evolve into something interesting etc etc.
However, the theme I'm using is obviously CSS based (kudos to Douglas Bowman
@ www.stopdesign.com) and I'm having some issues with the code. What I want
to achieve is the background to dynamically resize in all browsers at all
resolutions. It's been a while since I used HTML or even looked at CSS and I
was wondering how this can be achieved.
I'm running a resolution of 1280 x 960 and the bg image is 800 x 600. It
appears to be short off the bottom by an inch or which makes sense. Would I
have to increase the size of the bg image and then force a shrink for any
browsers that are running at a lesser res?
TIA for any help / pointers.
Re: CSS Background
You can't (practically, or with CSS alone).
Set the background colour to be an innocuous colour lifted from the
maybe set the "real" background image to be left-aligned rather than
centred (probably not necessary in this example though), and just let a
solid colour border fill in the gaps .
Or else do something clever with aligning the horizons on each side and
for an infinitely wide forest
If you want to be clever (always risky) place your "real" background
unrepeated into a <div> that you use for content and have the background
of the <body> replaced by a repeating image of simple sky/grass/horizon.
Now given the target audience, they're going to have broadband and big
screens. So 100k for a bgimage isn't out of line. But for normal web
use, compress the hell out of it and get it under 25k.
It's actually 1024 x 768 - that should be plenty big enough, just with a
mid-green canvas to it.