Solved

linking image is css to a URL

Posted on 2014-01-29
10
248 Views
Last Modified: 2014-02-04
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
0
Comment
Question by:jonathanduane2010
  • 6
  • 4
10 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39818049
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>
0
 

Author Comment

by:jonathanduane2010
ID: 39818086
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
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39818130
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

0
 

Author Comment

by:jonathanduane2010
ID: 39818191
thank you, but i still dont know where to put it in our site :(
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39818258
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.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:jonathanduane2010
ID: 39818359
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?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39818386
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.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39818402
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.
0
 

Author Comment

by:jonathanduane2010
ID: 39818427
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
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 430 total points
ID: 39818440
change

<!-- close #header-top-right -->
	<div id="headerText" style="
    padding-top: 173px;
    margin-left: -76px;
    text-shadow: none;
">Patron of IAS: Michael D. Higgins Uachtaráin na hÉhireann</div>			
								
				<div class="clearfix"></div>
			</div><!-- close #header-top -->

Open in new window

to
<!-- close #header-top-right -->
	<a href="http://www.ias.ie/?page_id=631"><div id="headerText" style="
    padding-top: 173px;
    margin-left: -76px;
    text-shadow: none;
">Patron of IAS: Michael D. Higgins Uachtaráin na hÉhireann</div></a>			
								
				<div class="clearfix"></div>
			</div><!-- close #header-top -->

Open in new window

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now