SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    382
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple layout, background image - best way

    Hi all

    I have a really simple layout but I think I'm making it too complicated.

    www.ttmt.org.uk/ttmt

    It's just an image with small block below that is a link.

    The link contains text and an image.

    I think my problem is adding the image.

    The image will be part of a sprite so I want to add it as a background image.

    In my example I have added a span with height and width and then set the background image on it, then position that span.

    Is it possible to add the arrow background image to the gray block and position it on the right or do I need something like the span to add the background image to and then position that.


    Code:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        
        <style type="text/css">
        
          *{
            margin:0;
            padding:0;
          }
          
          div{
            border: 2px solid #000;
            margin: 20px;
            width:320px;
          }
        
          a{
            background:#ddd;
            display:block;
            padding:10px;
            position:relative;
          }
          
          span{
            display:block;
            width:60px;
            height:30px;
            position: absolute;
            right:5px;
            bottom:4px;
            background:url('arrow.png') 0 0 no-repeat;
          }
        </style>
      
        
        <title>Title of the document</title>
      </head>
      
    <body>
      
      <div>
        <img src="beach.jpg" alt="">
        <a href="#">Link Text<span></span></a>
      </div>  
      
    </body>
    
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Which image do you want as a sprite? The beach image or do you mean the arrow image (which you already have in place).

    You seem to have it working so I'm not sure what the question is ?
    Is it possible to add the arrow background image to the gray block and position it on the right or do I need something like the span to add the background image to and then position that.
    You could apply the arrow image to the anchor and set it at the right position but not if it is part of a sprite because the other parts of the sprite would show. You could get over this using background-size for modern browsers (ie9+) and specify the size of the background and thus isolate the sprite.

    Or for IE8 plus you could use :after to add the arrow image. e.g.

    Code:
    a.test{position:relative}
    a.test:after{
    content:" ";
    position:absolute;
    right:0;
    top:50%;
    width:61px;
    height:30px;
    background:url(arrow.png) no-repeat 0 0;
    }
    :after should only be used for non important content so if the arrow is important (and not decoration only) then it should be in the html in the span as you have done.

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    382
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think i was confusing myself on how the background image can be used.

    i think I understand now


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •