different background image

**hungry** · 05-09-2003 07:34 AM

i am trying to have a background image that do not repeat and is always at the bottom left of the screen. i am able to do this using css but i have a small problem. i need to change the background image for different pages. is there anyway to do this all in 1 css or do i have to create a css for each page.

is it possible to do the same thing, background image that do not repeat and is always at the bottom left of the screen, using just html?

below is a segment of my css code

body{
BACKGROUND-IMAGE: url(images\bg.jpg);
BACKGROUND-POSITION: bottom left;
BACKGROUND-REPEAT: no-repeat;
}

**nkaisare** · 05-09-2003 09:01 AM

using just html?
Not really. You can put a bgimage in bottom-left table cell, but that image will be bottom-left with respect to the table and not the viewport.

is always at the bottom left
You will require "background-attachment: fixed" to keep it fixed.

i need to change the background image for different pages
You can use same common css file. Then, in each html page, add
<script type="text/css">body{background-image('img.gif')}</style>
Or have a javascript (external .js?) that reads the name of the html file, and accordingly document.writes the above-mentioned line.

**Charles** · 05-09-2003 09:10 AM

Originally posted by nkaisare
You can use same common css file. Then, in each html page, add
<script type="text/css">body{background-image('img.gif')}</style>
Or have a javascript (external .js?) that reads the name of the html file, and accordingly document.writes the above-mentioned line.

That should be a STYLE element and not SCRIPT. And that's the most common typo that I make. Or you can use an inline style.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta content="text/css" name="Content-Style-Type">
<title>Style Example</title>
<link href="style.css" rel="stylesheet" type="text/css">
<body style="background-image:url(someImage.png)">

**sheila** · 05-09-2003 10:53 AM

Or add a unique id to the body tag on each page:

body{
BACKGROUND-POSITION: bottom left;
BACKGROUND-REPEAT: no-repeat;
}
body#home {
BACKGROUND-IMAGE: url(images\bg1.jpg);
}
body#site-index {
BACKGROUND-IMAGE: url(images\bg2.jpg);
}

Thread: different background image

Thread Tools

Display

different background image

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions