EDIT:
Okay, let me simplify this because I'm obviously explaining it horrendously.
Here is a fiddle: http://jsfiddle.net/ZaSM3/2/
And here is the code:
<html>
<head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
#coverPhoto {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-image: url(http://i.imgur.com/of5DkaT.jpg);
background-repeat: no-repeat;
background-position: center center;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.push {
height: 4em;
}
.footer {
height: 4em;
background-color: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div id="coverPhoto">
<div class="wrapper">
<p>This is my content.</p>
<div class="push"></div>
</div>
</div>
<div class="footer">
<p>Footer is NOT overlayed over the image</p>
</div>
</body>
Please note that the footer is at the bottom of the page, solving the problem, but it is NOT overlayed over the cover photo. I need it to be appear over the cover photo.
I don't agree with being marked down when i did answer based upon the limited information provided.
However, the link you posted me to seemed to work fine. But there is a cleaner solution with less markup you could consider.
http://jsfiddle.net/ZaSM3/3/
HTML:
<div class="page-wrap">
<div id="content">
<p>This is my content.</p>
</div>
</div>
<div class="site-footer">
<p>Footer IS overlayed over the image</p>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
html{
background: url(http://i.imgur.com/fJYziTr.jpg) no-repeat 0 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
width: 100%;
height: 100%;
font-family: Tahoma, Geneva, Arial;
font-size: 14px;
}
#content {
width: 1000px;
height: 500px;
margin: auto;
background-color: #000;
background-color: rgba(0,0,0,0.75);
color: #FFF;
text-align: justify;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
background: orange;
z-index: 999;
height: 142px;
}
I suggest using the footer tag (). This is part of the new HTML5 specification and is much clearer.
HTML:
<footer><!--Insert whatever you need here--></footer>
CSS:
footer {
position:fixed;
bottom:0;
opacity:0.5;
}
You can change the opacity to your needs. 1 is 100% and 0.5 50%. Tht'll give you an idea. Hope it helped.
Related
i´m building a website that has different background images as you scroll down.
The problem I am facing is that each background image is not fitting the screen (in terms of the height). My images won't fit the whole screen unless I set them to have 1100px and therefore will not be fitting the 100% of my height, but let's say they will be going down, on those 20% who are going to come as I scroll down.
I would like to have my images fit 100% of the screens height, without being cut
and going bellow the page.
.container {
background-size: 100%;
background-size: cover;
margin-top: 1vh;
}
.parallax {
background: url("quem-somos.png") ;
background-size: cover;
width: 100%;
height: 100%;
}
.parallax2{
background: url("servicos.png") no-repeat center;
background-size: cover;
height: 1100px;
width: 100%;
background-attachment: scroll;
}
.parallax3{
background: url("depoimentos.png") no-repeat center;
background-size: cover;
height: 1100px;
width: 100%;
background-attachment: scroll;
}
.parallax4{
background: url("comecando.png") no-repeat center;
background-size: cover;
height: 1100px;
width: 100%;
background-attachment: scroll;
}
.parallax5{
background: url("sac.png") no-repeat center;
background-size: cover;
height: 1000px;
background-attachment: scroll;;
width: 100%;
}
.parallax6{
background: url("onde-atuamos.png") no-repeat center;
background-size: cover;
background-attachment: scroll;
height: 1000px;
width: 100%;
}
I have put all of the images inside the container
<div class="container">
<div class="parallax" id="about">
</div>
<div class="parallax6" id="operations">
</div>
<div class="parallax2" id="servicos">
</div>
<div class="parallax3" id="Depoimentos">
</div>
<div class="parallax4" id="Comecando">
</div>
<div class="parallax5" id="sac">
</div>
</div>
You can use this to set the div height to the screen height, you have to make sure html and body have a min height of the screen and also set the background-size: cover
Also .image1 .image2 in my case are direct children of the body element in my example
html, body {
margin: 0;
width: 100%;
min-height: 100vh;
}
.image1 {
width: 100%;
height: 100vh;
background-color: red;
}
.image2 {
width: 100%;
height: 100vh;
background-color: blue;
}
You can have the child divs do the heavy lifting by setting heights to 100vh - the margin on top of the container.
https://jsfiddle.net/x2h0mat7/
Here's a working example with the original html:
<div class="container">
<div class="parallax" id="about">
</div>
<div class="parallax6" id="operations">
</div>
<div class="parallax2" id="servicos">
</div>
<div class="parallax3" id="Depoimentos">
</div>
<div class="parallax4" id="Comecando">
</div>
<div class="parallax5" id="sac">
</div>
</div>
and the css:
.container {
margin-top: 1vh;
}
.container>div {
min-height: calc(100vh - 1vh);
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
z-index: 2;
display: flex;
overflow: hidden;
background-attachment: scroll;
}
.parallax {
background: url("https://via.placeholder.com/1600x1200/0000FF/");
}
.parallax2 {
background: url("https://via.placeholder.com/1600x1200/990000/") no-repeat center;
}
.parallax3 {
background: url("https://via.placeholder.com/1600x1200/ffee66/") no-repeat center;
}
.parallax4 {
background: url("https://via.placeholder.com/1600x1200/66eeff/") no-repeat center;
}
.parallax5 {
background: url("https://via.placeholder.com/1600x1200/ee66ff/") no-repeat center;
}
.parallax6 {
background: url("https://via.placeholder.com/1600x1200/ffee66/");
}
this is my code:
body{
background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.header{
height:2em;
width:100%;
position:fixed;
top:0; left:0;
background-color:white;
}
.main{
width:100%;height:10em;
margin-top:5em;
background-color:white;
}
.mainPanel{
width:50%;
margin:auto;
background-color:yellow;
height:5em;
}
<html>
<body>
<div class="header">
</div>
<div class="main">
<div class="mainPanel">
</div>
</div>
</body>
</html>
I want that the yellow div is transparent and shows the background image of body. That the yellow div go trough the white div behind it and shows the background image of body. Is that possible? I hope it comes clear what i meant.
The only workaround I can think of would involve breaking your white box into three rectangles and arranging them to form a window of sorts. Here, try this out:
body {
background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat center center fixed;
background-size: cover;
}
.header {height:2em;width:100%;position:fixed;top:0; left:0;}
.main {
width: 100%;
height: 10em;
margin-top: 5em;
}
.mainPanel{
width:50%;
margin:auto;
height:5em;
}
<html>
<body>
<div id="left-rectangle" style="background-color: white; width: 25%;height: 160px; position: absolute;"></div>
<div class="right-rectangle" style="background-color: white; width: 25%; float: right; height: 160px;"></div>
<div class="center-rectangle" style="position: absolute;margin-left: 25%;background-color: white;width: 50%;height: 80px;margin-top: 80px;"></div>
<div class="header">
</div>
<div class="main">
</div>
</body>
</html>
You could simply repeat the background, and since it has a fixed position, it will be exactly like the body background and you will not notice a difference.
body, .mainPanel {
background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat center center fixed;
background-size: cover;
}
Simply extend the background of body to .mainPanel to create the illusion.
Demo: jsFiddle
html, body {padding: 0; margin: 0;}
body, .mainPanel {
background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat center center fixed;
background-size: cover;
}
.header {
height: 2em;
width: 100%;
position: fixed;
top: 0; left: 0;
background-color: #EEE;
}
.main {
width: 100%;
height: 10em;
margin-top: 5em;
background-color: white;
}
.mainPanel {
width: 50%;
margin: auto;
height: 5em;
border:1px dashed #CCC; /* just for demo */
}
<div class="header">header</div>
<div class="main">
<div class="mainPanel">
</div>
</div>
I am beating my head against a wall on this one. I am trying to design a landing page, with a full screen picture background, that stops at the footer. So essentially I believe my trouble lies in creating a sticky footer..
I have been following the tutorial at this website.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<code omitted>
</head>
<body>
<div id="wrapper">
<div id="bkgcontainer"></div>
<div class="push"></div>
</div>
<footer>
<address>
<code omitted>
</address>
</footer>
</body>
</html>
My CSS:
* {
margin: 0;
}
html, body{
height: 100%;
background-color: black;
}
#wrapper {
width: 100%;
position: relative;
min-height: 100%;
margin: 0px auto -25px;
}
footer, .push {
height: 25px;
}
#bkgcontainer {
width: 100%;
height: 100%;
position: relative;
margin: 0 auto -25px;
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
}
footer{
text-align: center;
margin: 0px auto;
color: white;
position: relative;
}
As far as I can tell, I have everything set right. But when I launch the website, 'bkgcontainer' takes up the full screen and the bottom margin '-25' is below the view-port. I'm at a loss, any ideas? Fixes or better ways, I'm all ears.
You can make the picture background take up 90% of the screen height, make the footer 10%, and pin the footer to the bottom of the page:
//remove `footer`
.push {
height: 25px;
}
//set height to 90%;
#bkgcontainer {
width: 100%;
height: 90%;
position: relative;
margin: 0 auto -25px;
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
}
//change height to 10%, change to fixed position, and set bottom to 0. Oh, set width, too.
footer{
height: 10%;
text-align: center;
margin: 0px auto;
background-color: white;
position: fixed;
bottom:0;
width:100%;
}
See this jsfiddle to see how it looks.
Here's a completely different solution. Note that it doesn't contain a modification of your code, however, it is an entirely different solution (out of several solutions) to get a header and a footer
HTML:
<header>
this is header
</header>
<div id="content">
hello
</div>
<footer>
this is footer
</footer>
CSS:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 60px;
background: green;
position: fixed;
top: 0;
}
#content {
width: 100%;
height: 100%;
background-image: url("http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/Beautiful-Wallpapers-7.jpg");
background-size: 100%;
}
footer {
width: 100%;
height: 60px;
background: blue;
position: fixed;
bottom: 0;
}
Here's the fiddle: http://jsfiddle.net/harshulpandav/7S4Xx/214/
You can try a position:fixed for footer class
footer{
text-align: center;
margin: 0px auto;
color: white;
position: fixed;
bottom:0;
width:100%
}
You should change the min-height value on the #wrapper to either a smaller percentage value or a minimum pixel value to allow for the footer to display. What you have done is tell the browser that you want that div to extend no less than the full screen.
I have a container and i have two sections that i want to display one at a time. something like a scrolling webpage like This!
Basically how do i make the first div element (section) have its own background that fits to screen and the second section should have just a blank screen. Thank you very much ! please examples will be gladly appreciated :)
This is my css:
* {
box-sizing: border-box;
/* look this up */
}
body {
margin: 0;
}
/* style what the sections have in common */
.container {
width: 100%;
float: left;
top: 0px;
left: 0px;
text-align: center;
padding: 1em;
}
.about {
float:left;
height:auto;
width:100%;
background: url(10.jpg);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:100%;
}
/* target specific sections */
.heads {
background-color: red;
float:left;
height:auto;
width:100%;
}
This is my Html:
<body>
<section class="container about">
About
</section>
<section class="container heads">
About
</section>
</body>
.container{
width: 100%;
float: left;
text-align: center;
padding: 1em;
background-position: center;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:100%;
}
.about{
background: url(10.jpg);
}
.heads{
background-color: red;
}
You should set your body and HTML height to 100%:
body, html {
height: 100%;
margin: 0;
}
Then change your .about to:
.about {
float:left;
height:100%;
width:100%;
...}
NOTE: If this is what you were looking for please remember to mark it as correct.
add this in your .about class
background-size:100% 500px;
I am making a page whose layout is divided into 3 sections : Header, main body, and footer. I want a background image in my main body. Now when i try to do that, i am experiencing a problem. The image is not covering the complete area. It leaves some area at the bottom. Check this fiddle for proper explanation.
Here is what i have done so far:
HTML
<html>
<head>
<title>Gehri Route: Login, Signup</title>
</head>
<body>
<div class='headercontainer'>
<div class='header'>
header
</div>
</div>
<div class='mainbodycontainer'>
</div>
<div class = 'footercontainer'>
<div class='footer'>
footer
</div>
</div>
</body>
</html>
CSS
body
{
background-color: rgb(250,250,250);
margin: 0;
padding: 0;
}
.headercontainer
{
background-color: rgb(245,245,245);
min-width: 999px;
height:60px;
border:1px solid #666;
left: 0;
}
.mainbodycontainer
{
margin: 0 auto;
overflow: auto;
background-color: rgb(250,250,250);
min-width: 999px;
padding: 80px 0;
background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.footercontainer
{
background-color: rgb(245,245,245);
width: 100%;
height:82px;
border: 1px solid #666;
left:0;
position: fixed;
bottom: 0;
}
.header
{
margin: 0px auto;
width: 999px;
}
.mainbody
{
margin: 0px auto;
width: 999px;
}
Also please help me to make this responsive design.
You need to force a height to the body and html tag of 100%. If there is no content the background won't appear because the height of the element (.mainbodycontainer) is 0. In your case it was 80px because you applied padding.
check this fiddle. http://jsfiddle.net/olwez/ncLZN/
I added a height to the body and html tags of 100% and a minimum height of 100% to the .mainbodycontainer div. That way you don't have to manually set the heights or have content within the .mainbodycontainer for the image to behave as you wish.
I just threw in an overflow: hidden; on the body tag so that scrolling is gone.
Here is the full css.
html { height: 100% }
body
{
background-color: rgb(250,250,250);
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.headercontainer
{
background-color: rgb(245,245,245);
min-width: 999px;
height:60px;
border:1px solid #666;
left: 0;
}
.mainbodycontainer
{
margin: 0 auto;
overflow: auto;
background-color: rgb(250,250,250);
min-width: 999px;
min-height: 100%;
background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.footercontainer
{
background-color: rgb(245,245,245);
width: 100%;
height:82px;
border: 1px solid #666;
left:0;
position: fixed;
bottom: 0;
}
.header
{
margin: 0px auto;
width: 999px;
}
.mainbody
{
margin: 0px auto;
width: 999px;
}
add this to your style:
width:600px;
height:450px;
.mainbodycontainer
{
margin: 0 auto;
overflow: auto;
background-color: rgb(250,250,250);
min-width: 999px;
padding: 80px 0;
background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:600px;
height:450px;
}
http://jsfiddle.net/QcUfm/9/
A background image will only show as much is revealed either by the content or a height. If your div doesn't have enough content to force the parent element big enough, you won't see it all. Also, if you are using any type of positioning like fixed, absolute or even relative and moving it, that can affect it also. I didn't look at the fiddle but those are some common issues.