全屏响应式背景图片 [英] Full-screen responsive background image

问题描述

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

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

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

HTML:

<div class="main-header"><div class="row"><div class="large-6 large-offset-6 columns"><h1 class="logo">BleepBleeps</h1><h3>一群小朋友<br>让育儿更轻松</h3>

<!-- END large-6 large-offset-6 列--></div><!-- END ROW --></div><!-- END MAIN-HEADER -->

CSS:

.main-header {背景图片:网址(../img/bb-background2.png)；背景重复:不重复；背景位置:中心；背景尺寸:封面；宽度:100%；高度:100%；}h1.logo {文本缩进:-9999px；高度:115px；保证金最高:10%；}

解决方案

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

//HTML<img src="images/bg.jpg" id="bg" alt="">//CSS#bg {位置:固定；顶部:0；左:0；/* 保持长宽比 */最小宽度:100%；最小高度:100%；}

或

img.bg {/* 设置规则以填充背景 */最小高度:100%；最小宽度:1024px；/* 设置比例缩放 */宽度:100%；高度:自动；/* 设置定位 */位置:固定；顶部:0；左:0；}@media screen and (max-width: 1024px) {/* 特定于此特定图像 */img.bg {左:50%；左边距:-512px；/* 50% */}}

或

//HTML<img src="images/bg.jpg" id="bg" alt="">//CSS#bg { 位置:固定；顶部:0；左:0；}.bgwidth { 宽度:100%；}.bgheight { 高度:100%；}//jQuery$(window).load(function() {var theWindow = $(window),$bg = $("#bg"),纵横比 = $bg.width()/$bg.height();函数 resizeBg() {if ((theWindow.width()/theWindow.height()) < aspectRatio ) {$bg.removeClass().addClass('bgheight');} 别的 {$bg.removeClass().addClass('bgwidth');}}theWindow.resize(resizeBg).trigger("resize");});

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.

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?

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

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

解决方案

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

});

这篇关于全屏响应式背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！