Jump to content
buza586

Expand Div background without adding more content

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

Share this post


Link to post
Share on other sites

 

4 hours ago, dsonesuk said:

Either adjust the height: of .first class div, or place background image in body or html elements.

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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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!

Share this post


Link to post
Share on other sites

You should replace the menu container div, and float the ul right, not individual LI elements, if you look they are in the wrong sequential order.

Edited by dsonesuk

Share this post


Link to post
Share on other sites
5 hours ago, dsonesuk said:

You should replace the menu container div, and float the ul right, not individual LI elements, if you look they are in the wrong sequential order.

How do you know I don't want the home button to the right? B)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...