Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Nov 2010
    Location
    Devon, UK
    Posts
    44
    Thanks
    6
    Thanked 1 Time in 1 Post

    Background Composition

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Nov 2010
    Location
    Devon, UK
    Posts
    44
    Thanks
    6
    Thanked 1 Time in 1 Post
    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
    Last edited by Rhombusone; 11-21-2010 at 12:01 PM. Reason: added

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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">

  • #5
    New Coder
    Join Date
    Nov 2010
    Location
    Devon, UK
    Posts
    44
    Thanks
    6
    Thanked 1 Time in 1 Post
    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

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Do you have a link to your site?

  • #7
    New Coder
    Join Date
    Nov 2010
    Location
    Devon, UK
    Posts
    44
    Thanks
    6
    Thanked 1 Time in 1 Post
    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!

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Nov 2010
    Location
    Devon, UK
    Posts
    44
    Thanks
    6
    Thanked 1 Time in 1 Post
    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.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Rhombusone View Post
    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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New Coder
    Join Date
    Nov 2010
    Location
    Devon, UK
    Posts
    44
    Thanks
    6
    Thanked 1 Time in 1 Post
    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!

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    No hassle at all. Glad to help
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •