SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    body background set to white...

    Hi, I'm having trouble with my background on my site..

    the background of the body should be white.. I then have a centered div which holds the site with a background image..

    yet when the site is open there are some grey areas in the top half of the site within the body...

    any ideas why the background is not completely white?

    it does not show up on all screens.. but if you select the contact tab in the nav. The link loads a modal box and then you can see the area in the background which is not white...

    i hope this makes sense

    Website example

  2. #2
    SitePoint Zealot seoindiauk's Avatar
    Join Date
    Aug 2009
    Location
    New Delhi, India
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    Quote Originally Posted by Owz2004 View Post
    Hi, I'm having trouble with my background on my site..

    the background of the body should be white.. I then have a centered div which holds the site with a background image..

    yet when the site is open there are some grey areas in the top half of the site within the body...

    any ideas why the background is not completely white?

    it does not show up on all screens.. but if you select the contact tab in the nav. The link loads a modal box and then you can see the area in the background which is not white...

    i hope this makes sense

    Website example
    Set like follws:

    1.body {
    background-image: url(images/background.jpg);
    background-attachment:fixed;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    }

    2. save and upload the white image as images/background.jpg.

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Fixed shouldn't be necessary.

    Take your page and add a border to your body. This should allow you to see if the body really is where you see the grey areas.

    Second, make sure your background-image statement isn't overriding yout background-color statement. Usually I group my backgrounds into one statement:
    background: #fff url(../images/tehbackground.xxx) 0 0 repeat-x;

    I've had times where first I list a background image and later the colour and I wouldn't see the image because I had accidentally overwritten my backgrround image with the setting of the colour.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Owz2004 View Post

    the background of the body should be white.. I then have a centered div which holds the site with a background image..
    Hi,

    Not sure I understand what you are getting at with the modal box but there will be no white background on the body at all (in the top section) because you are repeating an image all the way across the top.

    How can a background show when you are covering it all up with an image?

    Or am I missing something important

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Ah the grey is from the image! I thought the image was just the blue part!

  6. #6
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Not sure I understand what you are getting at with the modal box but there will be no white background on the body at all (in the top section) because you are repeating an image all the way across the top.

    How can a background show when you are covering it all up with an image?

    Or am I missing something important
    No your right.. Paul, I want the body to hold an image which is narrow and very long... the first 300px of the image is white followed by a 1px border seperating the white and the bottom blue... this is repeated across the page.. yet when it's displayed it runs across but with two chucks missing from the white section?

    Could there be an issue with my image itself?

    I have re opened it in photoshop and measured the background.. the white is 300px high, so i know it should cover the top half of the page fine..

    any ideas?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Owz2004 View Post

    I have re opened it in photoshop and measured the background.. the white is 300px high, so i know it should cover the top half of the page fine..

    any ideas?
    Which image are you looking at?

    This is the background image and it isn't white at the top.

    Its' 157px of #f7f7f7 followed by 108px #fff followed by another 151px of #f7f7f7f followed by some more white and a bit of blue.

    There is no 300px white section an the top.

  8. #8
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure if i'm understanding this correctly. Would someone please tell me what's going on here?

    If you want a white background why can you just use the following CSS?
    Code CSS:
    body {
    	background:#fff url('image') no-repeat;
    	background-position:value;
     
    }
    If i'm wrong please escuse me.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by BlakeAnthony View Post
    I'm not sure if i'm understanding this correctly. Would someone please tell me what's going on here?

    If you want a white background why can you just use the following CSS?
    Code CSS:
    body {
        background:#fff url('image') no-repeat;
        background-position:value;
     
    }
    If i'm wrong please escuse me.
    You're as baffled as I am as the background image is only 27px wide so there would be no point in no repeating it.

    It's repeated at the moment I assume to supply the coloured lines across the screen which the OP doesn't seem to want anyway!

    Confused

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I'm confused-I go to the image link you provided Paul and it's so translucent (I think that's the word) that I can't even see it. I don't see the blue or w/e your talking about. I just see pure white.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The image has been changed since I posted it and is now white at the top and the off coloured parts removed


Tags for this Thread

Bookmarks

Posting Permissions

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