1 Topic by Joey

  • Joey
  • Senior Member
  • Offline
  • Registered: 2003-09-04
  • Posts: 371

Topic: CSS problem: Hyperlink styling & background images

I have a graphic that I'd like either side of a heading on my site, that would appear something like this:

[GRAPHIC] TITLE GOES HERE [GRAPHIC]

CONTENT

Now I'd like to achieve this in CSS where possible rather than changing the PHP files, is it possible?

I can get the graphic to appear EITHER to the left OR the right of the text, but not at the same time.

Current CSS:

.content h1 a{
       background: transparent url('img/title_left.gif') no-repeat top right;
    padding-right: 10px;
}

To me, the problem is that the CSS is only recognising the graphic as a background, and as such it doesn't know where the title text is, so doesn't know where to place the images.

If there's a simple workaround I'm all ears.

2 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: CSS problem: Hyperlink styling & background images

Each tag can only have one background image. You have to set the left image as background to one tag and the right image as background to another. The problem you have is you really need to use two tags other than the <a> because the tags with backgrounds need to either block level tags or made blocks with display:block. If you make the <a> tag display:block the whole heading will become clickable. As for positioning the text in relation to the images, thats easy, its just a matter of getting the padding correct.

PS. If .content is a div wrapping the h1 you could put the left image as a background to that.