Question

I am creating tabbed sections with tab heading as H2 as below:

<div class="mainTab">
   <div class="myTab">
      <h2>Tab1</h2>
             Tab1 content here
   </div>
    <div class="mtTab">
       <h2>Tab2</h2>
             Tab2 content here
    </div>
<div>

I want to place a image before the tab heading. Like email image before Email tab heading.

This could be achieved by something like:

.h2one {
   font-size: 36px;
   font-weight: bold;
   background: url    ('http://images.findicons.com/files/icons/1676/primo/128/email_open.png') center left no-repeat;
padding-left: 120px;
 }

.h2two {
font-size: 36px;
font-weight: bold;
background: url('http://images.findicons.com/files/icons/1676/primo/128/email_close.png') center left no-repeat;
padding-left: 120px;
}

What if the images are in webcontent folder of my server. In that case how would the url look like. Will <=%request.getContextPath> work here ????

Answer 1

@nikunj; you can use background-image in your h2 tag like this

h2{
 backgrond:url(image.jpg) no-repeat 0 3px;
 padding-left:10px;
}

in above example i define image background position left:0 & top:3px but you can adjust your image according to your requirements & i also give padding-left so, text shift 10px and you can see the image.

you can also use text-indent instead of padding.

if you want separate image for different tabs then give different class for your background images like this:
http://jsfiddle.net/sandeep/NqXhB/4/