#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2008
    Posts
    46
    Rep Power
    22

    Can't get large background image to scroll vertically


    I am trying to get a large background image to be centered at the top of the page but also scroll vertically. This should be straightforward given that scrolling is the default. I have the image where I want it to be displayed but the page will not scroll. I commented out two lines in my CSS just in case. Where am I going wrong?

    Thanks...

    CSS

    Code:
    body {
      padding: 0;
      margin: 0;
      background-color: #ffffff;
      background-image: url('Homepage.png');
      background-repeat: no-repeat;
      background-position: center top;
      background-attachment: scroll;
      /*width: 100%;*/
      /*display: table;*/
    }
    HTML

    <
    Code:
    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW"/>
    <link rel="icon" type="image/png" href="favicon.png" />
    <link rel="stylesheet" href="/style.css" type="text/css" />
    </head>
    
    <body>
    </body>
    
    </html>
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Try adding:
    Code:
    background-size: cover;
    Regards,

    NM.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2008
    Posts
    46
    Rep Power
    22

    results of background-size: cover


    When adding background-size: cover, the image is centered and fills the space; but

    (1) the window is never scrollable, even when the window is resized to something really small;
    (2) when the window is resized horizontally, the image shrinks both horizontally and vertically, but I'm just trying to make the image recenter and then stop recentering when it gets to a minimum width of 1024px;
    (3) when the browser window is maximized, the image is cut off on the bottom (I'm trying to have it all shown unless the window is resized vertically), but when the browser is restored down, the full image shows.

    So, is there an alternative way to do this?

    Thanks.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    7
    Rep Power
    0
    Add this to the Body element. (This might fix it)

    overflow: scroll;

    I have seen that work with what you are having problems with.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2008
    Posts
    46
    Rep Power
    22

    same things happening


    same result, unfortunately. thanks anyway.
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Background images simply have no affect on the dimensions of the elements they are applied to. Are you sure that you really want to be using a background image in the first place? If so, I suggest you try setting the min-width and min-height properties to the dimensions of the image.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2008
    Posts
    46
    Rep Power
    22

    Resolved


    I scrapped what I was doing and used the table technique found here: http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

IMN logo majestic logo threadwatch logo seochat tools logo