mottwsc Posted February 17, 2013 Share Posted February 17, 2013 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> Link to comment https://forums.phpfreaks.com/topic/274595-scrolling-vertically-with-a-large-background-image/ Share on other sites More sharing options...
Love2c0de Posted February 18, 2013 Share Posted February 18, 2013 Try adding this: background-size: cover; Regards, L2c. Link to comment https://forums.phpfreaks.com/topic/274595-scrolling-vertically-with-a-large-background-image/#findComment-1413036 Share on other sites More sharing options...
mottwsc Posted February 19, 2013 Author Share Posted February 19, 2013 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. Link to comment https://forums.phpfreaks.com/topic/274595-scrolling-vertically-with-a-large-background-image/#findComment-1413473 Share on other sites More sharing options...
Medavidcook Posted February 28, 2013 Share Posted February 28, 2013 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 Link to comment https://forums.phpfreaks.com/topic/274595-scrolling-vertically-with-a-large-background-image/#findComment-1415545 Share on other sites More sharing options...
mottwsc Posted March 2, 2013 Author Share Posted March 2, 2013 RESOLVED: 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/ Link to comment https://forums.phpfreaks.com/topic/274595-scrolling-vertically-with-a-large-background-image/#findComment-1415996 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.