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).
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 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 want a particular picture to cover the entire background of my site and when the window is resized, I want the picture to be scaled accordingly. What I'm looking for is something like https://www.tumblr.com. Notice the picture in the background scales accordingly to the window size.
Here is my css:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#backdrop {
z-index: -999;
min-height: 100%;
min-width: 100%;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
Where #backdrop is the id for the image I'm using.
I've tried numerous things but nothing seems to change the way my image is displayed.
Use object-fit to let an img behave like a background-image. See this working example:
html, body {
height:100%;
margin:0;
padding:0;
}
img {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<img src="http://lorempixel.com/g/1100/300">
Two things:
Change the height: auto; to height: 100%, and add background styles.
#backdrop {
z-index: -999;
min-height: 100%;
min-width: 100%;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: url("image.jpg") center center no-repeat;
background-size: cover;
}
Also, use a HTML 5 Doctype:
<!DOCTYPE html>
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 #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.