CODEWITHSUNDEEP
cssimagesprite
tobeeornot
tobeeornot

Reputation: 131

aligning image/sprite to show top and bottom half

I am trying to position an image so the bottom half is the inverse of the top from one image but not sure how to do it.

JsFiddle

The image itself looks like this.

EDIT: The final image should look like this.

Upvotes: 2

Views: 358

Answers (2)

Shailender Arora
Shailender Arora

Reputation: 7778

You just have to define the height and line-height in your section.sep h4 and its working fine now as per your requirement..

CSS

section.sep h4{
  background: url('http://i1200.photobucket.com/albums/bb328/tobeeornot/sec.png') no-repeat transparent;
  color:#fff;
  font-family:arial;
    font-size: 11px;
    font-weight: 400;
    height: 69px;
    letter-spacing: 1px;
    line-height: 50px;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    width: 77px;

see the demo:- http://jsfiddle.net/JvnHn/7/

Upvotes: 1

Ahsan Rathod
Ahsan Rathod

Reputation: 5505

Your CSS section.sep h3.top should be section.sep h4.top because you have used h4 in HTML instead of h3

Your HTML : 

<section class="sep">
    <h4 class="top company-tag">Pics</h4>
    <hr/>
    <h4 class="bottom company-tag">Map</h4>
</section>

Upvotes: 1

Related Questions