Remove Header Image to show background

Right after I posted this I figured it out. I deleted the last line of this code background-image:url from my stylesheet. However, I would like to remove this using my child theme instead of directly editing the sytlesheet.

#main {
	font-size:.813em;
	background-repeat:repeat-x;
	background-position:0 0;
        background-image:url(images/tail-top.gif);
}

Same thing with the center image that runs across the middle.

However, I would like to remove this using my child theme instead of directly editing the sytlesheet.

It doesn’t look like you are currently using a child theme, but a child theme is an excellent idea. If you don’t want to create a child theme, you can also use a CSS plugin like Lazyest Stylesheet or Custom CSS Manager.

To answer your question, all you need to do to override the property for a CSS rule that’s in the parent theme is to include it in your child theme with whatever alternate value you want. So to remove the image for the background-image property for #main, you would code this in your child style.css file:

#main {
        background-image: none;
}

That’s because the way Cascading Stylesheets (CSS) work, if there are any selectors with identical specificity, the rule that comes last (or later) will override the rule(s) before it, and in the case of child themes, the child CSS will come after the parent CSS. The plugins I listed above will also put their custom CSS after the theme’s stylesheet, so you can override any of the theme’s existing CSS that way as well.

Brilliant, thank you CrouchingBruin!

Regards,
Shaye