CSS for backgrounds

I have three web sites which are all the same apart from the background.

At present each has it own stylesheet. They are identical apart from the body element which has the relevant background specified.

Can they be merged ? So that we just have separate classes for the background on each site

http://www.c5d.co.uk/bar.php
http://www.c5d.co.uk/bartwo.php
http://www.c5d.co.uk/barfour.php

If the answer is no, so be it?

I’m sure they can. If they are actual separate sites, you just need to use an absolute url when linking to the stylesheet.

Those links won’t load for me.

Thanks fro the quick reply.

All of them load for me. From the message board post

Hi there certificates.

give the “body element” of each document a “specific id” attribute, let’s say…

  1. id=“body-one”
  2. id=“body-two”
  3. id=“body-three”

You can now use just a single CSS file like this …

#body-one {  
    background:  url(http://www.c5d.co.uk/gradient.jpg) left top repeat-x;
 }
#body-two {  
    background:  url(http://www.c5d.co.uk/golfclubbackground.jpg) no-repeat center center fixed;
 }
#body-three {  
    background:  #fff;
 }
table, td, th{
	#border: 1px solid #90C8E9;
	border-collapse: collapse;
}
/* the rest of you css  file*/

coothead

Thanks, I shall give it a try

I guess I didn’t do it correctly because the test page has gone awry http://www.c5d.co.uk/archie.php

I put this in the body

<body id="body-one">

and adjusted the CSS to

#body-one {
background: url(http://www.c5d.co.uk/gradient.jpg) left top repeat-x;
}

Did you try validating your CSS? It’s showing several errors.

http://jigsaw.w3.org/css-validator/validator?profile=css3&warning=0&uri=http%3A%2F%2Fwww.c5d.co.uk%2Farchie.php

I have corrected 6 out of 9 of the errors, however as they were there before and did not prevent the page from displaying correctly, I guess they are not the cause of the problem

Don’t be so sure about that.

Some browsers may “fix” things, but you have no guarantees about how they will “fix” them nor for how long they will “fix” them.

For example, if CSS has an incorrect comment like

h2 {
 font-size: 1.2em; // don't rely on browser default size
 background-color: #EEE; 
 text-align: center;
}
h3 {

Some browsers may use the font-size but not the background-color or text-align and skip to the h3 rule, others may skip the rest of the CSS entirely.

It would help if you could explain which element is awry exactly?

If you mean the #body-one background image then you don’t actually have that css in your file?

Where is that rule in this file?

1 Like

Thanks fr coming back to me, you are always so helpful

I have been trying to re do this morning so things have changed a bit.

I shall try and finish the project to get from 20+ css sheets into maybe four or five.

When I have just a couple of points to resolve, I’ll come back

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.