CSS Background Image as a Link?

This is a discussion on "CSS Background Image as a Link?" within the Web Page Design section. This forum, and the thread "CSS Background Image as a Link? are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old Jan 18th, 2008, 08:39
Junior Member
Join Date: Jan 2008
Location: Connecticut
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Cool CSS Background Image as a Link?

I'm just getting into W3C validation; so as you can imaging, I'm really digging the stronger reliance on CSS markup. But does anyone know if it's possible to have a background image as a link?

I don't mean setting the background link and then having a transparent .gif over it to activate the hit. I'm talking the actual background image is the link.

You're thoughts...
Reply With Quote

  #2 (permalink)  
Old Jan 18th, 2008, 10:10
spinal007's Avatar
Moderator
Join Date: Mar 2004
Location: Good Ol'London
Age: 23
Posts: 1,649
Blog Entries: 1
Thanks: 0
Thanked 4 Times in 4 Posts
Re: CSS Background Image as a Link?

"background image" is just a property of an element.
You can turn any element into a link, therefore you can have a link with any background you like.
It all depends on the effect/design you're trying to achieve - it's just a matter of combining html with css...
Last Blog Entry: Random String in Javascript (Apr 21st, 2008)
Reply With Quote
  #3 (permalink)  
Old Jan 18th, 2008, 10:18
Rakuli's Avatar
SuperMember

SuperMember
Join Date: Sep 2007
Location: Australia
Age: 24
Posts: 956
Blog Entries: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Re: CSS Background Image as a Link?

You can just give a link a block display and a width and height..

eg

Code: Select all
a.background
{
    display: block;
    width: 100px; /*width of image */
    height: 100px; /* height of image */
    background-image: url(this.jpg);
}
Using a link with a class="background" will place a 100 X 100 px link on the page with the background image as this.jpg..

Wouldn't it be better to just wrap and image tag with <a></a> though?
Last Blog Entry: The wannabe juggler's quest (Oct 27th, 2007)
Reply With Quote
  #4 (permalink)  
Old Jan 18th, 2008, 10:43
Aso's Avatar
Aso Aso is offline
Chief Moderator

SuperMember
Join Date: Oct 2007
Location: UK
Posts: 1,039
Blog Entries: 2
Thanks: 5
Thanked 26 Times in 23 Posts
Re: CSS Background Image as a Link?

I'd agree with Rakuli. Plus if someone has images turned off, they'll still be able to see the alt text of your <img>.
Last Blog Entry: The Google Misconception (Feb 3rd, 2008)
Reply With Quote
  #5 (permalink)  
Old Jan 18th, 2008, 11:28
Junior Member
Join Date: Jan 2008
Location: Connecticut
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Cool Re: CSS Background Image as a Link?

Ooh, I like that a lot... Thank so much. I'm goint to try it out now...

You guys rock.
Thx.
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Fix background image in IE6 tenderfoot Web Page Design 1 Jan 30th, 2008 11:02
background image not big enough mykl Web Page Design 7 Oct 11th, 2007 19:08
Can you Link areas of a background image Lchad Web Page Design 17 Nov 23rd, 2006 02:06
Background image overlaping footer image at bottom of div lw_d Web Page Design 4 Mar 21st, 2006 00:27
Background Image jwalker80 Web Page Design 2 Dec 22nd, 2005 14:52


All times are GMT. The time now is 16:19.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43