Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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!

like image 743
aateeque Avatar asked Jan 26 '11 13:01

aateeque


People also ask

How do I override one CSS with another?

To override the CSS properties of a class using another class, we can use the ! important directive. In CSS, ! important means “this is important”, and the property:value pair that has this directive is always applied even if the other element has higher specificity.

Can you have 2 background images CSS?

CSS allows you to add multiple background images for an element, through the background-image property. The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.


1 Answers

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; 
like image 96
unknownrisk Avatar answered Sep 25 '22 08:09

unknownrisk