How to override background image defined in CSS with another CSS?

Question

I have a 'Core.css' which defines a page background image, along with the theme, for the site. But for a specific page I want to change just the background. Any suggestions on how this can be achieved in a separate CSS file?

The HTML for the page is:

<head>
    <link rel="stylesheet" type="text/css" href="core.css" />
    <link rel="stylesheet" type="text/css" href="index.css" />

And core.css defines:

body
{
        background-image: url('bg.png');
}

While index.css defines:

body
{
    background-image:('homeBg.png');
}

Thanks!

it would help to see the css definition on both css files, and how you import them to your webpage. — Jón Trausti Arason, Jan 26 '11 at 13:38
@xorcus looking at it now, yeah it seems "url" is missing...but I couldn't say for sure as this was a long time ago and since forgotten problem — aateeque, Oct 21 '13 at 11:14

score 54 · Answer 1 · edited Jan 22 '13 at 00:55

54

If you want to replace the background image with nothing (i.e. make it inactive or "turn it off"), use the "none" keyword in your downstream style sheet:

 background-image: none;

edited Jan 22 '13 at 00:55

wtsang02

18,603
10
49
67

answered Jan 22 '13 at 00:35

unknownrisk

683
1
5
8

Jón Trausti Arason · Accepted Answer · 2011-01-26T13:55:14.020

13

background defined later should replace the previous ones. So if you have:

Site1.css which has:

.img {
    background: ...
}

Site2.css which has:

.img {
    background: ...
}

then Site2.css .img would replace .img within Site1.css if Site2.css is included after Site1.css on your page.

UPDATE: I'm not sure why the body tag is not being replaced correctly. Could you try to give it a class or id, and use that instead of body?

e.g.

<body id="backgroundTest">

And then in the css files you would do #backgroundTest { background-image... }

And just in case, could you check if homeBg.png exists and index.css. http://yourpage.com/homeBg.png and http://yourpage.com/index.css should both exist.

edited Jan 26 '11 at 13:55

answered Jan 26 '11 at 13:31

Jón Trausti Arason

4,548
1
39
46

1

This is the correct way of doing it, by using the natural CSS 'cascade'. Avoid at all costs using the !important declaration as it makes the cascade unpredictable and future maintenance that much harder. – ajcw Jan 26 '11 at 13:34
That's what I thought. The HTML for my code is: ` ` Am i doing something obviously wrong? – aateeque Jan 26 '11 at 13:38
Is your css code that should replace the background within the index.css file? Can you show me the css definition where the background is specified for both files. (edit your question) – Jón Trausti Arason Jan 26 '11 at 13:41
@aateeque: Have you checked with a DOM inspector (Firebug or the ones built-in to Chrame or IE) if and in which order the rules are applied? – RoToRa Jan 26 '11 at 13:56
@RoToRa how do i do that in CHrome?? Inspect element? – aateeque Jan 26 '11 at 13:58
@RoToRa thanks for the update. Have tried id'ing body but that doesn't work either! – aateeque Jan 26 '11 at 14:00
Check if the file exists in the correct path. index.css and homeBg.png. – Jón Trausti Arason Jan 26 '11 at 14:02
@raRaRa yep...files exist on this path – aateeque Jan 26 '11 at 14:17
@aateeque: In Chrome press "Ctrl-Shift-I". That's the DOM inspector. At the top of it "Elements" should be highlighted with a tree of the HTML code below. Select the ` – RoToRa Jan 26 '11 at 14:23
@RoToRa thanks so much for your help. It has now resolved - strangely by itself! – aateeque Jan 26 '11 at 14:35
Could it be that the site was cached? Might have been enough to do Ctrl-F5 ? ;) – Jón Trausti Arason Jan 26 '11 at 14:41

score 4 · Answer 3 · answered Jan 26 '11 at 13:32

4

For the specific page you can use a css rule in the page, using !important. If you add your-selector {background: url("the-path-for-the-bg-image") no-repeat !important;} in the file, will override the default background.

answered Jan 26 '11 at 13:32

Sotiris

38,986
11
53
85

score 1 · Answer 4 · answered Jan 26 '11 at 13:33

Either set the background in a CSS rule with the same selector as the original rule, and include your new CSS file after the original one, or make sure your new rule has a selector which has a higher specificity: http://www.w3.org/TR/CSS2/cascade.html#specificity

Finally you could give the background property the !important flag, however that is usually a last resort and the sign of a badly organized style sheet.

score 0 · Answer 5 · answered Jan 26 '13 at 21:48

0

in index.css write

 body { background-image:('homeBg.png') !important;

you can override any property defined anywhere by writing "!important" after it in new file

answered Jan 26 '13 at 21:48

Dashrath

2,141
1
28
33

1

`!important` should not be used in CSS. If forced to use this, its a sign that rules are not applied in the correct order. – Hozefa Feb 26 '15 at 18:56
1

@Hozefa, In current question it is asked how to override css property in new file. My answer is applied for given question , and is not a css uses guideline. – Dashrath Mar 22 '15 at 17:58
@Hozefa what if you are dealing with a 3rd party CSS which loads dynamically (you absolutely have no control over the style rules in it) which already has a style defined with a `!important` and you want to overwrite it ?? – Rajshekar Reddy Sep 26 '17 at 10:29
@RajshekarReddy Fair point. If the 3rd party CSS loads `!important` then yeah you are left with no choice. Another use case is that when `style` tag is used by JS to add styles. – Hozefa Sep 26 '17 at 19:20
@Dashrath With respect to question you are right. But however it could give the impression that its okay to use `!important` as a mechanism to override styles and end up with CSS having `!important` all over the place. – Hozefa Sep 26 '17 at 19:22

score 0 · Answer 6 · answered Jan 26 '11 at 13:37

If the page background is set in the body, you can simply overrule it by giving the body in that specific page a class or an id and add (can also be in the same css file...):

body.someClass {
  background: ...
}

or

body#someID {
  background: ...
}

(in both the body part is not really needed as the class and the id overrule the selector)

score 0 · Answer 7 · answered Jul 14 '11 at 03:18

0

I had the same problem.

What I ended up doing was in my stylesheet which was doing the override, I applied it to not only body, html:

So...

#id, html, body { background-color: #FFF }

Hope this might help someone.

answered Jul 14 '11 at 03:18

Jack Marchetti

15,536
14
81
117

How to override background image defined in CSS with another CSS?

7 Answers7

Linked