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.
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've seen that pattern for centering an element on a website in the code of someone else:
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<img src="https://placebear.com/200/300" alt="picture-one" />
It works fine. No doubt !
But I can not imagine what the CSS-code actually does.
I've seen similar code in which positioning was used to extend an child element to the size of it's parent.
#child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: lime;
}
#wrap {
width: 100%;
height: 800px;
}
<div id="wrap">
<div id="child"></div>
</div>
But here it makes no sense to me.
Can someone explain me how these first shown technique work?
What the single properties do and how it finally accomplishes it's result?
I would appreciate it.
#child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 250px;
margin: auto;
background-color: lime;
}
#wrap {
width: 100%;
height: 800px;
}
<div id="wrap">
<div id="child"></div>
</div>
It's because the image has its default width and height.
When you use
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
Element would get the window size and position the element inside of it.
#child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 250px;
margin: auto;
background-color: lime;
}
#wrap {
width: 100%;
height: 800px;
position: relative;
}
<div id="wrap">
<div id="child"></div>
</div>
So, if you put position relative to #wrap, the position absolute #child will adjust to the parent.
Hope it helps! Cheers!
position: absolute allows you to set the distance of you element from the top, bottom, right and left from the edges of the whole page.
In the second example you have shown even thought the #wrap is set to a height of 800px the #child distance from each side of the page is set to be 0. So therefore it covers the whole page!
Hope this helped!
#inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 250px;
margin: auto;
background-color: #000; border:1px solid #fff;
}
#container {
width: 100%;
height: 800px;
}
<div id="container">
<div id="inner"></div>
</div>
I've understood that z-index needs that the div is positioned.
Then, I don't know why it doesn't work in my case :
html {
height: 100%;
}
body {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#signDiv {
position: relative;
z-index: -1;
width: 100%;
height: 100%;
}
#infoDiv {
position: relative;
width: 100%;
height: 100%;
z-index: 10;
}
<body>
<div id="signDiv">
...
</div>
<div id="infoDiv">
...
</div>
</body>
The two divs are not superposed, a solution ?
Thank you very much
You're sort of right that declaring a position on an element will make its z-index property kick in. But in your example, because of the order of your elements in the HTML, infoDiv will already be on top by default in terms of z-index. You don't even need z-index.
What you need is to set their positions to absolute instead of relative.
Something like that: http://codepen.io/memoblue/pen/xOBBxK
html {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
}
#signDiv {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
#infoDiv {
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
}
<body>
<div id="signDiv">
...1
</div>
<div id="infoDiv">
...2
</div>
</body>
I am using this code. It covers the whole background with 1 image. The problem is the upper part of it, which gets cut by browser and the lower part by the taskbar. As i go fullscreen it works fine. I want the image to sit in the browser fully. Is there any method available for that??
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
You can change your current CSS to:
#bg {
position: fixed;
width: 100%;
height: 100%;
}
#bg img {
position: absolute;
/* display: cover; */
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
Here is example 1.
Alternatively, load the image purely with CSS and set it as background. Change your code to:
HTML
<div id="bg">
</div>
CSS
#bg {
position: fixed;
width: 100%;
height: 100%;
background: url(images/bg.jpg);
top: 0;
left: 0;
}
Here is example 2.
Both of them will set the image as background.
Change 1
Remove the
top: -50%;
left: -50%;
on your code. It makes the hiding of both you mentioned.
Change 2
You need to declare the image width and height in the
#bg img{
width:100%;
height:100%;
}
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).