Sunday, October 6, 2013

[Blog Design] How To Add Backround Image Under Tabs?



What is tabs background image?

You can see that on my blog design, it's the picture under my tab text. The whole pink background is actually a image I have putted under the tab text!







Click The Following Buttons:

1. Template

2. Customize

3. Advanced

4. Add Css

If it's your first time to edit Css
I have another tutorial that are more detailed with pictures: 




Copy this code and past it to your Css box:

        .tabs-inner .section:first-child ul {border:0}
.tabs-inner {
background-image:url(     IMAGE URL    );
background-repeat:no-repeat;
position:relative;
left:30px;
height:80px;
padding-right:px;
}


I did not include my image for you, because I don't want everyone to have the exact design as mine and I don't think you would want that either. So you need to find your own and put the image url instead of the           yellow text.





How To Move It?

It's more likely to don't match your blog so well with the code I am showing you now, so you will need to edit the codes a little on the CSS box while watching your page under it.

left:30px;
height:80px;

Change the number of these code to move the background image around. 





How did I find my image?

The ribbon image is from some Photoshop brushes that are original black and white, but I changed the colors and found a size that suits my blog. So if you use Photoshop too, then maybe you could look around for some great brushes too.


I hope this helped you and you are always welcome to ask me if you have any questions. 

Let me know if you use it! I want to see how you created your own tabs background!



Follow Me  : Facebook / Twitter / Bloglovin / GFC

22 comments:

  1. great. i have been following your blog design post. it make since and its easy to follow the steps. :) im looking forward on your next post.

    ReplyDelete
    Replies
    1. Thanks for the comment,

      I am happy that it's useful for you and I will continue to make more design posts!

      Delete
  2. Great post! This makes the process seem very simple. :)

    ReplyDelete
  3. this is a great tutorial, I mess around with my blogger template a lot and didnt know this. Usually I'd do something like this as an image map, but this way is so much better because you can change the pages without having to completely re-map a whole new image x
    Mac Lipstick Giveaway

    ReplyDelete
    Replies
    1. I agree with you, I just created a tutorial about image map earlier. But I recommended to use them differently.

      Delete
  4. Thanks for the tutorial, Yomi! c: I'm sure it's super useful for a lot of bloggers!

    ReplyDelete
  5. Hi there,
    How about the tab design, where the headings of "HOME, REVIEW, DIY ETC.." how to design that? I want to know please.
    Thank you so much!

    ReplyDelete
    Replies
    1. If you mean the font, color etc

      1. Template
      2. Customize
      3. Advanced
      4. Edit Tabs background and Tab text

      Delete
    2. First of all thank you for the reply :) I appreciated it. The one I mean is the organization of the tab headings like putiing the HOME, REVIEW tabs.

      I'll wait for your reply thank you

      Delete
    3. On the page you edit for you blog

      How To Create Page

      Click:
      1.Pages
      2.New Pages (just put the url you want or create a whole new page)
      3. There is a small alternative tab "Show Page as" choose top tabs

      You can add new pages in there that you want to show as tabs

      How To Show It?

      1. Layout
      2. Add gadget, you can find a widget called Pages in there.
      In that widget, you can organize the tabs


      I hope this answered your question =)


      Delete
    4. Thank you so much Yomi! I am excited to try it :)
      Have a good day!

      Delete
  6. Very helpful and detailed post
    Happy sunday.. :)
    Keep in touch,
    www.beingbeautifulandpretty.com

    ReplyDelete
  7. Thank you so much for sharing these helpful tutorials ^-^
    Have a nice Sunday ☆

    Chibilaria ღ Cute Random Lifestyle and Beauty Blog

    ReplyDelete
  8. Great idea, I will try this some day when I manage to get a beautiful bar =D

    <3 Celly
    TheSnowFlowerrr - Beauty and Makeup Blog

    ReplyDelete
  9. This is another great blog design post! I am slowly going to tweak my blog following your tips and it will soon look so cool and professional! Thank you! *0*

    ReplyDelete
  10. You're so talented! No matter how much people explain this to me, it's a whole new language. :/

    ReplyDelete
    Replies
    1. So you don't understand this post?

      Delete
  11. Great blog tutorial yet again! Really loving this series as it is incredibly helpful! Thank you so much Yomi!


    xx Mandy

    ReplyDelete

  12. I just bumped into your blog and after scrolling through your posts, I must say I really like it :) How about we follow each other on Bloglovin and Facebook? :)
    Kisses from Zurich,
    K.

    http://beneaththecoat.blogspot.com

    ReplyDelete
  13. I love posts like this, especially because I'm new to blogger

    thanks for the tip yomi :)

    ReplyDelete
  14. where can I get the image url ? tyq :)

    ReplyDelete

I always read all comments, I will reply all comments that have questions!

Tweet me if you want a quick reply
@yomistyle

Related Posts Plugin for WordPress, Blogger...

ShareThis