4 replies [Last post]
jimhere
jimhere's picture
Offline
Enthusiast
Cambridge Mass
Last seen: 11 years 40 weeks ago
Cambridge Mass
Timezone: GMT-4
Joined: 2005-03-14
Posts: 57
Points: 0

For my site, I'm using

body {
	color: #333;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background: #fbde97 url(../i/mainBG.gif) repeat-y;
	margin: 0px;
	padding: 0px;
}

to control the page's background (the .gif).

I need to make only one page in the site have a different background (the homepage will have a solid color), but of course it always looks to the css "body" for it's look. Is there a way to make a different overall background on one page of the site?

I tried making "#homePage body" but it just laughed at me...

born in the 20th century

Maujor
Maujor's picture
Offline
Regular
Rio de Janeiro, Brazil
Last seen: 4 years 39 weeks ago
Rio de Janeiro, Brazil
Timezone: GMT-2
Joined: 2003-11-21
Posts: 46
Points: 2

a second BG

You can achive it, setting a class or id for the BODY element.
See the following:
HTML code:

........
<head>
---------
</head>
<body id="alternate-background">
page code
</body>
</html>

CSS code:
body {
   color: #333;
   font-size: 12px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   background: #fbde97 url(../i/mainBG.gif) repeat-y;
   margin: 0px;
   padding: 0px;
}

body#alternate-background { 
   background:#XXXXXX; /* your solid color */
}

Maurício "Maujor®" Samy Silva
Site: http://maujor.com
Books: http://livrosdomaujor.com.br

jimhere
jimhere's picture
Offline
Enthusiast
Cambridge Mass
Last seen: 11 years 40 weeks ago
Cambridge Mass
Timezone: GMT-4
Joined: 2005-03-14
Posts: 57
Points: 0

a second BG

Thanks!

I had tried that originally but I guess it didn't work bacause I kept all the other stuff:

body#homePage { 
   color: #751577; 
   font-size: 12px; 
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   background: #751577; 
   margin: 0px; 
   padding: 0px; 
}

(I just deleted the part about the .gif)

So now I followed your example and simply used:

body#homePage { 
   background: #751577; 
}

And it works (yay!). What was it about the font info that made it not work at first?

born in the 20th century

Maujor
Maujor's picture
Offline
Regular
Rio de Janeiro, Brazil
Last seen: 4 years 39 weeks ago
Rio de Janeiro, Brazil
Timezone: GMT-2
Joined: 2003-11-21
Posts: 46
Points: 2

a second BG

What was it about the font info that made it not work at first? May be you have had used the wrong sintax for the first time. You said:"I tried making "#homePage body" but it just laughed at me..."

Maurício "Maujor®" Samy Silva
Site: http://maujor.com
Books: http://livrosdomaujor.com.br

jimhere
jimhere's picture
Offline
Enthusiast
Cambridge Mass
Last seen: 11 years 40 weeks ago
Cambridge Mass
Timezone: GMT-4
Joined: 2005-03-14
Posts: 57
Points: 0

a second BG

I DID flip them... That's probably it.

born in the 20th century