Background Image Not Centering / Keeps Repeating
Solution 1:
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 theroot element is none and its background-color is transparent, user agents must instead propagate the computed values of the backgroundproperties 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%;
}
.jumbotronp {
color: #5E9589;
}<!--lorem: ctrl+shift+L --><!--hr styles--><!DOCTYPE html><html><head><title>asdfs Home</title><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- Latest compiled and minified JavaScript --><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script><scriptsrc="js/home.js"></script><linkhref="https://use.fontawesome.com/releases/v5.0.6/css/all.css" ><linktype="text/css"href="css/home.css"><linktype="text/css"href="css/fa-svg-with-js.css"><linkhref="https://fonts.googleapis.com/css?family=Nunito:700" ></head><body><!--nav--><navclass="navbar navbar-default"><divclass="container"><divclass="navbar-header"><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-nav-demo"aria-expanded="false"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">ABXCH</a></div><divclass="collapse navbar-collapse"id="bs-nav-demo"><ulclass="nav navbar-nav"><li><ahref="#"><iclass="fas fas fa-home"></i>
Home
</a></li><li><ahref="#"><iclass="far fa-question-circle"></i>
About
</a></li><li><ahref="#"><iclass="far fa-handshake"></i>
Contact
</a></li></ul><ulclass="nav navbar-nav navbar-right"><li><ahref="#"><iclass="fas fa-sign-in-alt"></i>
Login
</a></li></ul></div></div></nav><!--jumbo--><divclass="container"><divclass="row"><divclass="col-lg-12"><divclass="jumbotron"><h1>asdfas</h1><p>Your Online Insurance Sales Office</p><hr><p><aclass="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/
Solution 2:
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
}
Solution 3:
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;
Post a Comment for "Background Image Not Centering / Keeps Repeating"