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开发者_StackOverflow社区="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!
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;
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.
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.
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.
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)
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.
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
加载中,请稍侯......
精彩评论