background image not centering / keeps repeating

Question

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>

Have you tried adding `background-repeat: no-repeat;` – NewToJS Feb 19 '18 at 02:10 — NewToJS, Feb 19 '18 at 02:10

score 0 · Answer 1 · answered Feb 19 '18 at 02:10

0

Because you not set the background-repeat:no-repeat; try following code:

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;
background-repeat:no-repeat; // Added
min-height:100vh; // Added for ensure capture window size
}

answered Feb 19 '18 at 02:10

Hanif

3,739
1
12
18

1

ya I've tried background no repeat also, I think the min-height:100vh; was what I was looking for thanks – hellothere Feb 19 '18 at 02:13
@hellothere this is wrong and it has nothing to do with background-repeat ... the min-height fixed this for another reason, check my answer for more information – Temani Afif Feb 19 '18 at 08:51

Temani Afif · Accepted Answer · 2018-02-19T22:51:43.460

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/

Milan Panigrahi · Answer 3 · 2018-02-20T05:12:19.560

-1

Just put background-repeat: no-repeat and background-size: cover . It will work

background-image: url(http://placehold.it/800x300);
background-repeat: no-repeat;
background-size: cover;
background-position: center;

edited Feb 20 '18 at 05:12

answered Feb 19 '18 at 09:06

Milan Panigrahi

546
9
11

background image not centering / keeps repeating

3 Answers3

Linked