Twitter Bootstrap Question posted in

Setting background-image to fill entire window-Twitter bootstrap

i am making a website to practice my web developer skills, (i am still a beginner so be easy on me please). Anyway, i added a background image and i am making it responsive. i am using twitter bootstrap and using the media queries, Everything is working fine, except that when i reduce the web browser’s window starting at 595 height x 591 width, the background image starts to not cover the entire window. i want to know why because i am using the media queries, as twitter bootstrap says and i thought the extra small device media query cover this.

I’m really sorry for my bad English, it isn’t my first language.

Here is my website’s link.

If i am not wrong, you can see my HTML and CSS source code my right clicking on the page and clicking on the inspect option, but i am going to add the code here just in case:

body {
  /* background-color: #000000 */
  background-image: url(../images/city_landscape.png);
  background-repeat: no-repeat;
}

/********** Large devices only **********/
@media (min-width: 1200px) {
  body {
    background-size: cover;
  }
} 

/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
  body {
    background-size: cover;
  }
}

/********** Small devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
  body {
    background-size: cover;
  }
}

/********** Extra small devices only **********/
@media (max-width: 767px) {
  body {
    background-size: cover;
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cyberangel's site</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

    <!-- jQuery (Bootstrap JS plugins depend on it) -->
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/ajax-utils.js"></script>
</body>
</html>
Tags:

5

Answers


  1. 0

    That happens because the body doesn’t stretch the whole screen, since its content is not big enough.

    To solve this, you can try adding height: 100vh to your body:

    body {
  height: 100vh;
}
    Login or Signup to reply.
  2. 0

    To apply an image to the entire page, you need to also give body and html a height of 100:

    body, html
{
  height: 100%;
}

.background
{ 
  background-image: url("img_girl.jpg");

  height: 100%; 

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

    From: W3Schools

    Login or Signup to reply.
  3. 0

    Edit* If you want to dislike, can you also elaborate why?

    I would also like to add (and if anyone would like to elaborate) that you can use CSS flexbox and CSS grid which are much easier to understand, that makes Bootstrap obsolete in my opinion, but some say it’s still better than grid, still, I’m also just a beginner.

    I learn from this as it is really easy to understand:
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    https://css-tricks.com/snippets/css/complete-guide-grid/

    Login or Signup to reply.
  4. 0

    Instead of background-size: cover you can use object-fit: fill; which will fill entire screen:

    @media (max-width: 767px) {
  body {
    object-fit: fill;
  }
}

    Bear in mind that this property is not very well supported by Internet Explorer/Edge browsers.

    Login or Signup to reply.
  5. 0

    Adding height: 100vh; to the body tag will do the trick.

    body {
  /* background-color: #000000 */
  background-image: url(https://via.placeholder.com/1500x800);
  background-repeat: no-repeat;
  height: 100vh;
}

/********** Large devices only **********/
@media (min-width: 1200px) {
  body {
    background-size: cover;
  }
} 

/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
  body {
    background-size: cover;
  }
}

/********** Small devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
  body {
    background-size: cover;
  }
}

/********** Extra small devices only **********/
@media (max-width: 767px) {
  body {
    background-size: cover;
  }
}
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cyberangel's site</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

    <!-- jQuery (Bootstrap JS plugins depend on it) -->
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/ajax-utils.js"></script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search