- This topic is empty.
-
AuthorPosts
-
April 27, 2010 at 4:10 pm #28865annbemroseParticipant
Hello. I’m obviously not very competent with CSS–I’ve been struggling with this for hours! I want to put an image in the header of a website, but it doesn’t show. I put borders around it so that I could see if my code and style was being read. It seems that they are. The image is in the same directory as the HTML and CSS files.
The HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<title>Example 1</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="Example 1" />
<meta name="keywords" content="" />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="styles2.css" media="screen" /></head>
<body><div id="header">
<h1>Title</h1>
</div>
</body>
</html>The CSS:
<style media="screen" type="text/css">
body {
margin:0;
padding:0;
border:0;
width:100%;
background:#fff;
min-width:600px;
font-size:90%;
}a:link {
color:#369;
}
a:hover {
color:#fff;
background:#369;
text-decoration:none;
}h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}h1 {
width: 600px; height: 289px;
border-right: 1px solid #89a804;
border-left: 1px solid #89a804;
border-top: 1px solid #89a804;
border-bottom: 1px solid #89a804;
background-color: #FFFFFF;
background-image: url(logo1.png) no-repeat;
}</style>
This shouldn’t be difficult! But it’s not working for me. Should I just give up?
Ann
April 27, 2010 at 4:45 pm #74823virtualParticipantChange the following:
h1 {
width: 600px; height: 289px;
border-right: 1px solid #89a804;
border-left: 1px solid #89a804;
border-top: 1px solid #89a804;
border-bottom: 1px solid #89a804;
background-color: #FFFFFF;
background-image: url(logo1.png) no-repeat;
}to this:
width: 600px;
height: 289px;
border-right: 1px solid #89a804;
border-left: 1px solid #89a804;
border-top: 1px solid #89a804;
border-bottom: 1px solid #89a804;
background: #FFFFFF url(logo1.png) no-repeat;You will need to specify the position of the background image after the no-repeat as for the moment it shows under the "Title"
April 27, 2010 at 5:01 pm #74828annbemroseParticipantWonderful! Thank you! I never would have known that it was a problem to put the background things as separate.
Thank you again!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.