WordPress.org

Support

Support » Themes and Templates » [Resolved] Applying a background image to an existing image on WordPress theme via CSS

[Resolved] Applying a background image to an existing image on WordPress theme via CSS

  • John
    Member

    @johncpatterson

    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!

Viewing 2 replies - 1 through 2 (of 2 total)
  • WPyogi
    Forum Moderator

    @wpyogi

    One way would be to assign the class “postimage” to all the images — then they would all have that styling.

    John
    Member

    @johncpatterson

    That worked perfectly, you my friend, are a genius 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘[Resolved] Applying a background image to an existing image on WordPress theme via CSS’ is closed to new replies.