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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    css border/background

    Hi,

    I'm trying to apply a background/border to a page. The site is at forsythproducedirect.com, and i'm trying to apply a similar background to pauleys.co.uk, minus the top green 'bar', so it'll just be running up the sides with the space behind the content still white.

    Does anyone have any idea how i'd go about it?

    I'd really appreciate any help! Cheers, Graeme

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello graemebryson,
    You have a body tag in style.css and another in style1.css. It might save some confusion if you combined those.
    If you add the following line highlighted in red to the body tag in style1.css, that same background will load on your page -
    Code:
    body{
    	background: url(http://www.pauleys.co.uk/templates/pauleys/images/main_background.gif) repeat-x;color:#848484;
    }
    
    #main{
    background: #fff url(../images/skin1/bg.jpg) no-repeat 0px 0px;
    }
    
    .box{
    border-right:1px solid #dadada;
    }
    After that, you'll give your page a color so you don't see the gradient behind it. Like this -
    Code:
    #top{
    width:940px;
    margin:0 auto;
    position:relative;
    clear: both;
    background: #fff;
    }
    Some padding to move the text away from the edges might be nice too.
    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

  • Users who have thanked Excavator for this post:

    graemebryson (11-21-2009)

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks a million mate!

    I'm having a few sizing issues with the background. Obviously each page differs in height depending on the content. On the homepage, the background repeats itself, whereas on other pages it fits fine. Can you think of any solutions?

    Again, your help is seriously appreciated mate, i had been stuck on this for a while and you've really helped me out!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Make it repeat on the x axis only. By not specifying, it repeats on x and y both by default.
    Like this -
    Code:
    body{
    background: #398212 url(http://forsythproducedirect.com/wp-content/uploads/2009/11/forsythbackground.png) repeat-x;
    }
    I didn't pick a very close matching color but the #398212 gives it a color for the part of the body that is not covered with forsythbackground.png.
    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

  • Users who have thanked Excavator for this post:

    graemebryson (11-21-2009)

  • #5
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Excellent mate, thanks a million! I doubt there is, but if theres anything i can do to return the favour just let me know.


  •  

    Posting Permissions

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