asked on

linking image is css to a URL

Hi guys,

I have the following property in my css

background-image: url(http://tryansolicitors.com/header.png);

how do i href it to http://www.ias.ie/?page_id=631

so when you click on the image it brings you to the page?

thank you

Scott Fell

You can't have a link on a background image. With html5 this is now good.

<a href="http://www.ias.ie/?page_id=631"><div class="mybackgroundimage"></div></a>

jonathanduane2010

ASKER

do i put that in the css or the header.php??

and the div class should that be, background-image

its for here

www.ias.ie

Scott Fell

This is your proof of concept with a working link http://jsbin.com/padasQ_28351166/1/

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <style>
    #headerText{background-image: url('http://tryansolicitors.com/header.png');height:175px;width:1073px;}
  </style>
</head>
<body>
  <a href="http://ias.ie"><div id="headerText"></div></a>
</body>
</html>

Open in new window

jonathanduane2010

ASKER

thank you, but i still dont know where to put it in our site :(

Scott Fell

You could edit the style sheet http://www.ias.ie/wp-content/themes/Primero/style.css but I think you are better off creating a child theme and updating the css on the child theme. That way if you update your theme, your customization does not get over written.

http://codex.wordpress.org/Child_Themes
http://codex.wordpress.org/CSS

For the header, you are going to look for the id headerText and edit that.

jonathanduane2010

ASKER

ok i have this added at the end of the css

<a href="http://www.ias.ie/?page_id=631"><div class="headerText"></div></a>

but no luck i also tried editing

#headerText {style="
padding-top: 173px;
margin-left: -76px;
text-shadow: none;
"}

but no luck?

Scott Fell

I am sorry. First of all, I thought the page to link was the header http://www.ias.ie/?page_id=631 and I gave your wrong info. Also, the css was just for my demo. Let me take another look at the site.

Scott Fell

I take that back, I am just confused. The base domain is http://tryansolicitors.com and that is a different site.

Please post a direct link to the page you are trying to work with. If the page is not public yet, either create a test folder on your live server and publish it there or if word press you can create a page and make public but not link it in the navigation or your can edit the jsbin I created to match what you are doing.

jonathanduane2010

ASKER

sorry.....the image is hosted here http://tryansolicitors.com/header.png but its here at www.ias.ie as the header

i want it so that people can click on this image and it brings them to a page http://www.ias.ie/?page_id=631

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial