I'm aware that similar questions have been asked over and over, but I have yet to come across a solution that actually works for me. Picture the following problem.
Situation:
The body has a non-fixed background image that repeats both vertically and horizontally.
There is supposed to be a second transparent background image laid over the first.
Constraints:
The second background is supposed to stretch across the document, just like the background on the body. Mind: Not just the viewport, the entire document.
Even when the body height is smaller than the document height (i.e. no scrollbar), the second background must stretch to the bottom of the viewport (so any solution working with 100% html and/or body height is out of the question).
The second background's position cannot be fixed, because that would cause some sort of parallax effect when scrolling. The illusion that both images are actually one must be upheld.
It is possible for the body to have margin and/or padding. Both backgrounds should cover the entire document regardless.
Using a second background image on the body ("background-image: url(), url();") is not an option for backward compatibility reasons.
No JavaScript.
No actually merging the two images into one, obviously. :)
I have brooded over this problem for a while now and have gotten to the conclusion that this is impossible using only HTML and CSS2. I'd very much like to be proven wrong.
You should place a background image for two separate which covers each the whole document :
<html>
<head>
<style>
.firstbackground {
position:absolute;
left:0;
top : 0;
width : 100%;
min-height : 100%;
background: url('first.png') repeat;
}
.secondbackground {
width : 100%;
min-height : 100%;
background:url('second.png'); /* may be transparent, but why add a background then ;-) */
}
</style>
</head>
<body>
<div class="firstbackground">
<div class="secondbackground">
long content
</div>
</div>
</body>
</html>
CSS3 allows multiple backgrounds that are separated by commas, for eg:
background: url('topNonFixedBG.png'), #000 url('mainBG.png') no-repeat fixed top center;
http://jsfiddle.net/hs2WT/1/
Just use multiple divs...
CSS:
html {
height: 100%;
}
body { height: 100%;}
.wrapper1 {
width: 100%;
height: 100%;
background: url('http://khill.mhostiuckproductions.com/siteLSSBoilerPlate//images/nav/hixs_pattern_evolution.png');
}
.wrapper2 {
width: 100%;
height: 100%;
background: url('http://khill.mhostiuckproductions.com/siteLSSBoilerPlate//images/nav/yellow1.png');
}
.content { color: #fff; }
HTML:
<div class="wrapper1">
<div class="wrapper2">
<div class="content">
<p>Some Content</p>
</div>
</div>
</div>
let the secend background to have the position:absolute;
body{
background:url("http://jsfiddle.net/css/../img/logo.png") #000;
}
#secBg{
background:url("http://placehold.it/350x150") ;
position:absolute;
min-height:500%;
min-width:100%;
}
<html>
<body>
<div id="secBg">
</div>
</body>
</html>
http://jsfiddle.net/5sxWB/
Related
I have a html page that is separated by top, left, and right frames via css not via html frameset tag. I want to add a small image to a top frame yet be able to control background color of the top frame. The problem I ran into is I see an image added, but no background color I specified.
css file
#foo {
background-color : blue;
background-image : url("foo.png");
width : 100px;
height : 50px;
}
html file
<html>
...<body>
<div id="foo"></div>
...</body></html>
[update with an answer]
After reading replies from Marcelo and Paulie_D to this question, I realized that what I had to do (first correcting my question and adding an answer here).
<html>
...<body>
<div id="container">
<div id="foo"></div>
</div>
#container {
background-color : blue;
}
#foo {
background-image : url('foo.png');
width : 100px;
height : 50px;
}
Absolutely provided the image has transparency..
div {
width: 200px;
height: 200px;
background-image: url(http://www.clker.com/cliparts/1/c/c/f/13902170611226395134cat_png_by_dbszabo1-d3dn2c8.png);
background-size: cover;
background-color: lightblue;
}
<div>
<h1>My Cat</h1>
</div>
I have been banging my head against the wall trying to figure out this problem and I have looked high and low for the answer and came up with similar results.
Synopsis
The problem is that I am building a website using the 960 grid and have three columns that I want to stretch at 100% at all times. Here is a fiddle for your reference: http://jsfiddle.net/Uec7h/1/
Essentially the html is like so:
<div class="contentWrapper">
<div class="container_12">
<div class="grid_2 leftSide clearfix">
Left sidebar content.
</div>
<div class="grid_7 content">
Lots of content loaded from the server.
</div>
<div class="grid_3 rightSide">
Right sidebar content.
</div>
</div>
</div>
with the CSS being like
html, body {
height: 100%;
}
.content {
height: 100%;
}
.leftSide {
height: 100%;
background-color: #000000;
}
.rightSide {
height: 100%;
background-color: #000000;
}
.contentWrapper {
height: 100%;
}
The fiddle isn't completely accurate to what I am seeing on my local version, but it's close. Seems like the left and right sidebars do not want to expand to 100% no matter what I do.
What I've Tried
Most of the answers I have found on SO have suggested to put height: 100% on the html, body elements and everything should work out fine. Adding this attribute and giving both sidebars height: 100% did work a little bit, but if the content in the middle column gets too big, it stops at a certain point and won't continue to stretch.
I have tried adding the clearfix class that comes with the 960 grid but it didn't seem to help at all.
Question
How do I get the left and right side bars height in the fiddle to be 100% no matter what content is in the middle column?
If you add the following CSS to the sidebar elements it will fill the 100% of the height.
display:block;
height:auto;
position:absolute;
top:0px;
bottom:0px;
If you place the sidebar into a wrapper div with relative positioning, the content section will be again in it's right place...
I would also set padding and margin to 0 for the body.
EDIT:
If you add height: 100% to the .container_12 it will get a real height, and children elements can have a 100% height. Notice that the sidebars will be as height as the window itself, but your content at the middle can be taller than 100%... Fiddle
Dont know the 960 grid, the EDITED solution - using visibility: visible; -
HTML
<div id="box">
<div class="vision"> sdfsdfsd </div>
</div>
CSS
#box {
float: left;
border: 2px solid red;
}
.vision {
width: 300px;
height: 600px;
visibility: visible;
}
I'm trying to design a web page these days that is a bit hard.
I have three main divs. First one for header, another for footer, and third one for main content. Header and footer must be fixed in top and bottom of the page. Their place mustn't change with resizing of browser window. Third div must be in the blank space between those divs. It can resize to fit the page with window resize.
Height of main div must exactly change, because I want to place a Google Maps in that div, so the height of this div is important.
I tried so many things, but they were not successful. Setting height of the div to 100%(while height of body and html is 100%, too) was not the answer. Using a table (with three rows, two rows with fixed height, one row with variable height, with height="100%") had some problems, too(in IE8, when I declared a doctype, the div in second row (with height:100%) didn't fit the cell anymore!).
Now I have no idea to do this work. What can I do?
Note: I prefer not to use CSS3, because compatibility with old browsers is important for me.
You could try something like this.
HTML
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
CSS
#header {
height:50px;
width: 100%;
background: black;
position: fixed;
z-index: 1;
top: 0;
}
#body {
height:100%;
width: 100%;
background: #CCC;
position: absolute;
z-index: 0;
}
#footer {
height: 50px;
width: 100%;
background: #0CF;
position: fixed;
bottom: 0;
}
Here is a fiddle - http://jsfiddle.net/6M59T/
Use a set height for your header, and use sticky footer to keep your footer a set height and aligned to the bottom as well. The space in between should then always be the right height.
You should try the well known Clearfix hack to handle height issues, because you need to "clear" parents elements to get that full 100% height you need.
This is one of the shortcomings of css. You cannot accomplish what you want using just those three divs. You need to use additional divs to offset the height of your header and footer. Here is how to solve this:
<body style="height:100%; margin:0; padding:0;">
<div id="header" style="height:50px; position: relative; z-index: inherit; background-color:lightblue;"></div>
<div id="content" style="height:100%; margin:-50px 0 -70px 0; background-color:wheat">
<div id="header-offset" style="height:50px;"></div>
<div id="footer-offset" style="height:70px;"></div>
</div>
<div id="footer" style="height:70px; background-color:lightblue;"></div>
</body>
I know it looks like a question that has been asked many times, but I just couldn't find the solution to that very specific situation.
Here's the basic wireframe of my layout :
Basically, I've got a few divs with different backgrounds that take 100% width and 100% height of the browser window. Within each and every of them is another div that takes 50% width of its parent but has a variable height, depending on its content.
I'd like all of these divs-within-a-div to be vertically align.
Now, I've read that putting a display:table-cell and a vertical-align:middle on the parent should work, but in this case it just seems to mess things up. :-/
My code:
<head>
<style>
html, body {
height: 100%;
}
body > div {
width: 100%;
height: 100%;
background-size: cover;
}
.centered {
width: 50%;
margin: 0 auto;
background: rgba(0,0,0,0.4);
padding: 50px 0 30px 0;
}
</style>
</head>
<body>
<div id="pic_1">
<div class="centered">content</div>
</div>
<div id="pic_2">
<div class="centered">content</div>
</div>
<div id="pic_3">
<div class="centered">content</div>
</div>
</body>
Thanks for your help!
Set a grandparent element to be display:table; height:100% and the parent element to be display:table-cell; vertical-align:middle.
See "Method 1" here for an example.
Also, note that your markup should not use class="centered"; use a semantic class name instead.
I'm having a problem with my site http://artygirl.co.uk/pixie/about/ I can't seem to get the footer to automatically stick to the bottom of the browser, and show the rest of my background.
Is there a solution better than using position:fixed or absolute?
I think there are possibly other styles over-riding some tests I do in firebug.
Thanks for your help
Regards
Judi
CSS:
.podbar {
bottom:0;
position:fixed;
z-index:150;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+
(document.documentElement.clientHeight-this.offsetHeight)));
height:35px;
}
HTML:
<div class="podbar">
Put your footer here
</div>
This will create a sticky that will always appear at the bottom of the page and overlay everything. Just add extra margin/padding to the bottom of your main container divs equal to the height of footer +5px so it doesn't overlay your content.
Works in pretty much every browser I have tested.
I've used the technique in this article before: CSS layout: 100% height with header and footer. It does require some extra markup in your HTML.
This is always a bit difficult, you could increase the min-height of your content area, but even then if someone has a really big screen you'd see the same thing.
You could use a bit of JavaScript to increase the min-height if someone has a huge viewport but that's still less than elegant. I'm not sure if there is a CSS-only solution to this.
If you want to try the above the code I just posted here: Is detecting scrollbar presence with jQuery still difficult? may be of use to you.
Set the height of html and body to 100%, insert a container div with min-height 100% and relative position, and nest your footer with position: absolute, bottom: 0;
/* css */
html, body {
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
<!-- html -->
<html>
<head></head>
<body>
<div id="container">
<div id="footer"></div>
</div>
</body>
</html>
Here you have an example and explanation http://ryanfait.com/sticky-footer/
Edit: Since that site is offline, here is another example of this working: https://gist.github.com/XtofK/5317209 and https://codepen.io/griffininsight/pen/OMexrW
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('nav');
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
border: 1px solid #ff00ff;
height: 50px; /* '.push' must be the same height as 'footer' */
}
footer {
}
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
You could set a min-height on #content. This won't fix the footer to the bottom of the browser specifically, but will ensure that you can always see a certain amount of the background.
As an alternative, using JavaScript, you could determine the height of the browser window and then calculate the min-height for #content, and apply it using JavaScript. This would ensure the footer is always in the correct place.
I've figured it out. Html had a css property for the background saying the colour white.
I always prefer page wise footers because of variable content on pages. I use a top margin of 5em for my footers. Most often than not, we know the height of content that can occur on pages.
If you use the Compass library for Sass, there is also another option. You can use Compass’s sticky-footer mixin (demo). It requires that the footer be fixed-height, and that your HTML has a certain general structure.
Don't use position:absolute use position:relative instead.
.footer {
z-index:99;
position:relative;
left:0;
right:0;
bottom:0;
}
position: absolute will stick it to the bottom of the screen while position relative won't ignore other divs, so it will stay at the bottom of the full page.