Solved

linking image is css to a URL

Posted on 2014-01-29
10
256 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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 

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
 

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

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

856 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