全屏响应背景图片

Posted 2023-02-27

技术标签:

【中文标题】全屏响应背景图片【英文标题】：Full-screen responsive background image 【发布时间】：2013-05-09 00:55:32 【问题描述】：

我对前端开发和基础非常陌生。

我试图让<div class="main-header"> 成为一个全屏图像，可以响应地缩小。

谁能告诉我我做错了什么？它正在正确缩放，但未显示完整图像。我还希望<div class="large-6 large-offset-6 columns"> 在移动设备上位于其上方——这可能吗？

<!-- 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 -->

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%;

【问题讨论】：

等等...你想要它在整个页面上...哦，这里。 body background: url("../img/bb-background2.png") 无重复固定中心中心/覆盖透明；颜色：#999999； font-family: 'Lato',sans-serif; 从主标题中删除背景我用了“Perfect responsive fullscreen backgrounds”，效果很好。 【参考方案1】：

http://css-tricks.com/perfect-full-page-background-image/

//HTML
<img src="images/bg.jpg" id="bg" >

//CSS
#bg 
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;

或

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% */

或

//HTML
<img src="images/bg.jpg" id="bg" >

//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");

);

【讨论】：

提供的网站是浏览器版本的问题所在，所有浏览器都可以正常工作，接受 Ie7 和 8 .. 你看过网站了吗？两种 CSS 方法（#2 多于 #1）都适用于 IE7/8，jquery 方法适用于 IE7+。我不知道你说“你看过网站吗？”时指的是什么？因为问题中没有列出网站。如果您要引用我提供的文章，那么您需要仔细阅读它，因为它清楚地说明了每种方法支持的浏览器/版本。我已经使用了 Chris Coyier 的这种方法。有用。试一试并将此答案标记为正确。嗨@tPlummer 感谢您的支持，如果是重复的问题，我们很抱歉。 Stack Overflow 和 Foundation 的新手。非常感谢您的帮助。还有 z-index 播放他的论文。添加到 css 文件中 this => z-index:-100;为了把图像放在一切背后【参考方案2】：

<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>

【讨论】：

当我在全窗口大小的 div 中使用它时，它在桌面上运行良好。尽管在手机和平板电脑上它被拉伸以适应页面的整个高度，而不仅仅是我分配给它的 div。知道为什么吗？ @vsdev，有什么解决办法吗？我在 PWA 全屏启动中遇到了类似的问题 :( @Satys 抱歉，我不记得了。它已经很长时间了，但我认为自从该网站启动并运行了大约三年以来，我就可以使用它了。到目前为止，该代码已不再存档。 @vsdev，谢谢回复，其实我已经解决了！ @Satys - 我也遇到了同样的问题 - 你还记得你是如何解决 bg 图像填充整个页面高度而不是只分配给它的 div 的问题吗？【参考方案3】：

试试这个：

<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

【讨论】：

【参考方案4】：

Backstretch

查看这个one-liner plugin，它可以响应地缩放背景图像。

您需要做的就是：

1.包含库：

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>

2。调用方法：

$.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");

我将它用于我拥有的一个简单的“正在建设中的网站”网站，它运行良好。

【讨论】：

downvote 是否会增加复杂性？认为结果可以用纯 css 完成？ 5 年后，我同意你的看法。不过，仍然是一个选择。这并不像它不起作用。通常，您只会对未真正回答原始问题的解决方案投反对票。【参考方案5】：

关于“background-size:cover”解决方案的一个提示，你必须把它放在“background”定义之后，否则它不起作用，例如这个不起作用：

html, body 
    height: 100%;
    background-size: cover;
    background:url("http://i.imgur.com/aZO5Kolb.jpg") no-repeat center center fixed;

http://jsfiddle.net/8XUjP/58/

【讨论】：

【参考方案6】：

我已经完成了这个 javascript 函数：它将您的背景图像以最重要的尺寸（宽度 od 高度）固定到您的屏幕尺寸，而不改变图像的纵横比。

<script language="Javascript">

function FixBackgroundToScreen()

    bgImg = new Image(); 
    bgImg.src = document.body.background;

    if ((bgImg.height / window.innerHeight) < (bgImg.width / window.innerWidth))
        document.body.style.backgroundSize = "auto 100%";
    else
        document.body.style.backgroundSize = "100% auto";
;    
</script>

这个功能是您唯一需要的。它必须通过 window.onresize 事件和 body.onload 事件调用。图片必须是 background-repeat: no-repeat;背景附件：固定；

<script language="Javascript">
window.onresize=function()FixBackgroundToScreen();;
</script>

<body onload="FixBackgroundToScreen();">

你可以在我的网站www.andreamarulla.it看到这个功能

对不起我的英语... 安德里亚 ;-)

【讨论】：

【参考方案7】：

我个人不建议在 HTML 标签上应用样式，它可能会在开发后期的某个地方产生影响。

所以我个人建议将 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;

这个简单的技巧解决了我的问题。这适用于大多数屏幕较大/较小的屏幕。

有很多方法可以做到这一点，我发现这个更简单，后效最小

【讨论】：

【参考方案8】：

我的预发布网站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;

纯 CSS 解决方案。我这里没有任何 JS/JQuery 修复。即使是这个 UI 开发的新手。自从我昨天阅读这个帖子以来，我只是想我会分享一个可行的解决方案。

【讨论】：

我使用下一个代码 background-repeat:no-repeat;background-size:cover;background-attachment:scroll;background-position: 50% 50%;padding-top:101px;而且效果很好【参考方案9】：

简单的全屏和居中图像 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" />
    </div>
</div>

【讨论】：

【参考方案10】：

您也可以在不使用 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

【讨论】：

【参考方案11】：

用于全屏响应背景图片

设置css高度（高度：100vh）

示例：

.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 */

【讨论】：

+1 这个对后续 div 的位置没有问题，因为它不固定 .main-heather 的位置。【参考方案12】：

For the full-screen responsive background image cover

<div class="full-screen">

</div>

CSS

.full-screen
    background-image: url("img_girl.jpg");
    height: 100%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

【讨论】：

【参考方案13】：

通过使用下面的代码：

.classname
    background-image: url(images/paper.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

希望它有效。谢谢

【讨论】：

【参考方案14】：

我会说，在你的布局文件中给出一个

<div id="background"></div>

然后在你的css中做

#background 
 position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: image-url('background.png') no-repeat;
  background-size: cover;

并确保在您的 app/assets/images 中有背景图片，并更改

background: image-url('background.png') no-repeat;

'background.png' 到你自己的背景图片。

【讨论】：

【参考方案15】：

这对我有用，所以发布这个。

.my-container 
  position: relative;
  background: #696969;
  overflow: hidden;

.my-container:before 
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.6;
  background-image: url('https://images.pexels.com/photos/1084542/pexels-photo-1084542.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  background-repeat: no-repeat;
  background-position: 50% 0;
  -ms-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;

【讨论】：

以上是关于全屏响应背景图片的主要内容，如果未能解决你的问题，请参考以下文章