need help with CSS body background

Discussion in 'CSS' started by cri8bat, Apr 24, 2011.

0
  1. #1
    hi,

    I just designed in photoshop the following page, just need a quick help in CSS coding.


    can some1 kindly tell me how to make body background 100% that repeats just once (the green balls)
    then I have a wrapper div of 800% pixel (with all the content)

    the footer is also like the body background of 100%.

    pls. see img for beter understanding:
    [​IMG]

    Uploaded with ImageShack.us
     
    cri8bat, Apr 24, 2011 IP
  2. artus.systems

    artus.systems Well-Known Member

    Messages:
    87
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    103
    #2
    Crop the image where it overlaps and repeat it to x-axis.
     
    artus.systems, Apr 25, 2011 IP
  3. cri8bat

    cri8bat Well-Known Member

    Messages:
    1,459
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    160
    #3
    thanks for a reply. I tried that to crop the image and make it repear x-axis

    however the problem is should I do CSS over the body?


    I mean I have body, wrap div, header div, etc

    the wrap div comes next to body tag and the div is 800px only. I want the crop img to be 100% and the rest 800px.
    how do I do that?
     
    cri8bat, Apr 25, 2011 IP
  4. artus.systems

    artus.systems Well-Known Member

    Messages:
    87
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    103
    #4
    The css
    body { background:url(path/to/your/image) repeat-x;}
#wrapper { width:800px; margin:50px auto;} /* the top margin will move the wrapper div down so it does not overlap the background image*/
    Code (markup):
    and in html 

    <body>
   <div id="wrapper">
       <div>header</div>
       <div>whatever else</div>
   </div> <- closes wrapper div

  <div>this is the footer div with 100% width and has a background image same like the body</div>
    HTML:
    close the body, html etc.....

    Hope you got it ;)
     
    artus.systems, Apr 25, 2011 IP
  5. cri8bat

    cri8bat Well-Known Member

    Messages:
    1,459
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    160
    #5



    thanks for the reply. I tried that but it didnt work....
     
    cri8bat, Apr 25, 2011 IP
  6. artus.systems

    artus.systems Well-Known Member

    Messages:
    87
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    103
    #6
    Have you uploaded it somewhere ?
     
    artus.systems, Apr 25, 2011 IP