图片未填充背景容器
我试图为应用打开一个页面,但我的响应图像不适合全屏。我曾尝试使用背景大小的属性值:但问题仍然存在。使用容器,它削减了图像的宽度和一些丢失,我不想这样。任何帮助,非常感谢。图片未填充背景容器
下面是使用图像IM - http://www.shbarcelona.cat/blog/cat/wp-content/uploads/2014/05/formula-2.jpg
谢谢。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.5/theme-classic/theme-classic.css"><script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head><body>
<div data-role="page" >
<div id="background_image">
<div data-role="header" data-theme="a">
<h1>Formula 1 Team List</h1>
</div>
<div data-role="main" class="ui-content" id="index_button">
<a href="#" data-role="button" data-ajax="false"> List of Teams </a>
</div>
<div data-role="footer" data-theme="a" data-position="fixed">
<h1> Kevin Murphy - 11139323</h1>
</div>
</div>
</div>
只需使用background-size: cover
,使全宽度图像。他们的关键在于确保您将div和body/html的高度和宽度设置为100%。
html, body {
height: 100%;
}
#something {
color: white;
height: 100%;
width: 100%;
background: url(https://download.unsplash.com/photo-1426200830301-372615e4ac54) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
我仍然有问题,当我使用这段代码,图像仍然没有填充页面高度明智,和图像现在也在边缘 – 2015-04-03 18:09:36
你可以把你的代码放在小提琴里吗?或提供网站链接? – 2015-04-03 18:31:49
http://jsfiddle.net/Kev1113/yc85q4gt/ – 2015-04-03 18:43:51
你试过'背景大小:盖;'? – j08691 2015-04-03 17:38:38
我已经和图像仍然太短,它的一个大图像1280×1024所以我不明白为什么它不应该 – 2015-04-03 17:43:13