View Full Version : Background Composition

11-21-2010, 02: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


11-21-2010, 02: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.

11-21-2010, 12:34 PM
This is my markup in html:

<!DOCTYPE html>

<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/reset.css" />


<div id="container">

<div id="topEdge"><img src="images/topedge.jpg" class="top"/></div>
<div id="content"></div>

<div ="footer"></div>



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

body {
background: url(images/bg.jpg) repeat-x;
font-family: helvetica, arial, sans-serif;

margin:0px auto;


border-bottom: 2px solid #ccc;

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

11-21-2010, 04:13 PM
The image isnt repeating because your css is wrong. Try this:

#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:

<!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">

11-21-2010, 05: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

11-21-2010, 08:41 PM
Do you have a link to your site?

11-21-2010, 08:48 PM

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!

11-21-2010, 08:57 PM
Hello Rhombusone,
That reset is messing up a lot when I view your website.

See what this does for you -
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;

11-21-2010, 09: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. :(

11-21-2010, 09:16 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. :(

You need to give #topEdge some content so it will show. Or a height, like this -
height: 27px;
background-image: url(images/topedge.jpg);
background-repeat: repeat-x;

11-21-2010, 09: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!

11-21-2010, 09:29 PM
No hassle at all. Glad to help :thumbsup: