背景图像不居中/不断重复 [英] background image not centering / keeps repeating

查看：34
本文介绍了背景图像不居中/不断重复的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我目前正在尝试创建一个测试站点只是为了练习，其中一个我的背景图像不会居中/并且在我尝试使其具有响应性时不断重复.整个图像也不存在于浏览器中.任何解决方案都会有所帮助.

我试过了背景尺寸:封面；背景位置:居中；

它仍然无法正常工作.

body {字体系列:Nunito；背景图片:网址(https://images.unsplash.com/photo-1517048676732-d65bc937f952?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1005f3d0598fampe&5;aq=80);背景尺寸:封面；背景位置:中心；}.导航栏{背景色:透明；边框:0px；}.jumbotron {颜色:#C7DB8A；背景色:透明；文本对齐最后:居中；填充顶部:15%；}.jumbotron p {颜色:#5E9589；}

<!--hr 样式--><!DOCTYPE html><头><title>asdfs 主页</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz"crossEuK6ys><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- 最新编译和缩小的 JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7"cross<script src="js/home.js"></script><link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"><link rel="stylesheet" type="text/css" href="css/home.css"><link rel="stylesheet" type="text/css" href="css/fa-svg-with-js.css"><link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet"><身体><!--导航--><nav class="navbar navbar-default"><div class="容器"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#">ABXCH</a>

<div class="collapse navbar-collapse" id="bs-nav-demo"><ul class="nav navbar-nav"><li><a href="#"><i class="fas fas fa-home"></i>家</a></li><li><a href="#"><i class="far fa-question-circle"></i>关于</a></li><li><a href="#"><i class="远发握手"></i>接触</a></li><ul class="nav navbar-nav navbar-right"><li><a href="#"><i class="fas fa-sign-in-alt"></i>登录</a></li>

</nav><!--巨无霸--><div class="容器"><div class="row"><div class="col-lg-12"><div class="jumbotron"><h1>asdfas</h1><p>您的在线保险销售办事处</p><小时><p><a class="btn btn-default btn-lg" href="#" role="button">了解详情</a></p>

</html>

解决方案

问题不在于 background-repeat，而是您面临背景传播.正如你在下面的截图中看到的，你的 body 元素没有占据屏幕的整个高度，当我们遇到这种情况时，有一些特殊的背景规则:

正如您在

<小时>

有关更多信息的一些相关链接:

是什么意思;传播到视口在 CSS 规范中?

将背景应用到 和/或

https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/

I'm currently trying to create a test site just to practice, and for one my background image will not center/ and keeps repeating whenever I try to make it responsive. Also the whole image is not present within the browser. Any solution would be helpful.

I tried background-size: cover; background-position: center;

and it's still not working.

body {
    font-family: Nunito;
    background-image: url(https://images.unsplash.com/photo-1517048676732-d65bc937f952?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1005f3d059e15847f5b8e818aafe7b51&auto=format&fit=crop&w=2550&q=80);
    background-size: cover;
    background-position: center;
}

.navbar {
    background-color: transparent;
    border: 0px;
}

.jumbotron {
    color: #C7DB8A;
    background-color: transparent;
    text-align-last: center;
    padding-top: 15%;
}

.jumbotron p {
    color: #5E9589;
}

<!--lorem: ctrl+shift+L -->
<!--hr styles-->
<!DOCTYPE html>
<html>

<head>
    <title>asdfs Home</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="js/home.js"></script>

    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/home.css">
    <link rel="stylesheet" type="text/css" href="css/fa-svg-with-js.css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">

</head>

<body>
    <!--nav-->
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="#">ABXCH</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-nav-demo">
                <ul class="nav navbar-nav">
                    <li><a href="#">
                        <i class="fas fas fa-home"></i>
                        Home
                        </a></li>
                    <li><a href="#">
                        <i class="far fa-question-circle"></i>
                        About
                        </a></li>
                    <li><a href="#">
                        <i class="far fa-handshake"></i>
                        Contact
                        </a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">
                        <i class="fas fa-sign-in-alt"></i>
                        Login
                        </a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!--jumbo-->

    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="jumbotron">
                    <h1>asdfas</h1>
                    <p>Your Online Insurance Sales Office</p>
                    <hr>
                    <p><a class="btn btn-default btn-lg" href="#" role="button">Learn More</a></p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

解决方案

The issue is not with background-repeat but you are facing a background propagation. As you can see in the below screenshoot, your body element is not taking full height of the screen and there is some special rules with background when we have such situation:

As you can read in the specification:

For documents whose root element is an HTML HTML element or an XHTML html element [HTML]: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element’s first HTML BODY or XHTML body child element. The used values of that BODY element’s background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.

This means that the background is propagated to cover the area not covered by the body and thus you have the reapeted background. To avoid such behavior you can insure that the body takes full screen height by adding min-height:100vh or apply a background-color to the html element and keep the image to cover only the content part:

html {
  background:white;
}

body {
    font-family: Nunito;
    background-image: url(https://images.unsplash.com/photo-1517048676732-d65bc937f952?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1005f3d059e15847f5b8e818aafe7b51&auto=format&fit=crop&w=2550&q=80);
    background-size: cover;
    background-position: center;
}

.navbar {
    background-color: transparent;
    border: 0px;
}

.jumbotron {
    color: #C7DB8A;
    background-color: transparent;
    text-align-last: center;
    padding-top: 15%;
}

.jumbotron p {
    color: #5E9589;
}

<!--lorem: ctrl+shift+L -->
<!--hr styles-->
<!DOCTYPE html>
<html>

<head>
    <title>asdfs Home</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="js/home.js"></script>

    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/home.css">
    <link rel="stylesheet" type="text/css" href="css/fa-svg-with-js.css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">

</head>

<body>
    <!--nav-->
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="#">ABXCH</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-nav-demo">
                <ul class="nav navbar-nav">
                    <li><a href="#">
                        <i class="fas fas fa-home"></i>
                        Home
                        </a></li>
                    <li><a href="#">
                        <i class="far fa-question-circle"></i>
                        About
                        </a></li>
                    <li><a href="#">
                        <i class="far fa-handshake"></i>
                        Contact
                        </a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">
                        <i class="fas fa-sign-in-alt"></i>
                        Login
                        </a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!--jumbo-->

    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="jumbotron">
                    <h1>asdfas</h1>
                    <p>Your Online Insurance Sales Office</p>
                    <hr>
                    <p><a class="btn btn-default btn-lg" href="#" role="button">Learn More</a></p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Some related links for more informations:

What's the meaning of "propagated to the viewport" in the CSS spec?

Applying a background to <html> and/or <body>

https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/

这篇关于背景图像不居中/不断重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆