?
Solved

linking image is css to a URL

Posted on 2014-01-29
10
Medium Priority
?
264 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 53

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 53

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
WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

 

Author Comment

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

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 53

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 53

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 53

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

801 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