WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Applying a background image to an existing image on WordPress theme via CSS (3 posts)

  1. John
    Member
    Posted 2 years ago #

    Hello all,

    I have a WordPress website theme 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: http://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!

  2. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    One way would be to assign the class "postimage" to all the images -- then they would all have that styling.

  3. John
    Member
    Posted 2 years ago #

    That worked perfectly, you my friend, are a genius :-)

Topic Closed

This topic has been closed to new replies.

About this Topic