SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having body background problems

    Hi all,

    I have created the following page http://www.kylehouston.com/testing/bal/ were I have added a repeat-x background to the body which at the moment doesnt show because Iv also added a background to my header, can anyone shed any light on were Im going wrong?

    Thanks

    Kyle

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I have added a repeat-x background to the body which at the moment doesnt show because Iv also added a background to my header, can anyone shed any light on were Im going wrong?
    Hi,

    What's going on here is that your header is defaulting to 100% width at all times and the BG color you have applied to it is picking up where the BG image stops. That BG color is hiding your body BG image.
    Code:
    header{
        background: #28A628 url(images/header.jpg) no-repeat 50% 0;
        height: 375px;        
    }
    The header BG image also gets clipped when the viewport gets below 960px (the width of .wrapper) as you scroll the page left you will see where the header BG image gets clipped. That is because width 100% is the available width at any given instance.

    If you set some min-max widths on your header and then use auto margins you should see the body BG image when the viewport has more width than the 1430px wide image.

    Something like this:
    Code:
    header {
        background: url("images/header.jpg") no-repeat  50% 0; /*no BG color needed*/
        height:375px;
        min-width:960px; /*.wrapper width*/
        max-width:1430px; /*BG image width*/
        margin:0 auto;  /*center max-width*/
    }

  3. #3
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Rayzur,

    Thanks for that!!

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The same thing is happening with your footer, the BG image gets clipped when under 960px with left scrolling.

    If you will style it in the same manner as I showed above for the header then your page should be ok, that is at least give it the min-width rule. The footer has a repeat-x image on it so you should not need the max-width.


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
  •