Background Composition

Rhombusone · 11-21-2010, 01:13 AM

Hi guys,

Just joined up and very new to the coding scene. I'm a designer by trade so looking got some help. I have my template made up but already im stuck on my background. I'm trying to work out how to construct it, i basically have a top border, the main background then a footer which is another seperate textured background.

I am thinking the best way to tackle it is have the top image seperate, middle, bottom. But how would i code this, does each image go in it's own div or can the lot be done using css within one single div?

I hope you follow

Thanks

Excavator · 11-21-2010, 01:31 AM

Hello Rhombusone,
To learn how to write a page you might have some luck following a tutorial. There are some very good ones at http://www.tizag.com/beginnerT/ and http://www.w3schools.com/

When you run into a problem with code you've tried that's not working, post back here - Lots of good help available here.

Tip: You will probably want each seperate image to be a background of it's own div. Like a header image would be the background of <div id="header"> so you can put other header stuff in that div and the image stays behind it all.

Rhombusone · 11-21-2010, 11:34 AM

This is my markup in html:

Code:

<!DOCTYPE html>
<html>
 <head>

 <link rel="stylesheet" href="css/style.css" />
 <link rel="stylesheet" href="css/reset.css" />	
	
	
</head>
	
<body>
<div id="container">
	
	<div id="topEdge"><img src="images/topedge.jpg" class="top"/></div>
	<div id="content"></div>
	
	<div ="footer"></div>
			

</div>













</body>	
</html>

And here is my css.. now the topEdge image will not repeat for some reason and the body background is not showing.. no idea why :S

Code:

body {
	background: url(images/bg.jpg) repeat-x;
	font-family: helvetica, arial, sans-serif;
	line-height:25px;
	overflow:hidden;
	}
	
	
container{
	width:959px;
	margin:0px auto;
	position:relative;
	overflow:hidden;
}

topEdge{


}
.top{
	background-repeat:repeat-x;
	border-bottom: 2px solid #ccc;
}

Live version : http://www.rhombusone.com/projecttiger/index.html

teedoff · 11-21-2010, 03:13 PM

The image isnt repeating because your css is wrong. Try this:

Code:

#topEdge {background-image: url(images/cross.jpg);
	background-repeat: repeat-x;}

Then take out the image src from the html.

You should also specifiy a valid doctype such as:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Rhombusone · 11-21-2010, 04:12 PM

thanks for that, although it still is not repeating for some reason... i must have the document setup wrong because ive done it before i just can not see why it will not work. I have corrected the doc type and changed the CSS - I Take is i remove the img input from the html as i should be able to call up the image as a background with that css section however screen is blank... no background no topbar :S

teedoff · 11-21-2010, 07:41 PM

Do you have a link to your site?

Rhombusone · 11-21-2010, 07:48 PM

http://www.rhombusone.com/projecttiger/index.html

Sorry if it's something really obvious, but i keep looking over it and it must be simple but i just can not see it!

Excavator · 11-21-2010, 07:57 PM

Hello Rhombusone,
That reset is messing up a lot when I view your website.

See what this does for you -

Code:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5,
h6, p, blockquote, pre, a, code, del, em, font, img, small,
strike, strong, dl, dt, dd, ol, ul, li, fieldset, form,
label, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
/*background: transparent;*/
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: â€˜â€™;
content: none;
}

Rhombusone · 11-21-2010, 08:05 PM

Hi thanks for that although didnt seem to make any change for me. I tried removing the reset altogeather and the body background works fine after however the topEdge div image background still not showing up.

Excavator · 11-21-2010, 08:16 PM

Quote:

Originally Posted by Rhombusone

Hi thanks for that although didnt seem to make any change for me. I tried removing the reset altogeather and the body background works fine after however the topEdge div image background still not showing up.

You need to give #topEdge some content so it will show. Or a height, like this -

Code:

#topEdge{
height: 27px;
 background-image: url(images/topedge.jpg);
 background-repeat: repeat-x;
}

Rhombusone · 11-21-2010, 08:22 PM

Ahhh thankyou Excavator, sorry for the hassle, appreciate the patience and time taken to help me. I think i have it now

Thanks to everyone else too!

Excavator · 11-21-2010, 08:29 PM

No hassle at all. Glad to help