Question

I’m trying to take away a white border that is appearing from behind an image on my sidebar. I can’t figure out what is causing the white border. I thought it was the padding, and then I thought it was the border. If you visit our home page (http://noahsdad.com/) and look on the side bar under the “new normal” picture you will see a “Reece’s Rainbow” image. I’m trying to remove that white around the image. I pasted in the code below, but it’s not doing anything. Any thoughts as to what I’m doing wrong?

Thanks.

#text-23 { background: none}

Answer 1

the reason it’s not working is the background: none is never getting to the img which has the background set on it (backgrounds don’t cascade down they exist in the element and you can have multiple elements layered on top of each other much like a painting. Which has the effect of the background cascading)

#text-23 img { background: none; } 

that should resolve your problems. I am assuming that when you call the class textwidget you still want it to append the white background, just not for this instance. So if you set the above it will cascade properly with the correct specificity while leaving the rest of your page alone.

This can also be done by

#text-23 .textwidget img { background: none; }

but that level of specificity is not required. However if you try to just do:

.textwidget img { background: none; }

this will override all of the instances where the background is set on an image in the textwidget container.