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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Background image and screen size problem

    I'd be so apreciative if someone could point me in the right direction as Ive been ill and have missed tutorials and have a submission deadline fast approaching.
    I want the background image to fill the screen but am I right in thinking this is not such a good idea? How can I get rid of the white both on sides and the bottom of the page. I intend to centre all the content on the page but this is also proving to be difficult.
    Thanks in advance.
    Attached Thumbnails Attached Thumbnails Background image and screen size problem-screenshot.jpg  

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Is that a background image you created? Also is it set as the background on the body tag in your stylesheet? You can tile an image and set it as the background of the body.

  • #3
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yes I created a background image, 990px x 700px which is in the body tag.. It is unfortunatly not tilable as edges are darker than the interior.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Here is an article I found. Might help.

  • #5
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, I gave it a shot but it seemed to mess things up a bit. I think it would be better to centre the image and have a background colour for the surrounding edges but Im not sure how to approach this as Ive already set a background image?

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Again, to do this you could style the <body> tag with a background color of blue to match the image. Then have a div named wrapper around your code starting inside the body tag and ending before the closing body tag and then in your style sheet give the wrapper div an background image.

    So it would be

    Code:
    <html>
    <body>
    <div id="wrapper">
    
    all page content goes here
    
    </div>
    </body>
    </html>
    Then the styles would look something like this:

    Code:
    body {
         background-color: whatever color comes close;
    }
    
    #wrapper {
         background-image:url(imagefilepath.jpg)}

  • Users who have thanked teedoff for this post:

    johnnyk (10-29-2010)

  • #7
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    845
    Thanks
    11
    Thanked 79 Times in 77 Posts
    ☠ ☠RON☠ ☠

  • Users who have thanked Major Payne for this post:

    johnnyk (10-30-2010)


  •  

    Posting Permissions

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