Jump to content

Expand Div background without adding more content


buza586
 Share

Recommended Posts

I am trying to have my background in my division take up it's full height but it is only taking up the height of the header. I've tried setting the height but it doesn't budge. It will only fill as much content as I have in the section, the problem is I only want the one header and that's all.  I am simply trying to recreate a webpage that I made on weebly with for my class in html but I am really stuck on this.  I will post the code below and a screen shot. 

<!DOCTYPE html>
<html>
<head>
<style>

.first {
  background-image: url('trampoline.jpg');
  margin-bottom: 1000px;
  background-size: cover;
}
.column {
    float: left;
    padding: 15px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li {
    float: left;
    font-family: arial;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
  }

.footer {
    background-color: grey;
    color: white;
    padding: 15px;
}
</style>
</head>
<body>
<ul>
  <li style="float:right"><a href="#news">HOME</a></li>
  <li style="float:right"><a href="#contact">ABOUT ME</a></li>
  <li style="float:right"><a href="#about">ABOUT FAMILY</a></li>
  <li style="float:right"><a href="#about2">ABOUT SCHOOL</a></li>
</ul>
<div class="first">
<h1>Hi, I'm Mr. Buza. Technology teacher</h1>
</div>
<div class="clearfix">
  <div class="column content">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <p>You will learn more about web layout and responsive web pages in a later chapter.</p>
  </div>
</div>

<div class="footer">
  <p>Footer Text</p>
</div>

</body>
</html>

 

html issue.PNG

Link to comment
Share on other sites

Which element are you setting the height for? Setting the height of .first will  affect the height of the background image. You can also set the padding of .first (not margin) to give more space for the background within the element.

Link to comment
Share on other sites

1 hour ago, buza586 said:

I've made the height 100% and still no luck.  I've also tried adjusting the height in pixels. No luck. 

In its present state using height 100% won't work because the body element shrinks to content height also, unless you set set height of html, body elements to 100% height, then use min-height: 100% on .first div.

Using px unit on .first div should have worked? Note: the white elements text won't show above background image because it is outside the .first div containment.

Link to comment
Share on other sites

The height set worked when I put the background image in as an inline css instead of an internal css. I have little experience adding background-images so it was hard to figure out the different syntax for each.  Thanks for the help, now the height set for .first works!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...