CSS Background

moif · Jun 13, 2005

Hi Group,

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.

Andy Dingley · Jun 13, 2005

What I want to achieve is the background to dynamically resize in all browsers at all
resolutions.

You can't (practically, or with CSS alone).

Set the background colour to be an innocuous colour lifted from the
image,
background-color: #006600;

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
then change
background-repeat: no-repeat;
to
background-repeat: repeat-x;
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.

I'm running a resolution of 1280 x 960 and the bg image is 800 x 600. It

It's actually 1024 x 768 - that should be plenty big enough, just with a
mid-green canvas to it.

moif · Jun 13, 2005

Andy said:
You can't (practically, or with CSS alone).

Set the background colour to be an innocuous colour lifted from the
image,
background-color: #006600;

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 then change
background-repeat: no-repeat;
to
background-repeat: repeat-x;
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.

Hey great, thanks for all the advice! Defiantely some things there for me to
chew over. Oh and the BG is being reduced to a gif as we speak.

Thanks again.

Background image not showing up on html page	3	Sep 23, 2023
Stuck with html and css	25	Dec 14, 2022
CSS Grid inside slider not working...	1	Nov 28, 2022
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022
css question	2	Jul 21, 2011
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
R"richard" help out: background images in mobile	5	Mar 6, 2014
<img> or CSS background-image?	6	Oct 2, 2006

CSS Background

moif

Andy Dingley

moif

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads