Having body background problems

HTML & CSS
1

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

Hey Rayzur,

Thanks for that!!

3

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.


header{
    background: [COLOR=Red]#28A628[/COLOR] 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:


header {
    background: url("images/header.jpg") no-repeat  50% 0; [COLOR=DarkGreen]/*no BG color needed*/[/COLOR]
    height:375px;
    [COLOR=Blue]min-width:960px;[/COLOR] [COLOR=DarkGreen]/*.wrapper width*/[/COLOR]
   [COLOR=Blue] max-width:1430px;[/COLOR] [COLOR=DarkGreen]/*BG image width*/
    [/COLOR][COLOR=DarkGreen][COLOR=Blue]margin:0 auto;[/COLOR]  /*center max-width*/[/COLOR]
}
4

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. :slight_smile: