[英]Twitter Bootstrap Responsive Background Image
I'm trying to make a site similar to this: http://www.awerest.com/demo/myway/light/ 我正在尝试建立一个类似于此的网站: http : //www.awerest.com/demo/myway/light/
A single paged site with a responsive image that takes up the full screen, on any device. 在任何设备上都有一个带有响应图像的单页面网站,可以占据整个屏幕。 That's my issue I can't figure out a way to get a background image to go full screen on any device.
这是我的问题,我无法想办法让背景图像在任何设备上全屏显示。
<img src="C:\Users\Jack\Desktop\City-Skyline.jpg" class="img-responsive" alt="Responsive image">
I came across this but no luck, if some one can point me into the right direction on how to do this it would be very appertained. 我遇到过这个,但没有运气,如果有人可以指出我如何做到这一点的正确方向它将是非常绝对的。
The crucial part here is to set up the height of your content as 100% relative to the viewport ( html
element). 这里的关键部分是将内容的高度设置为相对于视口(
html
元素)的100%。 By applying the background image to a div
and not just using an img
you also have a lot more flexibility in how its displayed, background-position
keeps it always centered, background-size:cover
keeps it scaled. 通过将背景图像应用于
div
并且不仅仅使用img
您还可以更灵活地显示其background-position
如何使其始终居中, background-size:cover
使其保持缩放。
HTML HTML
<div></div>
<div>More Content</div>
CSS CSS
html, body {
height:100%;
width:100%;
position:relative;
margin:0;
padding:0;
}
div:first-of-type {
height:100%;
width:100%;
background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbcnkIVXLz23PALu8JD-cTGe8KbXKC1JV0gBM_x1lx3JyaNqE7);
background-size:cover;
background-position:center center;
}
div:last-of-type {
background:green;
position:relative;
color:white;
height:100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.