Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Applying a background image to an existing image on website via CSS

    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):

    Code:
    /* 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/w...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
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Any help on this would be much appreciated!

  • #3
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    I didn't see the shadow you were talking about, can you get some screen shots of what you mean?

  • #4
    New Coder
    Join Date
    Nov 2010
    Location
    Virginia,USA
    Posts
    36
    Thanks
    1
    Thanked 7 Times in 7 Posts
    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

    Code:
        -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.
    Last edited by badwolf; 06-01-2012 at 03:02 PM. Reason: I apparently cannot spell today

  • #5
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •