SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jan 2014
    Location
    Surrey, British Columbia Canada
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Image Replacement

    I can't figure out why this code will not work. I have broken it down to just the h1 and am trying to replace it with a logo.png. I can put the logo.png directly into the html with an img tag and it works - but when I try to replace the h1 text with the same logo.png it won't work. I tried a couple of other replacement methods and they don't work either. Confused??

    <h1><a href="#">Portfolio</a></h1>

    h1{
    display: block;
    float: left;
    width: 219px;
    height: 58px;
    text-indent:-9999px;
    }

    h1 a{
    display: block;
    width: 219px;
    height: 58px;
    background:url(images/logo.png) no-repeat 0 0;
    outline: none;
    }

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

    Your code is working so you must have an incorrect url for the image. If you add background red you can see that it is working.

    You can shorten the code to this:

    Code:
    h1, h1 a {
    	float: left;
    	width: 219px;
    	height: 58px;
    	text-indent:-9999px;
    	outline: none;
    	background:url(images/logo.png) no-repeat 0 0;
           overflow:hidden;
    }
    If the image is not transparent then use the Gilder Levin method for best accessibility.


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
  •