logo标签列表

全屏响应式背景图像

cssresponsive-designfullscreenzurb-foundation
66

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

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

有人能告诉我我做错了什么吗？它已经按比例缩放，但没有显示完整的图像。我还希望在移动设备上<div class="large-6 large-offset-6 columns">在其上方显示 - 这是可能的吗？

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

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") no-repeat fixed center center / cover transparent; color: #999999; font-family: 'Lato',sans-serif; } - Cam
从主标题中删除您的背景 - Cam
我使用了"完美响应式全屏背景"，效果非常好。 - Ken Prince
15个回答
0
我已经完成了这个JavaScript函数：它会根据最显著的尺寸（宽度或高度）将您的背景图像固定到屏幕大小，而不改变图像的纵横比。
<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; background-attachment: fixed;

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

<body onload="FixBackgroundToScreen();">

你可以在我的网站www.andreamarulla.it中看到这个函数。

抱歉我的英语不好... Andrea ;-)

0

简单的全屏和居中图片 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>

0
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;
}
0
我会建议，在你的布局文件中加上一个

。
<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'替换为您自己的背景图片。

-1

通过使用以下代码：

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

希望它能正常工作。谢谢。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接