ansaurus

Question

Answer 1

A:

You can use the order of overrides to your advantage here:

Make the copied.css just include:

div.sidebar_beige_lap {
  background: url('../images/sidebar_backup_laptoprepara.png') no-repeat left top;
}

In your page, include them in order:

<link rel="stylesheet" href="original.css" />
<link rel="stylesheet" href="copied.css" />

Any properties overridden in copied.css will win, otherwise properties from original.css are inherited.

Nick Craver 2010-02-28 12:28:24

When I have a lot of different pages I will have about 12 different style sheets in my css folder ;)

Chris 2010-02-28 13:22:26

@chris, you can do the same with a style tag, or an overlapping styles, the multiple sheets example was just to match your original scenario.

Nick Craver 2010-02-28 13:40:57

I understand what you mean, I'll give it a try thanks for your reply

Chris 2010-02-28 14:18:55

Worked lke a charm! thanks!

Chris 2010-02-28 14:31:04

@Chris - Welcome :)

Nick Craver 2010-02-28 14:33:50

Answer 2

A:

use two classes on your div:

<div class="sidebar lap">...

Pull the bg mage out of the sidebar class so that all divs can share it. The set up a new class for each different bg you need (lpa, fcs, etc) which contains only the bg image.

Ray 2010-02-28 12:28:40

Answer 3

A:

Using multiple CSS classes assignment:

HTML FCS:

<div class="sidebar_fcs sidebar_beige">...</div>

HTML LAP:

<div class="sidebar_lap sidebar_beige">...</div>

Single CSS:

div.sidebar_beige {
 background: no-repeat left top;
 height: 142px;
 margin: 35px 0 35px 0;
 position: relative;
}
div.sidebar_beige h3 {
 color: #f57f20;
 font-family: 'trebuchet ms';
 font-size: 17px;
 left: 15px;
 margin: 0px;
 padding: 0px;
 position: absolute;
 top: 15px;
 width: 163px;
}
div.sidebar_beige p {
 color: #454343;
 font-family: 'trebuchet ms';
 font-size: 12px;
 left: 15px;
 margin: 0px;
 padding: 0px;
 position: absolute;
 top: 42px;
 width: 165px;
}
div.sidebar_fcs {
 background-image: url('../images/sidebar_backup_online.png');
}
div.sidebar_lap {
 background-image: url('../images/sidebar_backup_laptoprepara.png');
}

o.k.w 2010-02-28 12:34:14

I tried your sollution but the background doesn't apear anywhere, I updated my qestion with your sollution.

Chris 2010-02-28 13:02:40

@Chris, oops, the class for the div 'sidebar_beige_lap' should be 'sidebar_lap'. I've corrected the typo in my answer.

o.k.w 2010-02-28 13:22:45

Answer 4

+1 A:

If possible, the best way is to give each page a unique or helpful class and/or ID on the body element. So, just for an example, one page is:

<body class="bg-custom">

and another is

<body class="bg-custom-right">

Then in your CSS you can alter it like so:

.bg-custom #selector { background-img: url(...);}
.bg-custom-right #selector { background-img: url(...);}

where #selector is the element that you want to change on each page--but without having to give each one it's own new (copied) style rules or class name(s), making your CSS and HTML cleaner and easier to maintain. (As a bonus, if there's anything else you need to use the same trick on for per-page editing, you can do so.)

D_N 2010-02-28 12:34:50

Answer 5

A:

Your background image is on the sidebar_lap class.

In your HTML you use sidebar_beige_lap

Change your HTML to

<div class="sidebar_lap sidebar_beige">

Keith 2010-02-28 13:09:53

I found that error too, but still no luck

Chris 2010-02-28 13:20:54

ansaurus

tags:

views:

answers:

My background does not appear

related questions