CSS 全屏响应式背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16548338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full-screen responsive background image
提问by Tom Rogers
I am very new to Front-end development and Foundation.
我对前端开发和基础很陌生。
I am trying to get <div class="main-header">to be a full screen image that scales down responsively.
我正在尝试<div class="main-header">成为一个响应式缩小的全屏图像。
Can anyone tell me what I am doing wrong? It is scaling properly, but is not showing the full image. I also wanted the <div class="large-6 large-offset-6 columns">to sit above it on a mobile device – is that possible?
谁能告诉我我做错了什么？它正确缩放，但未显示完整图像。我还希望在<div class="large-6 large-offset-6 columns">移动设备上坐在它上面——这可能吗？
The HTML:
HTML：
<!-- MAIN HEADER -->
<div class="main-header">
<div class="row">
<div class="large-6 large-offset-6 columns">
<h1 class="logo">BleepBleeps</h1>
<h3>A family of little friends<br>that make parenting easier</h3>
</div> <!-- END large-6 large-offset-6 columns -->
</div><!-- END ROW -->
</div><!-- END MAIN-HEADER -->
The CSS:
CSS：
.main-header {
background-image: url(../img/bb-background2.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
}
h1.logo {
text-indent: -9999px;
height:115px;
margin-top: 10%;
}
回答by Plummer
http://css-tricks.com/perfect-full-page-background-image/
http://css-tricks.com/perfect-full-page-background-image/
//HTML
<img src="images/bg.jpg" id="bg" alt="">
//CSS
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
OR
或者
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
OR
或者
//HTML
<img src="images/bg.jpg" id="bg" alt="">
//CSS
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
//jQuery
$(window).load(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});
回答by 9pixle
<style type="text/css">
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
回答by cn123h
One hint about the "background-size: cover" solution, you have to put it after "background" definition, otherwise it won't work, for example this won't work:
关于“background-size:cover”解决方案的一个提示，你必须把它放在“background”定义之后，否则它将不起作用，例如这将不起作用：
html, body {
height: 100%;
background-size: cover;
background:url("http://i.imgur.com/aZO5Kolb.jpg") no-repeat center center fixed;
}
回答by Anil kumar
I had this same problem with my pre-launch site EnGrip. I went live with this issue. But after a few trials finally this has worked for me:
我的预发布网站EnGrip也遇到了同样的问题。我继续讨论这个问题。但经过几次试验后，这对我有用：
background-size: cover;
background-repeat: no-repeat;
position: fixed;
background-attachment: scroll;
background-position: 50% 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
z-index: 0;
pure CSS solution. I don't have any JS/JQuery fix over here. Even am new to this UI development. Just thought I would share a working solution since I read this thread yesterday.
纯 CSS 解决方案。我这里没有任何 JS/JQuery 修复。即使是这个 UI 开发的新手。只是想我会分享一个可行的解决方案，因为我昨天阅读了这个线程。
回答by MXLink
for Full-screen responsive background image
用于全屏响应式背景图像
set css height ( height:100vh )
设置css高度（高度：100vh）
example :
例子 ：
.main-header {
background-image: url(../img/bb-background2.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height:100vh; /* responsive height */
}
回答by Pavan S
I personally dont recommend to apply style on HTML tag, it might have after effects somewhere later part of the development.
我个人不建议在 HTML 标签上应用样式，它可能会在开发后期的某个地方产生影响。
so i personally suggest to apply background-image property to the body tag.
所以我个人建议将 background-image 属性应用于 body 标签。
body{
width:100%;
height: 100%;
background-image: url("./images/bg.jpg");
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
}
This simple trick solved my problem. this works for most of the screens larger/smaller ones.
这个简单的技巧解决了我的问题。这适用于大多数较大/较小的屏幕。
there are so many ways to do it, i found this the simpler with minimum after effects
有很多方法可以做到，我发现这种方法更简单，后遗症最少
回答by Joshua Pinter
Backstretch
后伸
Check out this one-liner pluginthat scales a background image responsively.
看看这个单行插件，它可以响应地缩放背景图像。
All you need to do is:
您需要做的就是：
1. Include the library:
1. 包含库：
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
2. Call the method:
2.调用方法：
$.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");
I used it for a simple "under construction website" site I had and it worked perfectly.
我将它用于我拥有的一个简单的“建设中网站”网站，并且运行良好。
回答by Tony Wu
Try this:
尝试这个：
<img src="images/background.jpg"
style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-5000;">
http://thewebthought.blogspot.com/2010/10/css-making-background-image-fit-any.html
http://thewebthought.blogspot.com/2010/10/css-making-background-image-fit-any.html
回答by maestro888
Simple fullscreen and centered image https://jsfiddle.net/maestro888/3a9Lrmho
简单的全屏和居中图像 https://jsfiddle.net/maestro888/3a9Lrmho
jQuery(function($) {
function resizeImage() {
$('.img-fullscreen').each(function () {
var $imgWrp = $(this);
$('img', this).each(function () {
var imgW = $(this)[0].width,
imgH = $(this)[0].height;
$(this).removeClass();
$imgWrp.css({
width: $(window).width(),
height: $(window).height()
});
imgW / imgH < $(window).width() / $(window).height() ?
$(this).addClass('full-width') : $(this).addClass('full-height');
});
});
}
window.onload = function () {
resizeImage();
};
window.onresize = function () {
setTimeout(resizeImage, 300);
};
resizeImage();
});/*
* Hide scrollbars
*/
#wrapper {
overflow: hidden;
}
/*
* Basic styles
*/
.img-fullscreen {
position: relative;
overflow: hidden;
}
.img-fullscreen img {
vertical-align: middle;
position: absolute;
display: table;
margin: auto;
height: auto;
width: auto;
bottom: -100%;
right: -100%;
left: -100%;
top: -100%;
}
.img-fullscreen .full-width {
width: 100%;
}
.img-fullscreen .full-height {
height: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class="img-fullscreen">
<img src="https://static.pexels.com/photos/33688/delicate-arch-night-stars-landscape.jpg" alt=""/>
</div>
</div>回答by Ashok
You can also make full screen banner section without use of JavaScript, pure css based responsive full screen banner section , using height: 100vh; in banner main div, here have live example for this
您还可以在不使用 JavaScript 的情况下制作全屏横幅部分，基于纯 css 的响应式全屏横幅部分，使用高度：100vh；在横幅主 div 中，这里有实例
#bannersection {
position: relative;
display: table;
width: 100%;
background: rgba(99,214,250,1);
height: 100vh;
}
https://www.htmllion.com/fullscreen-header-banner-section.html
https://www.htmllion.com/fullscreen-header-banner-section.html
