Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Scrolling vertically with a large background image?

Started by mottwsc, Feb 17 2013 12:19 PM

Please log in to reply

4 replies to this topic

#1 mottwsc

Advanced Member

Members
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>

Back to top

#2 Love2c0de

Advanced Member

Members
248 posts

LocationThe Pleiades
Age:23

Posted 17 February 2013 - 07:52 PM

Try adding this:

background-size: cover;

Regards,

L2c.

V.V and O.V <3

http://www.labtec.0f...oved/?page=home
http://www.tpuc.org/
http://www.getoutofdebtfree.org/

Back to top

#3 mottwsc

Advanced Member

Members
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.

Back to top

#4 Medavidcook

Member

Members
15 posts

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