buza586 Posted April 22, 2017 Share Posted April 22, 2017 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted April 22, 2017 Share Posted April 22, 2017 Either adjust the height: of .first class div, or place background image in body or html elements. Link to comment Share on other sites More sharing options...
buza586 Posted April 23, 2017 Author Share Posted April 23, 2017 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. Link to comment Share on other sites More sharing options...
Ingolme Posted April 23, 2017 Share Posted April 23, 2017 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 More sharing options...
dsonesuk Posted April 23, 2017 Share Posted April 23, 2017 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 More sharing options...
buza586 Posted April 23, 2017 Author Share Posted April 23, 2017 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 More sharing options...
dsonesuk Posted April 23, 2017 Share Posted April 23, 2017 (edited) 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 April 23, 2017 by dsonesuk Link to comment Share on other sites More sharing options...
buza586 Posted April 23, 2017 Author Share Posted April 23, 2017 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 23, 2017 Share Posted April 23, 2017 Because usually how they are set out in the menu layout is the order that is usually required. My solution makes it more manageable. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now