1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Development CSS Background Image as a link?

Discussion in 'Software' started by Lazlow, 15 Feb 2007.

  1. Lazlow

    Lazlow I have a dremel.

    Joined:
    8 Aug 2003
    Posts:
    1,464
    Likes Received:
    0
    Pretty simple really, is it possible to have a CSS background image as a link?

    I've got a logo as the background image of a header and need it to have a link back to the homepage. The CSS for #header is:
    Code:
    #header {
    	padding: 0;
    	height: 150px;
    	background-image: url(images/logo.gif);
    	background-repeat: no-repeat;
    	background-position: left;
    }
    
    With the HTML being:
    Code:
    <div id="header">
    		<ul id="menu_header">
    			<li id="button_photos"><a href="photos.php">Photos</a></li>
    			<li id="button_contact"><a href="contact.php">Contact Us</a></li>
    			<li id="button_links"><a href="links.php">Links</a></li>
    		</ul>
    </div>
    
    Simply adding in an image to the header HTML itself completely messes everything up, so I need the background image to be a link.
     
  2. FuzzyOne

    FuzzyOne

    Joined:
    19 Sep 2002
    Posts:
    1,839
    Likes Received:
    37
    You could have an onlciick event for the header div



    Code:
    <script type="text/javascript">
    <!--
    function headerimg(){
        window.location = "somelocation.com"
    }
    //-->
    </script>
    
    <div id="header" onClick="javascript:headerimg();">
    		<ul id="menu_header">
    			<li id="button_photos"><a href="photos.php">Photos</a></li>
    			<li id="button_contact"><a href="contact.php">Contact Us</a></li>
    			<li id="button_links"><a href="links.php">Links</a></li>
    		</ul>
    </div>
     
  3. will.

    will. A motorbike of jealousy!

    Joined:
    2 Mar 2005
    Posts:
    4,461
    Likes Received:
    20
    whats the layout like because what you want is not possible, but I'm sure that if there is space to put a link in there somewhere i'm sure you can add an <h1><a href>Logo/name</a></h1> in there and float it to the right position and then hide the text using text-indent:-5000px; and give it a background image.
     
  4. Lazlow

    Lazlow I have a dremel.

    Joined:
    8 Aug 2003
    Posts:
    1,464
    Likes Received:
    0
    The site in question is here. It's using a CSS layout, along with CSS Rollovers. Inserting an image where the current logo is causes the rollovers to have a fit. They work well, but Javascript ones were sooo much easier to get to play ball.

    I'll try both methods, though I want to steer clear of Javascript.
     
  5. will.

    will. A motorbike of jealousy!

    Joined:
    2 Mar 2005
    Posts:
    4,461
    Likes Received:
    20
    oh, thats nice and easy using css, no javascript!

    basically, create and h1 with name of the site typed into it and make it a link to index.php

    that should look like this:
    Code:
    <h1><a href="index.php">girlguidingtamworth</a></h1>
    
    then put that above the code you already have like this:

    Code:
    <div id="header">
    		[b]<h1><a href="index.php">girlguidingtamworth</a></h1>[/b]
    		<ul id="menu_header">
    			<li id="button_photos"><a href="photos.php">Photos</a></li>
    			<li id="button_contact"><a href="contact.php">Contact Us</a></li>
    			<li id="button_links"><a href="links.php">Links</a></li>
    		</ul>
    </div>
    
    Now, in your css, i'm guessing that you have either padding or margin left on that <ul>

    you need take away the width of the logo from that padding, so if you have 100px padding and the logo is only 90px you are left with 10px padding-left on the <ul>

    then use this css on the <h1>

    Code:
    h1{
    float:left;
    width:90px;
    height:100px;
    }
    h1 a{
    display:block;
    width:90px;
    height:100px;
    background:url(logo.jpg);
    text-indent:-5000px; //this hides the text but makes sure its still viewable to screen readers
    }
    
    The you need to make sure your <ul> with the navigation is also floated left and it should sit nicely next to the logo which is now clickable.
     
  6. Lazlow

    Lazlow I have a dremel.

    Joined:
    8 Aug 2003
    Posts:
    1,464
    Likes Received:
    0
    Ah I get you. Makes sense now - I'll try it out and post back if there are any problems - thanks will.!
     
  7. will.

    will. A motorbike of jealousy!

    Joined:
    2 Mar 2005
    Posts:
    4,461
    Likes Received:
    20
  8. [Jonny]

    [Jonny] What's a Dremel?

    Joined:
    1 Sep 2003
    Posts:
    296
    Likes Received:
    0
    Make sure you add "overflow: hidden;" to the "h1 a" rule to make Firefox cut off the outline when you click on it. :baby:
     
  9. will.

    will. A motorbike of jealousy!

    Joined:
    2 Mar 2005
    Posts:
    4,461
    Likes Received:
    20
    Is that the dotted line that appears? If so, nice tip!
     
  10. [Jonny]

    [Jonny] What's a Dremel?

    Joined:
    1 Sep 2003
    Posts:
    296
    Likes Received:
    0
    Yeah, you can also style (and therefore remove) them as well, the syntax is the same as normal borders.

    Code:
    a:active {
    	outline: 1px dotted #FF0000;
    }
    
    That would make it have a red outline instead. You can read more on it here.

    I don't think you have to ask if they are supported in IE though. (they're not :p)
     

Share This Page