Need Help Adding Background Image To WP Theme

Discussion in 'CSS' started by lokielookies, Jun 18, 2008.

  1. #1
    I'm building my first WP theme, but I can't seem to find out how to add a background image to my sidebar. :rolleyes:
    (Actually, I only want the top and bottom to have rounded corners)

    Can someone please point me to some info (or - even better - explain)?

    ;)
     
    lokielookies, Jun 18, 2008 IP
  2. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well in WordPress, there should be a themes folder that contains some pages and the style sheet for your site. If you don't know it, it should be something like wp-content/themes/your-theme. If your just modifying one of the themes that comes with WP, then there should be a sidebar file, something like sidebar.php.

    In that same folder, there should be style.css. So all you need to do is find the div that contains the sidebar, most likely id="sidebar". So just basically edit #sidebar in the style.css to include your background.

    I usually upload the background image in the same folder but in a sub-folder called "images." That way, you can just relatively reference the image file in the CSS. If you want to be sure that the CSS will find it just use the absolute reference, i.e. yoursite/wp-content/themes/images/background.jpg. There's supposed to be an http:// before that by the way, I just can't post links yet.

    Hope this answers your question.
     
    rikun, Jun 18, 2008 IP
  3. lokielookies

    lokielookies Well-Known Member

    Messages:
    1,246
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    150
    #3
    Thanks for the reply.
    But how do I create my image? In one piece...?
     
    lokielookies, Jun 18, 2008 IP
  4. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    If you want rounded corners, you should create one image with rounded corners only if you are sure that size is going to remain constant.

    You could either create two images, one for the top corners and another for the bottom.

    Another way is to just create four separate images, one for each corner.

    The first way may be easier, especially if you aren't sure how to position them.

    You could check out one of my tutorials at csswoes.com/2008/04/17/rounded-corners/. Again, there's supposed to be http:// before that.
     
    rikun, Jun 18, 2008 IP
  5. lokielookies

    lokielookies Well-Known Member

    Messages:
    1,246
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    150
    #5
    Thanks for the tutorial!

    I managed to add the sidebar image :D
     
    lokielookies, Jun 19, 2008 IP
  6. lokielookies

    lokielookies Well-Known Member

    Messages:
    1,246
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    150
    #6
    At least, I thought I did...

    In Firefox, the sidebar background image looks great, but in IE it isn't showing...
    :confused:
     
    lokielookies, Jun 19, 2008 IP
  7. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Could you post a link to your site or just post the code?
     
    rikun, Jun 19, 2008 IP
  8. lokielookies

    lokielookies Well-Known Member

    Messages:
    1,246
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    150
    #8
    Sorry! I forgot to post that my problem is solved
    It appears I just had to add a 'space' to the code somewhere to fix the problem.

    :rolleyes:
     
    lokielookies, Jun 20, 2008 IP