Jump to content


Photo

Scrolling vertically with a large background image?


  • Please log in to reply
4 replies to this topic

#1 mottwsc

mottwsc

    Advanced Member

  • Members
  • PipPipPip
  • 74 posts

Posted 17 February 2013 - 12:19 PM

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

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

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

Love2c0de

    Advanced Member

  • Members
  • PipPipPip
  • 366 posts
  • LocationThe Pleiades
  • Age:23

Posted 17 February 2013 - 07:52 PM

Try adding this:
background-size: cover;

Regards,

L2c.

#3 mottwsc

mottwsc

    Advanced Member

  • Members
  • PipPipPip
  • 74 posts

Posted 19 February 2013 - 03:24 PM

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.

#4 Medavidcook

Medavidcook

    Advanced Member

  • Members
  • PipPipPip
  • 34 posts
  • LocationCardiff, Wales

Posted 28 February 2013 - 03:44 AM

Do you have an active link, I had one of these before but for me to try and solve i need the live version as struggling looking at the code side.

Thanks

#5 mottwsc

mottwsc

    Advanced Member

  • Members
  • PipPipPip
  • 74 posts

Posted 02 March 2013 - 09:44 AM

RESOLVED:

I scrapped what I was doing and used the table technique found here: http://css-tricks.co...ontal-an-image/






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com