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

How To Center Widget and Tabs text

---

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