SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Location
    UK
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    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 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!!!

    community-site1.jpgcommunity-site2.jpg
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    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.

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    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.


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
  •