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.
Related
http://lucasdebelder.be/googledoodle/
I want to have the planet (bottom image) on top of the top image (the blue background/space). I have a main div class:"center" set on 'position: absolute' and around both of those images is separately a div wrapped with position: relative; but somehow they don't want to go and sit on top of each other, I've also tried it with z-index but that doesn't work either.
Thanks in advance.
Use these properties the planeet_achtergrond class:
.planeet_achtergrond{
position: absolute;
bottom: 150px;
}
I would recommend nesting the two images in a div then adding a class to each image. Then use margin: 0 auto to center the div to the page. This is my solution:
#googledoodle {
position: relative;
top: 0;
left: 0;
height:512px;
width:900px;
margin: 0 auto;
overflow: hidden;
}
.galaxy {
position: relative;
top: 0;
left: 0;
}
.planet {
position: absolute;
top: 380px;
left: 0px;
}
<div id="googledoodle">
<img src="http://lucasdebelder.be/googledoodle/images/galaxy.png" width="900" class="galaxy">
<img src="http://lucasdebelder.be/googledoodle/images/planeet.png" width="950" class="planet">
</div>
i changed all css. Here sample:
.center {
position: relative;
text-align: center;
width: 900px;
margin: auto;
overflow: hidden;
height: 500px;
}
.space_achtergrond {
width: 100%;
z-index: 0;
position: absolute;
height: auto;
bottom: 0;
}
.planeet_achtergrond {
width: 100%;
height: auto;
z-index: 100;
position: absolute;
bottom: -15px;
}
form {
position: absolute;
bottom: 15px;
z-index: 999;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
use overflow:hidden outer div.
if you want place divs inside a div with position:absolute, use position:relative for parent div.
if you want to stick a div bottom, use only bottom:0
I was wondering if there's a way to block the scroll bar until a div and its loader gets to the point of display none. I don't know if this can be done just with html or css. Any advice?
#loader {
background: #eeeeee;
bottom: 0;
height: 100%;
left: 0;
right: 0;
top: 0;
width: 100%;
display:block;
margin: 0 auto;
position: relative;
overflow: hidden;
z-index: 9999;
}
#loaderInner {
background:#eeeeee url(https://dl.dropboxusercontent.com/s/asdfghfdsas/loader.gif) center center no-repeat;
background-size: 250px 250px;
position: absolute;
height: 250px;
width: 250px;
display:block;
margin: 0 auto;
top: 50%;
left: 50%;
margin: -125px 0px 0px -125px;
}
body#layout #loader {
display:none;
overflow: scroll;
}
You can use some simple CSS to prevent scrolling on the page. But you would need to use JS to handle when to apply this class.
CSS
body.loading {
overflow: hidden;
}
Another solution is to put loader div with fixed position, so there's no need to hide the scrollbar (which can cause a strange user experience):
#loader {
position: fixed;
top: 0;
left: 0;
...
}
The div will show while scrolling
In this case you wouldn't need the "body.loading" rule.
The loader scrolling due to the positioning, so we can easily remove the scroll by changing the position css to position:fixed;
it will 100% work.......
#loader {
position: fixed;
background: #eeeeee;
bottom: 0;
height: 100%;
left: 0;
right: 0;
top: 0;
width: 100%;
display:block;
margin: 0 auto;
overflow: hidden;
z-index: 9999;
}
To me this is the best solution to delete the scroll bar while de Loader is display
html, body.loader {
overflow: hidden !important;
}
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.
I have a cover Image in an html page that is wrapped by a div.
The div size is always width:100% height:33%.
I want any arbitrary image to scale to fill without be stretched on any screen size and ratio.
My CSS looks like this:
.headerImageWrapper{
position: relative;
width: 100%;
height: 33%;
overflow:hidden;
}
.coverImageCentered{
min-width: 100%;
min-height: 100%;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
My problem is that the image size is not the mimimum possible that satisfy these conditions.
See the image to understand better
I'm an iOS developer, if you now how it works basically like the contentMode : scale aspect to fill
This is what you looking for.. you can test this solution on the device
http://jsbin.com/joxinizo/4
source code:
http://jsbin.com/joxinizo/4/edit
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.bgd {
position: relative;
width: 100%;
height: 33%;
overflow: hidden;
}
.bgd-cover {
position: absolute;
top: 0;
left: -50%;
width: 200%;
height: 100%;
overflow: hidden;
}
.bgd-cover-img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 13%;
}
UPD: i updated my answer
UPD2:
I don't know if I get right your question, but you may try to experiment with background-size: cover (you won't need wrapper with this one).
I have a #background and a #content box. The #background is supposed to be at top, and #content box have a margin-top of X pixels.
Now, the problem is that even though #background have the position: absolute; property, it follows the #contents margin.
Why is the #background affected?
HTML
<div id="background"></div>
<div id="content">Content</div>
CSS
#content {
width: 200px;
margin: auto;
margin-top: 150px;
background-color: Coral;
}
#background {
width: 100%;
height: 500px;
position: absolute;
background-color: AntiqueWhite;
z-index: -1;
}
Reproduced problem http://jsfiddle.net/GeU35/
So you just needed to set its position via top: 0;. Remember you can add left: 0; to make it sit to the left as well. Also anyway you want. bottom: 0; and right: 0;.
CSS:
#background {
width: 100%;
height: 500px;
position: absolute;
top: 0;
left: 0;
background-color: AntiqueWhite;
z-index: -1;
}
DEMO HERE
Not quite sure if I understand, but will doing this fix your issue? Ultimately setting top: 0 and left: 0 to #background
#background {
width: 100%;
height: 500px;
position: absolute;
top: 0;
left: 0;
background-color: AntiqueWhite;
z-index: -1;
}
It's an interesting effect, but ultimately you have specified an absolute position, then not given any position information. I believe that's why it misbehaved. As mentioned in other answers simply setting something like top:0px solves it readily.