CODEWITHSUNDEEP
htmlcssimage
MyNameIsNotSoCool
MyNameIsNotSoCool

Reputation: 133

Div Background-image keeping same height as another Div

I have a div containing a background-image, the image however does not cover the bottom of the screen, it seems to always follow the height of another div, here's an image of my problem (Colour Code: WHITE = div class="content",BLACK = div id="background",BLUE=What div id="background" should be covering.)

enter image description here

This is what I want to above image to look like

enter image description here

body {
  background-color: #82b2ff;
}

.logo {
  width: 50px;
  height: 50px;
  background-color: #000;
}


/*fonts*/

@font-face {
  font-family: cool;
  src: url('../fonts/coolvetica.ttf');
}


/*background*/

#background {
  height: 100%;
}


/*content -- where all site content will go */

.content {
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  height: 700px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}


/*navigation*/

.nav {
  border: 1px solid #ccc;
  border-width: 1px 0;
  list-style: none;
  margin: 0;
  margin-top: 150px;
  padding: 0;
  text-align: center;
  list-style: none;
  background-image: url('../img/sandstone_smooth.png');
  background-repeat: repeat;
  font-family: cool;
}

.nav li {
  display: inline;
}

.nav a {
  display: inline-block;
  padding: 10px;
  text-decoration: none;
  color: #fff;
  font-size: 20px;
  letter-spacing: 4px;
}

.nav a:hover {
  color: #E0E0E0;
}


/*links*/

a:link {
  color: #fff;
}


/* visited link */

a:visited {
  color: #fff;
}


/* mouse over link */

a:hover {
  color: #fff;
}


/* selected link */

a:active {
  color: #fff;
}
<head>
  <title>PROJECT_SPACE</title>
  <!--add the styling-->
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/reset.css">

  <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <!--change background script-->
  <script>
    $(switchBackground);
    var oFReader = new FileReader(),
      rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

    oFReader.onload = function(oFREvent) {
      localStorage.setItem('b', oFREvent.target.result);
      switchBackground();
    };

    function switchBackground() {

      var backgroundImage = localStorage.getItem('b');
      if (backgroundImage) {
        $('#background').css('background-image', 'url(' + backgroundImage + ')');
      } else {
        $('#background').css('background-image', 'url("img/grass_side.png")');
      }
    }

    function loadImageFile(testEl) {
      if (!testEl.files.length) {
        return;
      }
      var oFile = testEl.files[0];
      if (!rFilter.test(oFile.type)) {
        alert("You must select a valid image file!");
        return;
      }
      oFReader.readAsDataURL(oFile);
    }

    function removeImageFile() {
      localStorage.removeItem('b');
      switchBackground();
      location.reload();
    }
  </script>
</head>

<body>
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Skins</a></li>
    <li><a href="#">Packs</a></li>
    <li><a href="#">Servers</a></li>
    <li><a href="#">Forums</a></li>
  </ul>

  <div id="background">
    <div class="content">
      <input id="test" type="file" onchange="loadImageFile(this)" />
      <button type="button" onclick="removeImageFile()">Clear background</button>
    </div>
  </div>
</body>

Upvotes: 0

Views: 143

Answers (2)

Rounin
Rounin

Reputation: 29453

Based on the screen layouts you've displayed above, I'd be tempted to simply declare the body background-color: black:

body {
  background-color: rgba(0, 0, 0, 1);
}

If you need to, you can also give the .nav a padding-top: and (possibly) a position: absolute;.

That seems to me the most straightforward way to reproduce your desired screen layout above.

Do you think that will work for you?

Upvotes: 0

Shomz
Shomz

Reputation: 37701

The following rules should fix your background:

html, body, #background {
  height: 100%;
}

Upvotes: 1

Related Questions