Trying to make a div background image 100% height of window and div centered
Question
I'm trying to make a page that fills the screen on an iPad and has 2 black edges on an iPhone as the aspect ratio is different.
The background image needs to stay fixed shape, not stretched.
I've managed to make the div background, the right size and shape, but I can't centre it. Can anyone help? http://www.simonpetermedia.com/Aboutpage/about.html
html{
height:100%;
}
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
height: 100%;
background: #000000;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.oneColElsCtr #container {
position:fixed !important;
top:0;
right:0;
left:0;
bottom:0;
margin-right: auto;
margin-left: auto;
height: 100%;
background-image: url("aboutbg.jpg");
background-size: auto 100%;
background-repeat: no-repeat;
margin: 0 auto;
border: 0px solid #000000;
text-align: left;
min-height: 100%;
}
.oneColElsCtr #mainContent {
padding: 0px;
}
-->
</style></head>
<body class="oneColElsCtr">
<div id="container">
<div id="mainContent">
<h1> </h1>
<!-- end #mainContent --></div>
</div>
</body>
3 answers
solution1
0 ACCPTED 2014-08-28 12:42:08
background-size:cover;
编辑为
background-size:contain; background-position:center;backround-color:#E2AA7B;
solution2
0 2014-08-28 12:44:38
将此添加到#container css
background-position: center center;
solution3
0 2014-08-28 13:09:24
I have opened your page on Google Chrome and have opened the element inspector. At your "container" div, put a "background-position: center;" to make it stick horizontally to center.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.