WordPress.org

Ready to get started?Download WordPress

Forums

Scrappy
Adding image to header (5 posts)

  1. mariamic
    Member
    Posted 1 year ago #

    I love the Scrappy theme! Thank you so much for creating it. I would like to add an image on either side of the header/title of my blog:

    http://thebargaincafe.com/

    Can you please tell me how to do that? Thank you!

  2. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    Thanks!

    Yes, you can use CSS in a child theme or a CSS plugin (like Jetpack) to do this. I recommend using a browser add-onFirebug for CSS work--makes it much easier.

    I haven't tested this, you'll probably need to play around with it a little to get it to work:

    .site-title:before,
    .site-title:after {
      background:url('/path/to/your/image.png') no-repeat;
      content: "";
      display: inline;
      width: 100px; /* Change to the width/height of your images */
      height: 100px;
    }
  3. mariamic
    Member
    Posted 1 year ago #

    Thank you for your response. But I can't get that to work at all, even playing around with it for over an hour. ugh. any other suggestions would be appreciated.

  4. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    while copying the suggested css, you made several mistakes;

    also, use display: inline-block;

    try:

    .site-title:before,
    .site-title:after {
      background-image:url('http://thebargaincafe.com/wp-content/uploads/2012/12/tinycoffee.jpg'); background-repeat:no-repeat;
      content: "";
      display: inline-block;
      width: 50px;
      height: 50px;
    }
  5. mariamic
    Member
    Posted 1 year ago #

    I cannot thank you enough alchymyth!!! It works :)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic