Jump to content

Scrolling vertically with a large background image?


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...
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.