Grow your CSS skills. Land your dream job.

add background image to h2 with padding? quick fix, i hope :)

  • # October 28, 2012 at 8:16 pm

    [Here's the page:](http://www.sacredjourney.com/testing/ “Testing Page”) http://www.sacredjourney.com/testing/

    I’ve used this code but I can’t get the background image scooted over. Thanks so much in advance!

    .post h2 a, .tsj_guestbookentries h2 a {
    font-family: ‘Conv_Gothic’, Arial, sans-serif;
    background: url(http://www.sacredjourney.com/wp-content/uploads/2012/10/tsj-bullet.png) left center no-repeat;
    color: #415441;
    font-size: 16px;
    text-decoration: none;
    padding: 0 15px 0 30px;
    line-height: 0px;
    }

    # October 28, 2012 at 8:27 pm

    What are you trying to do exactly? “Scooted over” where?

    # October 28, 2012 at 8:31 pm

    Sorry :)

    I’d like it to have a padding-left: 15px like everything else. Right now it’s hanging off the sidebar container and I’d like to left align it with the text above and below.

    Thanks!!

    # October 28, 2012 at 8:49 pm

    Change:

    background: url(http://www.sacredjourney.com/wp-content/uploads/2012/10/tsj-bullet.png) left center no-repeat;

    To:

    background: url(http://www.sacredjourney.com/wp-content/uploads/2012/10/tsj-bullet.png) 15px center no-repeat;

    I think that’s what you are after?

    Basically, we are telling the background image to sit 15px from the left of the container, instead of hard up against it.

    Also, for future reference, it is often easier to give the parent element padding instead of each child element. That would have also avoided this issue.

    # October 28, 2012 at 9:01 pm

    like a charm! mmmmwwwah!

    # October 28, 2012 at 9:11 pm

    Awesome :)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".