So, i'm trying to create a fixed background, actually its working. The problem is with my footer, because it is set back from the main and as the user goes scrolling it is displayed. The problem is when I put the fixed image, it is in the main with overflow: hidden, however the overflow: hidden does not work.
Here is a fiddle with my concept without the image: http://jsfiddle.net/7q8v1vsu/
And here with the fixed image: http://jsfiddle.net/L4oofkso/
And finally the code:
<div id="main">
<div id="main-content"></div>
<div id="main-background">
<img src="http://clickalifecoachblog.com/wp-content/uploads/2015/01/Child-Girl-Bear-Toy-Autumn-Leaves-Nature-Photo-HD-Wallpaper.jpg">
</div>
</div>
<div id="footer">
<div id="footer-inner"></div>
</div>
Here is the CSS:
#main{
position: relative;
background: #749B35;
margin-bottom: 70px;
height: 800px;
overflow: hidden;
z-index: 10;
}
#main-background{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
z-index: 0;
}
#main-background > img{
position: absolute;
left: 0;
top: 0;
width: 1200;
z-index: 0;
}
#footer{
position: relative;
}
#footer-inner{
position: fixed;
background: #E76144;
bottom: 0;
width: 100%;
height: 70px;
z-index: 0;
}
Anyone know if this can be fixed with just CSS or I'll have to appeal to Javascript?
Thanks
If it is a fixed background, why aren't you using a proper fixed background? http://jsfiddle.net/L4oofkso/1/
#main{
position: relative;
background: #749B35;
margin-bottom: 70px;
height: 800px;
overflow: hidden;
z-index: 10;
background: url("http://clickalifecoachblog.com/wp-content/uploads/2015/01/Child-Girl-Bear-Toy-Autumn-Leaves-Nature-Photo-HD-Wallpaper.jpg") center center no-repeat;
background-size: cover;
background-attachment: fixed;
}
http://jsfiddle.net/7q8v1vsu/
Using background-attachment: fixed; will provide you with the desired results.
Related
I am using a preloader before the website loads. also, I want to make sure that there is no scrolling happening or any scrollbar present while the contents are loaded. I'm using the below code.
<div id="preloader"></div>
#preloader
{
position: fixed;
overflow-y: hidden !important;
-webkit-scrollbar: none;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(../images/preloader.gif) center no-repeat #fff;
}
But still there is scrollbar visible and the page is scrollable.
I would add a class to the <body> during loading and remove once completed.
body.loading {
overflow: hidden;
}
enter code he
body.loading{overflow:hidden}
#preloader
{
position: fixed;
overflow-y: hidden !important;
-webkit-scrollbar: none;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(../images/preloader.gif) center no-repeat #fff;
}
<div id="preloader"></div>
re
I have a div inside a container class. The div is called panel:
.panel {
width: 100%;
background: url(img/launch1.png);
height: 80%;
background-size: cover;
background-position: center;
position: relative;
top: 0;
left: 0;
z-index: 1;
overflow: hidden;
}
The container:
.container {
position: absolute;
top: 0;
width: 100%;
left: 0;
margin: auto;
overflow: hidden;
}
Whenever I change the .panel's position to relative, it just disappears and is no longer visible. It's still in the site itself but it places itself somewhere outside of the monitor. Not sure what's wrong here. Any fresh eyes that can help me out?
Solved, the container needed a height: 100%!
I think you just have to set a height for the .container.
.container {
width: 100%;
height: 100%;
left: 0;
top: 0;
margin: auto;
position: absolute;
overflow: hidden;
}
Otherwise, you need to set a value in pixel for the .panel height, and not a percentage.
i would like to use a website with fixed header/footer and a scrollable div in between.
Only the div in the middle should scroll, no scrollbar for the whole site (that's why body overflow is hidden).
My attempt so far:
#container1 {display:block;padding-top:60px;overflow-y:scroll}
#container2 {display:none;padding-top:60px;overflow-y:scroll}
body{overflow:hidden}
The scrollbars are shown but too much on the right, also they are not scrollable?
PS: Unfortunately the switching between the DIVs don't work at JSFiddle, don't know why...
If the header and footer have explicit heights, it could be achieved simply by positioning the middle DIV absolutely and using top/bottom offsets with the respect to the height of the header/footer.
Then we can add overflow-y: auto to the middle DIV — Example:
#divLinks {
overflow-y: auto;
position: fixed;
top: 25px;
bottom: 40px;
width: 460px;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
}
#divLinks {
overflow-y: auto;
position: absolute;
top: 25px;
bottom: 40px;
left: 0; right: 0;
}
#page{height: 100%;width:480px;margin: 0 auto; position: relative;}
#header{position:absolute;top:0;left: 0;right: 0;z-index:998;height:25px;background:#5f5f5f}
#bottom{position:absolute;bottom:0;left: 0;right: 0;z-index:999;height:40px;background:#5f5f5f}
<div id="page">
<div id="header">Header</div>
<div id="divLinks">
<div id="container1">First<br><br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br></div>
<div id="container2"> second<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1</div>
</div>
<div id="bottom">First Page - Second Page</div>
</div>
The easiest way, in my opinion, is to use fixed elements, like this:
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
and
body {
margin: 0;
overflow: hidden;
}
header {
position: fixed;
top: 0;
left: 0;
background-color: red;
width: 100vw;
height: 2em;
}
main {
position: fixed;
top: 2em;
left: 0;
width: 100vw;
height: calc(100vh - 4em);
background-color: green;
y-overflow: auto;
}
footer {
position: fixed;
bottom: 0;
left: 0;
background-color: blue;
width: 100vw;
height: 2em;
}
my question is simple.
I have this page: http://vacanor.com/tests/lared
There is that image in the middle of the first section that floats on the screen. I want to stick that image in the first section preservating its position whenever I change the screen size. I've tryed everything but I can't.
Here is a video about what is bothering me: https://www.youtube.com/watch?v=U37_1cY8nAs
My html(including second section):
<div class="container-a">
<!--<div class="col-lg-12">-->
<div class="img-cover">
<center><img class="img-cover-i floating" src="img/logo-background.png" alt="Logo">
</center>
</div>
</div>
<!--</div>-->
<!-- Presentación -->
<div class="container-b">
<!-- <div class="col-lg-12">-->
<div class="ani">
<div class="intro">
<h1 class="animated fadeInDown animated-d-1 cd-headline slide">
Bienvenido a La Red
<small>
<span class="text-primary cd-words-wrapper" style="width: 207px;">
<b class="is-hidden">Construir </b>
<b class="is-hidden">Jugar</b>
<b class="is-hidden">Sobrevivir</b>
<b class="is-visible">Divertir-se </b>
</span>
<span>nunca será lo mismo.</span>
</small>
</h1>
</div>
</div>
</div>
And my css:
.img-cover {
margin: 0 auto;
width: 95%;
position: relative;
z-index: 10;
margin-top: 50px;
}
.img-cover-i {
position: relative;
}
.container-a {
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -2;
background-image: url('../img/cover-background.jpg');
background-position: center;
background-repeat: none;
background-size: cover;
}
.container-b {
margin: 0 auto;
position: absolute;
width: 100%;
height: 100%;
z-index: -3;
top:100%;
}
I did not really understand your question, so here are 3 fixes to how I understood it.
.container-a {
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -2;
background-image: url('../img/cover-background.jpg');
background-position: center;
background-repeat: none;
background-size: cover;
overflow:hidden;
}
The above code should make your image not get out of the div when resizing the screen, and below is an example of how to resize the image accordingly;
.img-cover-i {
position: relative;
height:calc(100% - 50px)
}
Also, if you want your Logo to follow the screen but not be visible outside the container a, use this code:
.img-cover-i {
margin-left:calc(50% - 237px);
position: fixed;
}
.container-a {
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -2;
background-image: url('../img/cover-background.jpg');
background-position: center;
background-repeat: none;
background-size: cover;
overflow:hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
Also, if using this code, remove the that wraps the img in the html part.
I hope this helped.
I have a div with background image put inside another div, instead of fit width parent div, it fit full screen. Please take a look my code to know clearly, sorry for bad english.
http://codepen.io/thehung1724/full/jEEgQq/
HTML
<div id="video-section" class="dark-section">
<div class="home"></div>
<div class="fullscreen-img" style="background-image: url(http://upanh.biz/images/2014/11/23/bg1.jpg)"></div>
</div>
CSS
*{
margin: 0;
padding: 0;
}
#video-section{
margin: 0 auto;
width: 1230px;
height: 500px;
}
.dark-section{
background-color: black;
}
.home{
display: table;
height: 500px;
left: 0;
position: relative;
top: 0;
width: 100%;
}
.fullscreen-img {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: auto;
left: 0;
min-height: 500px;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}
Thank in advance.
The .home div needs to be absolutely positioned in order not to "push" the background div downwards. The background div shouldn't have the fullscreen-img class, since most of those rules should be removed. It only needs height: 100% because divs have width: 100% by default since they're block elements. Of course, move the inline styles into a class or ID rules, I left them there just to show you.
That's all you need basically:
remove the .fullscreen-img class from the background div
set its height to 100% instead
make the .home div absolutely positioned
See it here: http://codepen.io/anon/pen/azzexY
*{
margin: 0;
padding: 0;
}
body {
background-color: black;
}
#video-section{
margin: 0 auto;
width: 1230px;
height: 500px;
}
.dark-section{
background-color: black;
}
.home{
display: table;
height: 500px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
<div id="video-section" class="dark-section">
<div class="home"></div>
<div class="" style="height: 100%; background-image: url(http://upanh.biz/images/2014/11/23/bg1.jpg)"></div>
</div>
UPDATE
Fixes/changes for your website for the problematic element (<div style="background-image: url('images/bg2.jpg');" class="fullscreen-img img-after"></div>):
left: initial;
width: 1230px;