Change body background image

different image for different pages

[Lame_Wolf]

Hi all,

I am trying to combine my css files so there are less calls to the server, and also help with speed etc.

Being self-taught (and the fact that I haven't really played with css in a long while) has left me rather stuck, or even know what to Google to find an answer.

It's a rather large site, and was made using a slightly different template for each section.

I have a div that shows an image right across the top of the page. Lets say that it is a picture of the countryside. This is used on every template.

The code for the is...

.header {
background-image:url(/backgroundimages/header-background.jpg);
background-repeat:repeat-x;
padding:0;
}

Now, I have different sections for the site, and I have a different logo for each section.

Lets say those images are cow, pig, sheep.

So, when they are in the cow section, an image of a cow appears, a pig image for the pig section, and so on.

The code I use is...

<div class="header"><a href="http://www.example.com"><img src="/backgroundimages/cow.jpg" alt="." border="0" width="500" height="200"></a></div>


<div class="header"><a href="http://www.example.com"><img src="/backgroundimages/pig.jpg" alt="." border="0" width="500" height="200"></a></div>


<div class="header"><a href="http://www.example.com"><img src="/backgroundimages/sheep.jpg" alt="." border="0" width="500" height="200"></a></div>

I want to combine them, but clueless as to how to go about it. It isn't as easy as I thought.

I tried import css before, but that seemed buggy on my PC, and it was a few years since I played with import css.

How can I go about reducing the css files needed ?
I want to keep the image of the countryside as a background, but still want the pigs sheep etc (which are logos) to display in their own sections.

Any ideas please ? (and sorry if I am not clear)

[Frank_Rizzo]

How are you loading the css files at the moment?

Do all pages have something like:

<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/country.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/animals.css" />

If that is the case then you can just cut and paste animals into style and country into style and just load one .css file on each page:

<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />

One other thing to do is to optimize the css code. Try

[cleancss.com...]

Paste your code in the box, change the compression level, process and cut and pate back to your main .css file.

[Lame_Wolf]

Hi Frank_Rizzo, thank you for being so quick to reply.

Presently, each section has their own template. Each template has just one css file. As there are three templates, there are 3 css files.

One template will use...
<link rel="stylesheet" href="/pig.css" type="text/css">

Another will use...
<link rel="stylesheet" href="/sheep.css" type="text/css">

And the other...
<link rel="stylesheet" href="/cow.css" type="text/css">

99% of the css files are the same. It's mainly just the logo that changes.

(I have used csstidy before, but always keep my version too as it is easier for me to read. I will check out cleancss too).

[Lame_Wolf]

I don't think that option will work.

The actual div doesn't change on any template. The div has a horizontal repeating image. The logo that "floats" in the left hand corner does.

So, <div class="header></div> will just show the repeating background image.
It then has a cow, sheep, or pig image on top of the background image, depending which template is being used.

<div class="header"><a href="http://www.example.com"><img src="/backgroundimages/cow.jpg" alt="." border="0" width="500" height="200"></a></div>

Will produce a repeating background image, with the cow.jpg "floating" on top (in the left hand corner.)

[alt131]

Hi Lame_wolf,

Your explanations are easy to follow, but I'm not sure I understand the issue. To clarify:

I understand you have a generic background image that is used on all pages, and in different sections (cow, pig, etc) a different relevant image is "overlaid" on top of that generic background to create clockable link. The generic image is a background-mage set on .header via css. The other images are hard-coded into the html for each page.

Now, if I have that right, this isn't a css issue because the images that change are coded into the HTML. As the changing images aren't provided by the css, they aren't in a css file, so won't be affected by combining the existing css files.

.. so I must be missing something in what you are trying to achieve.

Second, if most of the css is the same, a common technique to apply small variations is to set a class on <body> in the html, then in the css:
body.cow .header {border:10px solid lime;}
body.pig .header {border:10px solid orange;}

[Lame_Wolf]

Hi alt131,

I understand you have a generic background image that is used on all pages, and in different sections (cow, pig, etc) a different relevant image is "overlaid" on top of that generic background to create clickable link. The generic image is a background-mage set on .header via css. The other images are hard-coded into the html for each page.

Correct. :)

Now, if I have that right, this isn't a css issue because the images that change are coded into the HTML. As the changing images aren't provided by the css, they aren't in a css file, so won't be affected by combining the existing css files.

That is what I was starting to think too.

Since I sent the message, I have managed to put a div inside a div, but of course, I have lost the clickable link (hence lost alt atribute too).

I will try the 2nd suggestion, but need to clear my head first. I don't want to mess about with it too much because 1000's of files will be affected. I am presently working on a test template.

It is a dreamweaver template that I made myself, and some of code is locked and can only be altered from the template. And as my luck will have it, this part is locked. (lots of pages to alter if it works).

I don't want to lose the clickable link back to the homepage. Maybe this isn't a css question afterall.

Thank you all for your help.

[alt131]

Thanks for the clarification.
So now I'm think the question has moved to finding a good way to overlay a clickable image (that will change depending on the section of the site). I'd encourage you to also aim for an accessible solution to provide for people using assistive technology, plus the odd person with images and css turned off. Not many of those, but it's easy to build in from the beginning.

Lots of ways, but some techniques depend on the target market (browsers and versions), plus how much of the html you can edit.

So once you know how much of div.header you can edit, feel free to post back with an indication of the browser versions you need/want to support, and a solution should be easy. Please ... no nested divs :)

As you are trying to maximise efficiency, also wondered if you'd considered something like php includes for standard parts of the page - but I've managed to avoid dreamweaver's templating system, so not sure if that is a workable option.

[Lame_Wolf]

I've managed to fix most of the problem, alt131.

Basically, I kept the main css file as it was (for the main template).
Then, with the other template, I repointed it to css file to the main one.

So, it was a html problem and not css.

I then opened up both css files side by side and removed any dupe content.

Then I found a problem...

The body tag is different in the templates. (doh!)

I now have more html files using the "sheep css" and none using "pig css" which is a good thing.

However, the image that I use for a background in the body tag is the same throughout. No big deal, but not found a way yet of having two body tags in the css file.

Summary.
Two templates now use one css file. (not yet worked on the 3rd template).
Upside : Less css files used, and therefore less to download.
Downside : Body background image is the same.

I am a html only coder. "Hello World" was the best I could do with php. And I wouldn't want to use php anyway.

I haven't really played with css for such a long time, I feel like a total bell end. :)

[alt131]

I now have more html files using the "sheep css" and none using "pig css" which is a good thing.

Fantastic

The body tag is different in the templates. (doh!)
...
However, the image that I use for a background in the body tag is the same throughout. No big deal, but not found a way yet of having two body tags in the css file.

So now we're talking about a background-image for body (not a background-image for .header)? This may look like a problem, but should really be an opportunity. You're correct - you don't want/can't have two competing rule-sets for body in the css file, but you should be able to order a different background-image.

I still don't know how much you can edit the html, therefore whether it is possible to edit the <body> element. If so, the easiest would be to put a class on the body as in the example I posted above. Your basic, generic body { ...} style remains the same, just set the different background-image on each class.

If you can't edit the html, but the elements are different, it may be possible to use an attribute that is already coded into the html. Easy, but as you are just returning to css an example would help get you going. For that we need some code - so feel free to post the opening <body ...> from the html for each of the different bodies.

[Lame_Wolf]

So now we're talking about a background-image for body (not a background-image for .header)?

Correct. I've fixed the first problem, but overlooked the fact that the body tag were different.

This may look like a problem, but should really be an opportunity. You're correct - you don't want/can't have two competing rule-sets for body in the css file, but you should be able to order a different background-image.

I think I should be able to, but it's been a long stressful week for me.

I still don't know how much you can edit the html, therefore whether it is possible to edit the <body> element. If so, the easiest would be to put a class on the body as in the example I posted above. Your basic, generic body { ...} style remains the same, just set the different background-image on each class.

I have complete control over the html and can edit any part. Some may have to be altered via one of the templates, other things can be altered per page. Sometimes I let DW do it, sometimes I hand code.

For that we need some code - so feel free to post the opening <body ...> from the html for each of the different bodies.

The code on the html pages (and templates) is...

<body bgcolor="#232323" text="#FFFFFF">

The two lots of body tag codes (taken from each of the css files) are...

body {
background-image:url(/backgroundimages/sheep.jpg);
background-repeat:no-repeat;
background-position:left bottom;
background-attachment:fixed;
margin:0;
padding:0;
}


body {
background-image:url(/backgroundimages/pig.jpg);
background-repeat:no-repeat;
background-position:left bottom;
background-attachment:fixed;
margin:0;
padding:0;
}

[alt131]

It's Monday here - the beginning of a stress-free week :)

have complete control over the html and can edit any part

The week keeps getting better!

Ok, just so my suggestions don't get confusing, some language/terminology:
In the html,
<body> <-- element
<body bgcolor="#232323"> <-- open tag
</body><-- close tag

In the css
body {background-image:url(/backgroundimages/sheep.jpg); } <-- rule set/rule
body <-- selector
{background-image:url(/backgroundimages/sheep.jpg); } <-- declaration/declaration block.

The reason this is important is that my first thought about how to solve this was based on different body tags, but the tags are the same - its the css that is/needs to be different. That changes how to achieve what I'm suggesting.

I'm assuming you have all the files for section sheep in one folder, all the files for section pig in another - so a search and replace will be easy.

First, write your css, and if the bgcolor and text colour are the same throughout the site, for speed and easier code management I'd take the styles out of the html and put them where they belong - in a style sheet. Your css becomes:
body {
margin:0;
padding:0;
background-color:#232323; /* best practise is to specify a background-colour when you have a background-image, but I've put it here to ensure the text will be readable if something "goes wrong" with the image. */
color:#FFF;
}

# sheep { background:url(/backgroundimages/sheep.jpg) left bottom no-repeat fixed; /* short-hand reduces css even more */}
# pig {background:url(/backgroundimages/pig.jpg) left bottom no-repeat fixed; }

Then, search and replace your html to remove the inline style and replace it with the id: To avoid confusion:
search for <body bgcolor="#232323" text="#FFFFFF">
replace with <body id="sheep"> or body id="pig"> as required.

[Lame_Wolf]

Thank you, alt131.
It seems to have worked okay. Saved me a lot of hair pulling. I've just looked at the 3rd template, and there are more elements that need changing, but will be able to do it, but will take time.
Thanks again for all your help and effort.

[g1smd]

I would add a class name to the HTML body tag to say what sort of page this is, then use that name as a selector in the CSS file.

[alt131]

@Lame_wolf - grand! Especially after realising I clarified the language to avoid confusion, then typed:
# sheep { background ...}
^^ Note gap
- So (rhetorical) was that a "bullet point" in the discussion, or an ID that should look like this:
#sheep { background ...}
^^ no gap.
<sigh ...> It should have been an id - and it wasn't a test ;) - so I'm doubly relieved you prevented it derailing the solution

@g1smd
I would usually class too - but suggested an ID here because I don't know what else is lurking in the code. Probably nothing ... but a higher level of specificity seemed like good insurance.

[Lame_Wolf]

I would usually class too - but suggested an ID here because I don't know what else is lurking in the code. Probably nothing

Correct. All html is valid code, and so was the css. I am on strong meds atm, and I couldn't even remember my home address! So, you can imagine how it was to start playing with something that I hadn't touched in a few years (except a few tweeks here and there).

I didn't want to mix classes and ID's with the same line of code. 5% of my users are IE6 and I hear that adding a class to an ID can be buggy with IE5/6.

Thank you for everyones help.
LW