Junction Project (HTML/CSS) - Browser Issue?

Don’t know why but whenever I add a background image to one of my parent html elements (body or container divs), I get this weird white space/div across the screen. Is this just a browser issue? I haven’t added any extra code other than a background-img property and a background-size property in CSS. The same issue also happened in the Move project.

Can you take a screenshot for your css code ?

can you copy both your html and css code to the forum we can run it? Diagnosing such problems from images is really difficult

thanks guys



In this stylesheet .jumbotron background is set to #eee, so if you want to have no background then in your CSS file add to .jumbotron to background: none;

Hey guys, thanks for all the feedback. Much appreciated. I removed the background colour from the .jumbotron class and the weird space was removed. Can anybody care to explain why? Is it a default bootstrap background colour property? I would love to understand why.

<!doctype html>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
    <div class="header">
      <div class="container">

    <div class="jumbotron">
      <div class="container">

    <div class="supporting">
      <div class="container">

/* CSS */

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Merriweather', serif;

body {
  background: url("https://s3.amazonaws.com/codecademy-content/projects/junction/bg.jpg") no-repeat center center fixed;
  background-size: cover;

.container {

/* Header */
.header {
  padding: 10px 0;

/* Jumbotron */
.jumbotron {
  position: relative;
  top: 50px;
  text-shadow: 0 2px 3px rgba(0,0,0,.4);

/* Supporting */
.supporting {
  margin-top: 40px;
  text-shadow: 0 2px 3px rgba(0,0,0,.4);

jumbotron has a background-color by default, you simple made it transparent.