I've been working on streamlining my HTML code and moving as much as possible to my CSS file. However, I'm facing an issue with getting an image to display when writing the CSS code for it.
Here's the HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
<title>
Some title
</title>
</head>
<body>
<div id="pic1"></div>
<div id="pic2"></div>
<div id="top">
<h2 class="inner" id="banner">Some banner</h2>
<ul>
<li><a href="index.html" id="menu">Home</a></li>
<li><a href="event.html" id="menu">Events</a></li>
<li><a href="about.html" id="menu">Info</a></li>
<li><a href="contact.html" id="menu">Contact</a></li><hr>
</ul>
</div>
The CSS:
#pic1
{
position: absolute;
background: #ffffff;
background-image: URL('../images/pic1.png');
}
#pic2
{
position: absolute;
right: 0px;
background: #ffffff;
background-image: URL('../images/pic2.png');
}
#top
{
height:100px;
width:100%;
color: #0565a8;
text-align:center;
/* background: URL(../images/top.png);
background-repeat: repeat-x; */
background-color:#0565a8;
box-shadow: 0px 1px 1px #000000;
}
The pic1.png and pic2.png images are located in: \Websites\thispage\images
And my css is in: \Websites\thispage\images\css
I'm puzzled as to why this setup isn't working. I even tried moving the image to my css folder and changing the URL to ('austria.png'), but that didn't solve the issue.
Interestingly, using the following HTML code worked perfectly:
<div id="pic1">
<a href="index.html">
<img src="images/pic1.png">
</a>
</div>
However, I am determined to have everything controlled by CSS, not HTML.