How to link inside a css file?

I want to link inside a css file? how? Here I have the 2 codes below:

As seen there is a header.jpg I want to link from that jpg file to our company product page. How?
:::::::: CSS file inside:
 
#navigation
{
	clear: both;
	float: left;
	width: 100%;
	background-image: url(images/header.jpg);
	height: 168px;
}
 
:::::::: PHP file inside:
 
<div id="wrapper2">
 
	<div id="header">
	       
         	<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
			<div class="slogan"><?php bloginfo('description'); ?></div>
			
	</div>
	
 
	<div id="navigation">
 
		
			 <ul>
              		<li class="page_item"><a href="<?php bloginfo('url'); ?>">Home</a></li>
 
	<?php wp_list_pages('depth=1&title_li='); ?>
	
                </ul>
	
	
	</div>

Open in new window

cemlouisAsked:
Who is Participating?
 
numberkruncherConnect With a Mentor Commented:
Simply replace the Google URL with what you want from the source example #1 below.

However, instead of using "background-image", I would recommend using a proper image element, source #2:
SOURCE #1
=========
<div id="navigation" onclick="window.location.href='http://www.google.com'">
 
 
SOURCE #2
=========
<div id="navigation">
   <a href='http://www.google.com'><img src="yourpicture.png" border="0"></a>

Open in new window

0
 
numberkruncherCommented:
What do you mean by linked? Do you mean how to include the CSS into your HTML? or how to place a hyperlink inside a CSS file?

As far as I am aware it is not possible to make something into a hyperlink using the current version of CSS. This has to be specified within the HTML (or XHTML) file.

To include an external CSS file into your HTML simply place a "link" tag into your page's "head" section:
<html>
   <head>
      <title>My Page</title>
      <link rel="stylesheet" type="text/css" href="mysheet.css">
   </head>
   <body>
      ...
   </body>
</html

Open in new window

0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
qwerty021600Commented:
You cannot link an image using CSS. you need to specifically mention that in HTML or PHP.
You can give styling to the linked image like border through CSS. But linking has to be done in the page itself but not in the CSS.
0
 
cemlouisAuthor Commented:
qwerty, can you give a sample with my given code above?
0
 
numberkruncherCommented:
Links can be styled using the following CSS:
<style type="text/css">
 
/* Make all links green */
a { color: green; }
 
/* Red when mouse is over */
a:hover { color: red; }
 
/* Red also when active */
a:active { color: red; }
 
/* Purple when visited */
a:visited { color: purple; }
 
 
/* Links with class="SpecialClass" are ornage:
a.SpecialClass { color: orange; }
 
</style>

Open in new window

0
 
qwerty021600Commented:
#navigation ul li.page_item a
{
        clear: both;
        float: left;
        width: 100%;
        background-image: url(images/header.jpg);
        height: 168px;
        color: black;
        font-size: 10px;
}

<div id="navigation">
       <ul>
                        <li class="page_item"><a href="<?php bloginfo('url'); ?>">Home</a></li>
 
        <?php wp_list_pages('depth=1&title_li='); ?>
       
                </ul>
       
       
        </div>
0
 
cemlouisAuthor Commented:
I want below theme's header image clickable...

http://test.wpthemesfree.com/?preview_theme=blue-business-10
0
 
cemlouisAuthor Commented:
Great!!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.