My goal is to create a div that features a header with a unique background design.
The content within the div should have a background consisting of a one-pixel repetition at y, or maybe something different?
I also want a footer with its own distinctive background style.
The end result should look similar to the correct example provided below:
It's important that this look can be achieved with either 5 lines or 50 lines of text.
Currently, my HTML code looks like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="header"></div>
<div id="content">Text goes here
</div>
<div id="footer"></div>
</body>
</html>
And the associated CSS code is as follows:
#header {
width: 959px;
height: 169px;
margin:0 auto;
padding:0;
background: url(header.jpg);
}
#content {
width: 959px;
margin:0 auto;
background: url(content.jpg);
color: white;
}
#footer {
width: 959px;
height: 158px;
margin:0 auto;
padding:0;
background: url(footer.jpg);
}
However, the current output does not match the intended design - see "Wrong result" example.
I hope this clarifies the issue at hand. Thank you!