PDA

View Full Version : Help needed on background image within container as border



peter31
Mar 11th, 2010, 11:31 PM
Hi
I am having problems creating a simple website template with a background image as a "border" around my main content.

What is happening at the moment is that the background image is showing but is repeating all over the webpage. I want it just to show on the border i.e. between my first div (div id=main) and second div (div id=container).

Code is shown below.

[code]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="css/test-css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<div id="container">
<div id="header">
<div id="logo_cart_holder">
<div id="logo_holder"><img src="header.jpg" alt=""></div>
<div id="cart_holder">
<div id="cart">
</div>
<div id="search">
</div>
</div>
</div>
<div id="menu_holder">
</div>
</div>
<div id="body">
</div>
<div id="footer">
</div>
</div>
</div>
</body>
</html>

CSS

#main {
height:auto;
width:auto;
background-image: url();
background-repeat: repeat;
}

#container {
margin: auto;
padding: 5px;
height: auto;
width: 850px;
border: thin solid #000000;
}
#header {
height: 150px;
width: 845px;
border: thin solid #000000;
}
#logo_cart_holder {
height: 123px;
width: 845px;
}
#logo_holder {
height: 123px;
width: 582px;
float:left;
}
#cart_holder {
height: 123px;
width: 260px;
float:right;
}

#cart {
height: 80px;
width: 260px;
float:clear;
#search {
height: 80px;
width: 260px;
float:clear;
}
#menu_holder {
height: 27px;
width: 845px;
float:clear;
}
#body {
height:auto;
width: 845;
padding-left: 0px;
padding-right: 0px;
}
#girl {
padding: 0px;
float: left;
height: 334px;
width: 595px;
margin-top: 0px;
border: thin solid #666666;
margin-bottom: 0px;
}
#opt {
padding: 0px;
float: right;
height: 324px;
width: 250px;
margin-top: 0px;
margin-bottom: 0px;
border: thin solid #666666;
}
#footer {
padding: 0px;
clear: both;
height: 35px;
width: 845px;
border: thin solid #000000;
float: none;
margin-top: 0px;
margin-right: 0px;
background-color: #CCCCCC;
}

[code]

thanks
:)

JGRobinson
Mar 11th, 2010, 11:51 PM
Hi,

try changing the background-repeat to background-repeat: no-repeat;

to stop the repeat

Cheers
Graham

peter31
Mar 12th, 2010, 12:05 AM
Hi,

try changing the background-repeat to background-repeat: no-repeat;

to stop the repeat



thanks for your input graham but unfortunately this makes no difference.
i have tried quite a few other tweaks as well but nothing seems to work.
not sure whether there is a problem with the way I have structured the page for the background image to work as a border effect?

JGRobinson
Mar 12th, 2010, 12:13 AM
What does the image look like ? - if you can send me a url then I'll see if I can recreate the problem

Cheers
Graham

peter31
Mar 12th, 2010, 12:20 AM
i am using an image from a blog of my for demo purposes but this is one causing the problem

http://www.noanoareigate.com/wp-content/uploads/2010/03/p1040928.jpg

not sure whether I should be using another sized image?

Excavator
Mar 12th, 2010, 12:25 AM
Hello peter31,
Nest your divs like this -


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body, html {background: #fc6;}
* {
margin: 0;
padding: 0;
}
#main {
width: 900px;
margin: 30px auto;
oveflow: auto;
background: #00f;
}
#container {
width: 850px;
margin: 25px;
background: #f00;
border: thin solid #000000;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="main">
<div id="container">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><!--breaks for demo only-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
</body>
</html>

Check your CSS in the validator. See the links about validation in my sig below.

peter31
Mar 12th, 2010, 01:29 AM
big thanks for your help.
can i also have the background image at the top and bottom of the page as well?

here is how it looks at the moment:

http://www.wentworthconsulting.co.uk/

thanks in advance
peter

Excavator
Mar 12th, 2010, 01:43 AM
Do you mean like this?
@charset "UTF-8";
body {background: url(http://www.noanoareigate.com/wp-content/uploads/2010/03/p1040928.jpg);}
#main {
height:auto;
width:auto;
background-repeat: repeat;
}
#container {
margin: auto;
padding: 5px;
height: auto;
width: 850px;
border: thin solid #000000;
}
#header {
height: 150px;
...

peter31
Mar 12th, 2010, 01:54 AM
if you take another look at my demo site:

www.wentworthconsulting.co.uk - i have updated it

i mean putting the background image into the orange area at the top and the bottom as well

thanks in advance
peter

Excavator
Mar 12th, 2010, 02:02 AM
Hmm, try putting that image as a background of the body of your document.
http://www.w3schools.com/css/css_background.asp