Simple layout, background image - best way

HTML & CSS
1

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.


<!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

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.


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

I think i was confusing myself on how the background image can be used.

i think I understand now