How to Override Background Image Defined in CSS with Another CSS

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

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.

How to override CSS Background that already has !important?

You'll need to be more specific (quick guide to CSS specificity), for instance, using the > selector:

body {
  background-image: none !important; 
  background: black !important;
}

html > body {
  background-image: none !important; 
  background: red !important;
}

JSBin

Override CSS Background Image

You are not linking the correct css, you are linking the editing link.

<link rel="stylesheet" href="http://backroadsbrewing.com/wp-admin/theme-editor.php?file=style.css&theme=onesie">

If you open http://backroadsbrewing.com/wp-admin/theme-editor.php?file=style.css&theme=onesie in an inkognito window or after logging out, you get redirected to login page, which is wrong.

You need to link to your generated css file instead of some wp-admin/ url (which will never work).

The correct link would be in your case:

http://backroadsbrewing.com/wp-content/themes/onesie/style.css

Regards, Max

Additionally, you have added an obsolete semicolon:

background-image: url("http://wallpapercave.com/wp/Tb3g7Fv.jpg"); !important;
# instead of
background-image: url("http://wallpapercave.com/wp/Tb3g7Fv.jpg") !important;

And you should:

never link to external pictures (they can always change or being removed)
only link to pictures where you own rights to publish (or it can get really expensive, like a customer of me payed 900€ for a single picture he used for a couple of years.

How to override css for giving background image?

Something like this should work:

<body style="background-image: url(images/noise-bg.png)">

In terms of specificity, the style attribute should be more specific than styles defined in a stylesheet.

Sample Image

You can read more about CSS specificity here: http://css-tricks.com/specifics-on-css-specificity/

Overriding CSS background image styles - both images are loaded?

It seems in some cases the answer is yes:

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

http://www.cloudfour.com/examples/mediaqueries/image-test/#t4

Overriding background:url with background-color in CSS

If you want to override the background property, override it using the background property rather than background-color:

body {  background: url("https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg");  background: green; /* This will override the previous property */}

Override background image

Use inline style, style='background-image: url(...),url(...)'

<section id="four" class="wrapper style3 special" style="background-image: url(...), url(...)">
  <div class="container">
     <header class="major">
        <h2>Aenean elementum ligula</h2>
        <p>Feugiat sed lorem ipsum magna</p>
     </header>
     <ul class="actions">
       <li><a href="#" class="button special big">Get in touch</a></li>
     </ul>
  </div>
</section>

Override background image from parent element using CSS

I finally identified how to solve the problem.

.header > span {
    position: absolute;
    background-color: inherit;
    padding: 0px 10px;
}

Using background-color: inherit will solve the problem.
I also updated the fiddle.

How to Override Background Image Defined in CSS with Another CSS