February 17th, 2013, 11:19 AM
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?
background-position: center top;
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" />
February 17th, 2013, 07:00 PM
February 19th, 2013, 02:25 PM
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?
February 19th, 2013, 03:17 PM
Add this to the Body element. (This might fix it)
I have seen that work with what you are having problems with.
February 19th, 2013, 03:46 PM
same things happening
same result, unfortunately. thanks anyway.
February 19th, 2013, 04:11 PM
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.
March 2nd, 2013, 08:43 AM
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/