Solved

linking image is css to a URL

Posted on 2014-01-29
10
245 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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

759 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

19 Experts available now in Live!

Get 1:1 Help Now