[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

linking image is css to a URL

Posted on 2014-01-29
10
Medium Priority
?
266 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
10 Comments
 
LVL 54

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 54

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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

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

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
 

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 54

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 54

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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1720 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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.

656 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