CSS background image browser resizing problem!

Get Started
1

I’m fairly new to HTML & CSS so apologies for posting such a basic question.

I am building a community site for my village and have decided to play around with the 1140 grid from http://cssgrid.net.

In my header div I’ve used CSS to place a non-repeating background image. However on resizing the browser window (making it smaller) the background images shifts over to the left and collapses the margin.

I have attached some images just in case my explanation confuses anyone.

Thanks for your input!!!

2

It would be better if we could see a live example of this. Otherwise, we can’t suggest the code to use.

To clarify, do you mean that you want white space around the header on narrow screens? Otherwise, I can’t see what the problem is.

3

That is a responsive grid in action, and it is doing what it is intended to do - alter the layout to fit on a mobile phone or tablet with their small screen sizes. On my Nexus, when I change orientation of the tablet from portrait to landscape it alters to suit the new orientation - unlike some designs I’ve viewed on the nexus…

So your header image will only be partly displayed as it is wider than the viewport. Your background image is not shifting, it is truncated - the equivalent of placing a piece of cardboard over the right hand side of your screen when the viewport is wide.

If you don’t like these changes that a responsive grid makes, don’t use a responsive grid.