Jump to content

Scrolling vertically with a large background image?


mottwsc

Recommended Posts

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>

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.

  • 2 weeks later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.