I have a background I am trying to place behind my header, but I am having trouble.
All my content is sitting behind the background.
Can anyone give me some insight on what I am doing wrong or missing?
* {
box-sizing: border-box;
}
.header {
background-color: white;
color: #36363F;
height: 600px;
padding: 15px;
}
<div class="header">
<h1>GETUWIRED</h1>
</div>
<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
<img src='http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg' style='width:100%;height:100%' alt='[]' />
</div>
A few ways to do this:
using css background in body (or html) - recommended
* {
box-sizing: border-box;
}
body {
background: url(http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg);
}
.header {
background-color: white;
color: #36363F;
height: 600px;
padding: 15px;
}
img {
width: 100%;
height: 100%
}
<div class="header">
<h1>GETUWIRED</h1>
</div>
z-index negative
Use z-index: -1 instead of z-index:0 in the element with background.
Also you can use the image as a background instead of img element, to have a semantic meaning.
* {
box-sizing: border-box;
}
.bg {
background: url(http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg);
position: absolute;
z-index: -1;
left: 0;
top: 0;
width: 100%;
height: 100%
}
.header {
background-color: white;
color: #36363F;
height: 600px;
padding: 15px;
}
img {
width: 100%;
height: 100%
}
<div class="header">
<h1>GETUWIRED</h1>
</div>
<div class="bg">
</div>
Note Avoid using inline styles, they are a bad practice.
Since you are stretching the image across the whole viewport, may I suggest you add it as a background-image on the body instead. It will give you a cleaner markup.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
background: url(http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg) center no-repeat;
background-size: cover;
}
.header {
background-color: white;
color: #36363F;
height: 600px;
padding: 15px;
}
</style>
</head>
<body>
<div class="header">
<h1>GETUWIRED</h1>
</div>
</body>
</html>
You should not use img tag as background, you should use css background instead. You could learn css background from here https://developer.mozilla.org/en/docs/Web/CSS/background
In your case, you should rewrite your codes like below. Make use of the body css background.
I adjust the header height to 110px, because before is too high.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.header {
background-color: white;
color: #36363F;
height: 110px;
padding: 15px;
}
body {
background-image: url('http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg');
background-size: 100% 100%;
background-position: 0 0;
}
</style>
</head>
<body>
<div class="header">
<h1>GETUWIRED</h1>
</div>
</body>
</html>
#babar-miamor
Please try changing class container property as below
margin: 0px;
padding: 0px;
height: 100%;
Hope it help.
Related
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 2 years ago.
I am working on my first ever website and it seems that I've run into a problem. I've created a footer, however it does not stay at the bottom.The footer messes up everything else in the page and distorts my items. What should I add in order make my footer stick to the bottom with causing any trouble to the rest of my page?. Here is my code.
* {
margin: auto;
padding: auto;
box-sizing: border-box;
font-family: Century Gothic;
}
header {
height: 15%;
background-size: cover;
background-position: center;
background-color: #ebebeb;
border-bottom: 5px solid #A9A9A9;
position: relative;
}
html,
body {
font-size: .80em;
margin: 0%;
padding: 0%;
color: #696969;
height: 100%;
width: 100%;
}
.footer {
background: #bfbfbf;
color: #d3d3d3;
height: 300px;
position: relative;
}
s .footer .footer-content {
border: 1px solid red;
height: 400px;
}
.footer .footer-bottom {
background: #343a40;
color: #686868;
height: 50px;
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
padding-top: 20px;
}
.footer-section-socials h1 {
margin-left: 6%;
margin-top: -1%;
font-weight: 50;
font-size: 150%;
color: black;
}
.logo-footer h1 {
padding: 1.5%;
margin-left: 3%;
font-family: Leckerli One;
color: black;
font-size: 3.1875rem;
}
.footer-about {
margin-left: 2%;
margin-right: 0%;
}
<footer class="footer">
<div class="footer-content">
<div class="footer-section-socials">
</div>
<div class="footer-section links">
</div>
<div class="footer-bottom">
© #.com | Designed by #
</div>
</div>
</footer>
Help in advance!
Your footer is not sticking to the bottom of the page, because the height of the gray div doesn't span the entire height of the webpage. What you can do to fix this problem is :
<div class='container'>
<div class='footer'>
</div>
.container{
height:100vh;
border:3px solid red;
position:relative;
}
.footer{
position:absolute;
bottom:0%;
width:100%;
height:30px;
background:gainsboro;
}
You have to use fixed position to make it stick to the bottom
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
There are several ways to do this, I added a default html structure to the snippet:
Position absolute footer and relative, 100vh min-height body:
body, html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
position: relative;
min-height: 100vh;
padding-bottom: 50px;
}
body .footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
background-color: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<section class="main"></section>
<footer class="footer"></footer>
</body>
</html>
Using flex, min height 100vh body and a section above the footer with flex 2:
body, html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
}
body .main {
flex: 2 0 auto;
}
body .footer {
flex: 0 0 50px;
display: block;
width: 100%;
background-color: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<section class="main"></section>
<footer class="footer"></footer>
</body>
</html>
Using a 100vh min-height body, a section with calc height and a fixed height footer:
body, html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: block;
}
body .main {
min-height: calc(100vh - 50px);
}
body .footer {
height: 50px;
display: block;
width: 100%;
background-color: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<section class="main"></section>
<footer class="footer"></footer>
</body>
</html>
Fixed position footer (always visible in viewport):
body, html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body .footer {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
background-color: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<section class="main"></section>
<footer class="footer"></footer>
</body>
</html>
You should normally have a navigation bar, a page body and a footer.
The page body should take up all the space between the navigation and the footer.
Least hackish way is using Flex. Try the following:
body {
min-height: 100vh;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.navigation {
height: 60px;
width: 100%;
background: blue;
}
.content {
height: 100%;
width: 100%;
display: flex;
flex-grow: 1;
}
.footer {
height: 100px;
width: 100%;
background: red;
}
<body>
<div class="navigation"></div>
<div class="content">Test content</div>
<div class="footer"></div>
</body>
When I create the new page & set background-color: black, it is coming according to content, not on the whole window.
I don't want to put that property into HTML.
I mean size of the body is generating according to content.
How can I fix that?
I can't put position: fixed in the body because sometimes I have to scroll on other pages & also I have footer stick to the bottom.
This is HTML:
<html>
<head>
</head>
<body ng-cloak>
<notifications-bar class="notifications"></notifications-bar>
<div ng-controller="MainCtrl as main">
<ng-include src="'app/layout/header.html'"></ng-include>
<div ng-view></div>
</div>
<footer class="footer_body">
<ng-include src="'app/layout/footer.html'"></ng-include>
</footer>
<spinner></spinner>
</body>
</html>
This is CSS:
html, body {
margin: 0;
padding: 0;
}
html {
position: relative;
min-height: 100%;
}
body
{
min-height: 100% !important;
margin-bottom:60px;
}
.footer_body {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 0px;
height: 60px; /* height of footer */
background-color: #666666;
}
Update you CSS property html body background color like this
html, body {
background-color:#aadb1e;
}
Have you tried to set a background-color to .html in your css file ?
html, body {
margin: 0;
padding: 0;
}
html {
position: relative;
min-height: 100%;
}
body
{
min-height: 100% !important;
margin-bottom:60px;
}
.special-bg{
background-color: cyan;
}
.footer_body {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 0px;
height: 60px; /* height of footer */
background-color: #666666;
}
<html class='special-bg'>
<body>
<notifications-bar class="notifications"></notifications-bar>
<div ng-controller="MainCtrl as main">
<ng-include src="'app/layout/header.html'"></ng-include>
<div ng-view></div>
</div>
<footer class="footer_body">
<ng-include src="'app/layout/footer.html'"></ng-include>
</footer>
<spinner></spinner>
</body>
</html>
I'm having trouble dividing a page into header, content and footer.
I followed one of the topics here on stackoverflow. However, when I try adding anything to the content part all of my content appears below the footer element. So far, this is my code.
Can anyone explain what I am doing wrong and what is the reason behind it?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
//Removed
</head>
<body>
<div class="main-wrapper">
<header>
<?php
require('header.php');
?>
</header>
<section class="page-content">
yeah
</section>
<footer>
<?php
include('footer.php');
?>
</footer>
</div>
</body>
</html>
Here's my CSS
body, html {
width: 100%;
height: 100%;
background: #ddd;
padding: 0;
margin: 0;
}
.main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0;
position: relative;
}
article {
background-color: white;
}
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #555;
height: 55px;
}
.page-content {
width: 100%;
height: 100%;
}
.nav-bar {
width: 100%;
background: white;
text-align: center;
}
The page-content appears below footer, even when I set it's position to absolute. What am I doing wrong?
Thank you for all your help.
You should add
<div style="clear:both;"></div>
between your section and footer tag and see if that helps
.page-content {
box-sizing:border-box;
padding:0 0 55px; /* make space for footer */
}
The code:
<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>
How can I place the footer at the bottom of the page? I've tried experimenting with padding, bottom and margin but I haven't been very successful so far. Can someone tell me how to place the footer at the bottom of the page? Thanks
you can do this one sir:
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: fixed;;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
text-align:center;
}
HERE MY CODE
You need to set body height to 100%. Currently the body covers only upto the content you have. There was no explicit height set for the body element.
Since body needs to calculate 100% of the parent element, set html height to 100% as well.
html,
body {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>
If you aim to "fix" your element to the bottom of the screen, set:
position: fixed;
bottom: 0;
On a side note, it might be a good idea for you to start learning about HTML5 elements like "footer" instead of using divs for everything. Also note that id's are unique and styling is best applied in mass/generically (use classes instead).
I'm creating a webpage with two stacked divs. The first div is a banner and the second div is the content. The problem I'm facing is I want the second div to stretch to the bottom of the page without creating a scrollbar. I could wrap the whole thing in another div and set overflow to hidden, but the second div will be filled with content and there's a possibility that the content could stretch beyond the screen. Here is what I've written so far:
<html>
<head>
<title>test</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
background-color: blue;
height: 100%;
}
#banner {
background-color: red;
width: 100%;
height: 180px;
}
#content {
background-color: #0F0F10;
width: 100%;
height: 100%;
color: #FFF;
}
</style>
</head>
<body>
<div id="banner"></div>
<div id="content"></div>
</body>
</html>
You can do it pretty easily by wrapping your #banner inside your #content container:
<div id="content">
<div id="banner"></div>
<p>Your content</p>
</div>
Then in your CSS, you have to explicitly set the padding and margins on the body and html to 0 (the wildcard doesn't work cross-browser):
*, html, body {
margin: 0px;
padding: 0px;
}
html, body {
background-color: blue;
height: 100%;
}
#banner {
background-color: red;
height: 180px;
}
#content {
background-color: #0F0F10;
min-height: 100%;
color: #FFF;
}
The 2 other changes that I made were to remove the width: 100% rules (since the div's are block elements and will default to that) and change your height: 100% to min-height: 100% since this will allow your #content to grow with its content.
If you need to support IE6, you'll have to serve it height: 100% with conditional comments, on account of IE6 not understanding min-height, but treating height as min-height.
You can see it in action here. Just delete the filler text and you'll see the scrollbar disappears when it's not needed anymore.
I recommend using a <table>. Set the height of the table to be 100%. Then set the height of the first cell to 180px.
You will need to ignore the distant howls of the Semantic Web when you do this, however.
Here is some sample code:
<html>
<head>
<title>test</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
background-color: blue;
height: 100%;
}
table {
width:100%;
height:100%;
border-collapse:collapse;
}
td#banner {
background-color: red;
height: 180px;
}
td#content {
background-color: #0F0F10;
color: #FFF;
}
</style>
</head>
<body>
<table>
<tr><td id="banner"></td></tr>
<tr><td id="content"></td></tr>
</table>
</body>
</html>
You can achieve the same without restructuring the HTML. If you don't want to wrap the banner in the content (e.g. for semantic reasons), you should use absolute positioning on the content. Instead of setting the height to 100% you set top:181px and bottom:0 in CSS.
<html>
<head>
<title>test</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
background-color: blue;
height: 100%;
}
#banner {
background-color: red;
width: 100%;
height: 180px;
}
#content {
background-color: #0F0F10;
width: 100%;
position: absolute;
top: 181px;
bottom: 0px;
color: #FFF;
}
</style>
</head>
<body>
<div id="banner"></div>
<div id="content"></div>
</body>
</html>