View Full Version : Applying a background image to an existing image on website via CSS

05-30-2012, 09:01 PM
Hello all,

I have a Wordpress website that is set up to apply a slight "shadow" to the bottom of my images on the website, in order to make them look nicer for viewers. However, the website is set up in a way that only the pictures on the "blog" template pages have the shadow, but the pictures on the "default" template pages do not, and I want to get them to apply to the "default" template pages as well since those are mostly what I am using. The CSS code for the image shadow is as follows (the image shadow is referred to as "image_shadow_verylarge.png" below):

/* Blog */
#content #blog { width: 600px; float:left; }
#content #blog .post { width: 600px;}
#content .post { float: left; margin-bottom: 30px; border-bottom: 1px dashed #e1e1e1;}
#content .post .posttitle h3 a{ font-size: 1.5em; line-height:1em; margin-bottom:5px;}
.post .postimage { display:block; width: 600px; height: 230px; padding-bottom: 24px; float: left; background:url(../images/image_shadow_verylarge.png) bottom center no-repeat;}
.post .postmeta { border-bottom: 1px dashed #e1e1e1; padding: 3px 0px; margin-bottom: 20px; float: left; width: 100%; font-size: 0.85em;}
.post .postmeta span { float: right;}

You can also see an example of the image shadow here: http://www.turkhitbox.com/themes/?theme=verse/ (then click "blog" at the top)

And here is an example of an image that does not have the shadow, but I wish it did, at my website: www.lifebyjohn.com/coaching/what-is-life-coaching/

Would anyone be able to tell me how to apply the above code, most notably the sentence where it says ".post .postimage", to my normal code and not just the blog pages, so that I get the image shadow on all of my images?

Thank you so much!

06-01-2012, 07:06 AM
Any help on this would be much appreciated!

06-01-2012, 08:01 AM
I didn't see the shadow you were talking about, can you get some screen shots of what you mean?

06-01-2012, 02:59 PM
You no longer need all that code for a shadow. Use CSS3. This code will work in the newest versions of IE and FF and should work in other modern browsers too. Place this code with your image rule

-moz-box-shadow:10px 10px 5px #000000;
-webkit-box-shadow:10px 10px 5px #000000;
box-shadow:10px 10px 5px #000000;

adjust the shadow pixels and color to your needs as this leaves a pretty intense shadow.

06-03-2012, 12:09 AM
Thanks for all your help everyone. Someone on the Wordpress forums suggested that I change the image class of each image to "postimage", which worked perfectly. Thanks again though for sure!