Hi, I have just done a website for my father in law and the header BG disappears when the browser window is made smaller and you scroll horizontally. Just cant figure it, any one can shed any light on how to fix it I would be very grateful.

 

Thanks

 

Andy

 

http://www.rotherhamfunerals.co.uk

Hi Andy, are you aware of responsive design? In short When the screen gets smaller they layout adapts to fit the viewport. This is how all modern sites are built now, it's considered bad UX to have horizontal scrolling on these smaller screens.

 

That's something to bear in mind on future projects. The issue is that your header, is that it has a width of 100%. in your case with a fixed width site you need to have the container styles (width: 922px) on there. You have a problem though you are using ID's for styling, this is bad because you cannot have more than 1id which means you cannot re-use styles. remove all the IDs and change to classes, then you can apply the container class to your header.

Thanks, sorted. In the process of making a responsive site now, its been a few years since I last created a website so a bit out of touch

Hi,this website are not responsive create to responsive design and all width to percentage not an px the bg is img responsive type used it.

 

Not all widths have to be a percentage.

This example has a fixed width image on the left and a fluid element to the right taking up the remaining space http://codepen.io/rbrtsmith/pen/qEPNKG