How do I get rid of the margins on an background image? - html

Question

http://codedifferently.com/crest.html is the page that I am working on.
This is my CSS file:
#charset "UTF-8";
/* CSS Document */
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 0px;
padding-bottom: 0px;
margin: 0px;
}
div.jumbotron {
background-image: url('img/chicago2.jpg');
background-color: #CCC;
background-size: cover;
height: 450px;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
border: none;
margin-top: 0px;
padding: 0px;
}
div.navbar navbar-default navbar-static-top" role="navigation {
border: 0px;
}
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 0px;
text-align: center;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-right: 0px;
margin-left: 0px;
}
.featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
#media (min-width: 768px) {
/* Navbar positioning foo */
.navbar-wrapper {
margin-top: 0px;
}
.navbar-wrapper .container {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar {
padding-right: 0;
padding-left: 0;
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
#media (min-width: 992px) {
.featurette-heading {
margin-top: 120px;
}
}
I am using the Jumbotron preset on the Bootstrap framework.
How do I get rid of the borders on the background image and what should I do to add margins/padding on the featurettes to take them away from the edge? I've put my jumbotron.css file at the top of my source code but it does not have any effect. Is it because of the bootstrap css files interfering?

Answer 1

I dont see borders on your example, however, I see a padding which comes in bootstrap with the Jumbotron, so if you mean borders by the space you cant work in: Jumbotron uses a padding of 30px by standard. You can overwrite that with:
.jumbotron {padding: 0px;}
However, your css on that page is different on how you posted it. Your CSS given on your page as Jumbotron class is as followed.
div.jumbotron {
background-image: url('img/chicago2.jpg');
background-color: #3FF;
background-size: cover;
height: 500px;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
border: none;
}
So either you havent updated your stylesheet to what is up there, or you made a typo somewhere.
So i checked of in the image the padding 30px, plus the padding top and bottom from your media query, and it works completely fine. Also, because you have added a container to your text, you are bound by the size of the container too. Remind that, if you think it wont outline to the left side of your screen.
Also it has some media queries on certain sizes, you might have to alter those too.\
-- edit --
Dont wanna talk out of line btw, but youre getting a internal server error on your bootstrap.min.js and your viewport work arround for IE-10 .
Last but not least. you are calling the bootstrap min file prior to the jquery file, which is a no-no, bootstrap wont function if jquery isn't called before the bootstrap file. Remove the upper bootstrap in your head, else it will causes errors, which it does btw as first error, since you also put bootstrap in yoru scripts below the footer, you re good to go