{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 乱世女痞 的问题《How to override background image defined in CSS wi》','https://www.manongdao.com/q-1346588.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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!
For the specific page you can use a css rule in the page, using
!important. If you addyour-selector {background: url("the-path-for-the-bg-image") no-repeat !important;}in the file, will override the default background.in index.css write
you can override any property defined anywhere by writing "!important" after it in new file
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:
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
!importantflag, however that is usually a last resort and the sign of a badly organized style sheet.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...
Hope this might help someone.
background defined later should replace the previous ones. So if you have:
Site1.css which has:
Site2.css which has:
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.
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.