SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    0 Post(s)
    0 Thread(s)

    CSS background image browser resizing problem!!!

    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

    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!!!

    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Melbourne, AU
    448 Post(s)
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    1 Post(s)
    0 Thread(s)
    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.


Posting Permissions

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