footer always at the bottom; background image for contents and footer - html

My html page has a title and a menu at the top, the contents section under the menu, and the footer at the bottom. The footer must always be at the bottom of the window, no matter what the content size is (except for when the content if higher than the window, in which case the footer must be underneath the content). I have markup and CSS rules that implement this (below).
But I need to also show a background image over the contents and the footer. That is, the image must cover the entire screen but the title/menu area. I have no idea how to accomplish this. In my code below (as well as on jsfiddle at http://jsfiddle.net/EGj54/) I have attached the background to the whole page, but I want it to show only for the contents and the footer.
Could someone help me please?
<div id="main">
<div id="navbar">
<div id="caption"><span>Test</span></div>
<ul id="sections">
<li><span>current</span></li>
<li>next</li>
</ul>
</div>
<div id="content">content</div>
<div class="push"></div>
</div>
<div id="footer">footer</div>
* {
margin: 0;
}
html, body {
height: 100%;
}
ul {
list-style-type: none;
}
ul li {
display: inline;
}
#caption {
font-weight: bold;
}
#footer, .push {
color: white;
height: 25px;
}
#sections {
background-color: #aaaaaa;
}
#main {
height: auto !important;
margin: 0 auto -25px; /* bottom margin is negative value of #footer height */
min-height: 100%;
}
#main {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/800px-Clouds_over_the_Atlantic_Ocean.jpg');
background-size: cover;
}

Your footer will stay at the bottom since you placed it last with your divs, no problem with that as long as you will not use float or absolute positioning. Move your style in background to body to solve your problem:
body {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/800px-Clouds_over_the_Atlantic_Ocean.jpg');
background-size: cover;
}

can you simply adjust the vertical position of the background images?
background-position: left 20px;

You can set the background-position of the image
#main {
background-image: url('yourimage.jpg');
background-size: cover;
background-position: 0 100px; // 100px or whatever the height of your navbar is
}
Alternatively, You can cheat like this ;)
#content {
height: 100px;
background: url('yourimage.jpg') top;
}
#footer {
height: 50px;
background: url('yourimage.jpg') bottom;
}

Related

Responsive Padding with Background-Image

I'm trying to make a full width and height responsive home page with an image. The problem I'm encountering are padding issues. I cannot get padding to work when I display an image in css under 'background-image: url();'. The only thing that works is the margin property but it is not responsive to the height and only shows the top and the rest as I scroll down but I am trying to have the padding be responsive to the resizing of the height of the page. To show you guys more of what I am trying to achieve, I included 2 examples, the top with what I want and the second with the problem I'm facing. I've managed to get responsive padding to work while I place the img tag in my HTML but I cannot do so with the background-image property as I'm trying to put text on it.
.test img{
width: 100%;
max-width: 100%;
height: 100vh;
padding: 10px;
}
.wrapper {
background-image: url(https://images4.alphacoders.com/432/43258.jpg);
height: 100vh;
width: 100%;
max-width: 100%;
background-size: cover;
background-position: center center;
}
<div class="test">
<img src="https://images4.alphacoders.com/432/43258.jpg" alt="">
</div>
<div class="main">
<div class="wrapper"></div>
</div>
https://jsfiddle.net/u9t4hqqq/
You can use margin, you just need to account for the vertical margin that will push your 100vh height out of 100vh, and you can do that with calc()
body {margin:0;}
div {
margin: 10px;
background: url('http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg') center top no-repeat / cover;
height: calc(100vh - 20px);
}
<div></div>
Or you can wrap the element in another element, apply padding to the outer element, and use border-box to keep the padding inside of 100vh.
body {margin:0;}
section {
height: 100vh;
box-sizing: border-box;
padding: 10px;
}
div {
background: url('http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg') center top no-repeat / cover;
height: 100%;
}
<section><div></div></section>
Padding does work, but you can't see it. If you put content within the div, you'd see the effects of any padding. What you want is to apply the padding to the parent, in this case .main. Padding by definition can not impact the background of the element it's applied to but rather where children sit in relation to the element's borders.
If that is somehow insufficient, you can simulate the look with box-sizing: border-box and use a 10px border that matches the body background.
Which raises the point that you may want to review the box model to learn better what margin and padding are and how they relate to elements:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
madrougebeauty.com uses a "frame" that is layed on top of all elements; it has nothing to do with padding.
To achieve something like it, look at the following:
.wrapper {
background-image: url(https://images4.alphacoders.com/432/43258.jpg);
background-size: cover;
background-position: center center;
height: auto;
min-height: 100vh;
color: #fff;
box-sizing: border-box;
/* Give your content padding so nothing gets hidden under the frame */
padding: 2em;
}
.frame {
position: fixed;
z-index: 9999;
background-color: yellow;
}
.top, .bottom {
width: 100%;
height: 10px;
left: 0;
}
.left, .right {
width: 10px;
height: 100vh;
top: 0;
}
.top {
top: 0;
}
.right {
right: 0;
left: auto;
}
.bottom {
bottom: 0;
top: auto;
}
.left {
left: 0;
}
<!-- These 4 elements build a frame on top of the screen -->
<div class="frame top"></div>
<div class="frame right"></div>
<div class="frame bottom"></div>
<div class="frame left"></div>
<div class="wrapper">
<h1>Headline</h1>
<p>Your content here.</p>
</div>

Can't get image to 100% width (not due to small container, not background)

I have got this image that I want to display on my front page.
It is on top of my background image (which has a working 100% span)
But the image on top of it has a little border of +- 5px showing the background. The border needs to go :)
My CSS looks like this: (with the navigation that is fixed to top)
body {
background: url(backgr_1.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center bottom;
background-size:cover;
}
nav {
position:fixed;
z-index: 100;
top:0;
left:0;
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 58px;
font-family: 'chineserocks';
font-size: 3em;
}
ul {
list-style-type: none;
margin-top: 0;
}
li {
display: inline-block;
}
a {
color: #FFFFFF;
text-decoration: none;
margin-left: 4em;
}
#backroots_head {
width: 100%;
}
#head_section {
width: 100%;
}
and my HTML like this:
<body>
<section id="head_section">
<img id="backroots_head" src="backroots_head.jpg">
</section>
and all the rest of the html etc.
So that is basic stuff.
What i have tried:
- Adding a max width of 3000px
- margin 0, padding 0
- width 105% (yes i'm desperate xD)
- position fixed (worked, but then you can't scroll to the content that is under the picture.
- adding a width 100% div around it
There is no container around the image or section with a set width, so that isnt the problem too.
Im really stuck on this one. Any solution is welcome.
Kind regards
I set the body margin to 0 to get rid of the spaces around the image. It scales 100% for me.
<html>
<head>
<style>
body { margin: 0px; }
#backroots_head { width: 100%; }
</style>
</head>
<body>
<section id="head_section"><img id="backroots_head" src="backroots_head.jpg"></section>
</body>
</html>

How to strecth background images behind max-width content divs

What is the correct way to have header and footer backgrounds that stretch out to fill the broswer window no matter how big the viewport is stretched to while having the main content (header, content and footer) only stretch to a max-length like http://moz.com
I tried using the background shortcut with 3 seperate images positioned and repeat-x but is there a better way?
Elaborating on Stefan Dunn's comment, try background-size: cover;
Thanks Josh, Stefan and Ty. Not sure how I would impliment background-sizeJust add it for each and set to 100%?
Is the below method a clumbsy workaround to a layout that has a standard method?
<header>
<div id="header-content">
.......
</div>
</header>
<section> <!-- This is the main content area for each page -->
<div id="main-page-content">
........
</div>
</section>
<footer>
<div id="footer-content">
........
</div>
</footer>
header {
width: 100%
background: url(images/headerbg.png) center repeat-x;
}
#header-content {
width: 80%;
margin: 0 auto;
padding: 30px;
}
section {
width: 100%
background: url(images/main-contentbg.png) center repeat-x;
}
#main-page-content {
width: 80%;
margin: 0 auto;
padding: 30px;
}
footer {
width: 100%
background: url(images/footerbg.png) center repeat-x;
}
#footer-content {
width: 80%;
margin: 0 auto;
padding: 30px;
}

CSS tricks to design a page

I need to design a page with border images on each side. I need the page to fit on 1280x1024 and 1024x768 resolutions. Is it possible to have a fixed size for the center div and crop the border images in the lower resolution ?
1280x1024 : border-200px center-840px border-200px
1024x768 : border-72px center-840px border-72px
I've made two images with 200px X 5px. I've tried to use the float property without success.
So I've made it this way so far, it works in 1280x1024 but not in 1024x768 (it's too wide).
HTML :
<body>
<div id="right"></div>
<div id="left"></div>
<div id="center">
<h1>Title</h1>
<p>Content here</p>
</div>
</body>
CSS :
html {
margin: 0px;
padding: 0;
}
body {
margin: 0px;
padding: 0;
width: 100%;
background-color: white;
overflow: auto; /*to clear the floats*/
}
#right {
clear: both;
position: absolute;
right: 0;
background-image: url('/site_media/images/border-right.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#left {
clear: both;
position: absolute;
left: 0;
background-image: url('/site_media/images/border-left.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#center {
width: 840px;
margin: 0px auto;
padding-left:10px;
padding-right:10px;
}
Thank you!
since the center element if fixed-width, this should be easy. the side border should be placed as 'background' in the body instead of having its own div.
correct me if im wrong, based on what i understand here, you want the side border to be cut/crop by 1024 resolution instead of shrink. how about you make a single image with 1280 width, place both side border images in it accordingly, left and right, leave the center area empty. save this as a single image (up to you if you want a transparent background), then do the followings.
<style type="text/css">
body { /* can also use your own div */
background:url(path_to_the_single_image) repeat-y top center;
}
#center {
width:840px;
margin:0 auto; /* centered the div */
background:green;
}
</style>
<body>
<div id="center">center content</div>
</body>
thats it! now you should have your fixed width element in the center, and your side-borders in the background. if you load it in 1280, you should see the full border, while if you resize down to 1024, your centered element should remain there, and your side border just now should cropped out by the browser.
let me know if this is what you looking for.. :)
if I understand correctly - what you're looking for is a bit difficult to achieve without javascript.
You can consider a bit different approach that is: can the sidebars (graphic borders) slide under the center content?
example:
<style type="text/css">
#wrapper { position: relative; }
#right, #left { width: 200px; position: absolute; background: gray; }
#right { right: 0; }
#left { left: 0; }
#center { width: 840px; margin: 0 auto; background: green; position: relative; }
</style>
<body>
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
<div id="center">center</div>
</div>
</body>

Making a div content to "bleed" on the bottom (or prevent the background image to render)

Okey so basically I have:
<div id="content">
... content of arbitrary size ...
</div>
<div id="content_bottom"></div>
The style is:
#content {
background: transparent url(content_tile.png) center top repeat-y;
width: 800px;
}
#content_bottom {
background: transparent url(content_bottom.png) center top no-repeat;
height: 200px;
width: 800px;
}
content_tile.png is a 800x1 image (tiles vertically), and has transparency.
content_bottom.png is a 800x200 image.
Basically, I need to have the content_bottom.png image to replace the #content background image only on the bottom.
Having a negative margin on #content almost works, but since both images are transparent images, they overlap, and it should not happen.
I think that I need to make #content not to render its background on the last 200px on its bottom.
Any idea how I could do that ?
If you altered your markup slightly and used javascript you could do it with an absolutely positioned div that contained only the background. Then onload, set #repeating-background's height to (#content's height - 200px):
HTML
<div id="content">
<div id="text">
This is where your content would go
</div>
<div id="repeating-background"></div>
</div>
CSS
#content {
position: relative;
width: 800px;
background: url(content_bottom.png) left bottom no-repeat;
}
#text {
position: relative;
z-index: 2;
}
#repeating-background {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 800px;
height: 1px;
background: url(content_tile.png) left top repeat-y;
}
Javascript (jQuery)
$(document).ready(function() {
$('#repeating-background').height($('#content').height() - 200);
});
create a third div, nested in #content, that is 200px height.