some things in child theme css not overriding parent

Question

I am writing a child theme with Blogolife as its parent. (I'm doing it on a local server, so can't show you the actual page). I have made several changes to the CSS in the child theme's "style.css" file. Up until this point, all those changes showed up fine. However, I am now trying to get rid of a quotation mark image that the parent theme uses after a blockquote. Here is how the CSS appears in the PARENT style.css:

.quote blockquote {
        background: #f8f8f8 url(images/q.png) bottom right no-repeat;
        font-size: 19px;
        font-style: italic;
        line-height: 35px;
        padding: 10px 20px 20px 10px;
}

  blockquote {
        background: #f8f8f8 url(images/q.png) bottom right no-repeat;
        font-size: 19px;
        font-style: italic;
        line-height: 35px;
        padding: 10px 20px 20px 10px; 
}

I copied these portions into the CHILD style.css, and deleted the two "background" lines, which are the only places the q.png image is called (I checked).

Why does the image still show up on my page? (I'm doing the development on a local server, and yes, I saved the child's style.css file ;) ) I also refreshed the cache. When I examine the blockquote element with Chrome Developer tools, the background image still appears in the CSS. I even tried adding a new background color to the blockquote element in my child's CSS using 'background-color:', and THAT shows up, but the stupid image is still there!

Why is everything else in my child's style.css overriding the parent, but the deletion of the call to the image is not? Seems kind of arbitrary.

Thanks.

Answer 1

You have to set a new background or the one defined in the parent stylesheet will be applied.

background-image: none;

Image and color are not mutually exclusive, so both just deleting the background-image line or/and defining a background-color won't change a background image defined somewhere else.