Skip to main content

z-index Q 55 Responses

Last post: 11 months ago | Thread started: Jun 29, 12, 9:43 a.m.

RespondNew TopicDisable Images

  • pockets

    i have a div with a background image and that div also has text, is there a way to get the background image to be infront of the text ?

    think of a div with a price in it, but the price is discounted so there is a slash over the price..

    thoughts?

    Jun 29, 12, 9:43 a.m. – Permalink
  • pockets

    it would have to be 2 divs?

    <div id="price">
    $99.00
    <div id="price slash">
    <img src="slash.jpg" />
    </div>
    </div>

    ?

    • I would do it this way to have full control over the z-index... Does the price need to be clickable?ideaist1/2
      it has a mouse over effect for details, clicking it has a jquery detail page
      pockets2/2
    next note >+ add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earJun 29, 12, 9:46 a.m. – Permalink
  • BabySnakes

    <div style="position:relative;">
    $99.00
    <img src="slash.jpg" style="position:absolute; top:0; left:0;z-index:10;"/>
    </div>

    but put them in classes...inline style for show only

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earJun 29, 12, 9:51 a.m. – Permalink
  • elahon

    I would do:

    <div id="price">
    <p>$99</p>
    </div>
    <div id="price-tag">
    </div>

    CSS

    #price {
    position: relative; z-index: 1;
    }
    #price-tag{
    position: absolute; z-index: 10; background: url(../images/price-tag.jpg) top left no-repeat;
    }

    + add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earJun 29, 12, 9:52 a.m. – Permalink
  • pockets

    thank you, got it...

    cheers, happy friday

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earJun 29, 12, 10:02 a.m. – Permalink
  • pockets

    http://abbatu.com/price_slash.jpg

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earJun 29, 12, 10:25 a.m. – Permalink

Login or Register to respond to this

Skip to main content