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!
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.
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.
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With