I have an img in a div set as a background with the following css:
#div1{
background: url(../img/img1.jpg);
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
position: fixed;
z-index:-100;
}
This div dispalys the img perfectly in the center of the screen.
My second div with text has the following css:
#div2 {
min-height: 200px;
background: black;
opacity: 0.9;
width: 100%;
z-index: -1;
position: relative;
top: 494px;
}
The divs display fine on my PC. However when I open the site on my mobile, the div with the text does not display. After zooming out you can see that the div is underneath the div with the img. Why is this so since the z-indexes are given and what can I do to change this?
Just increase the z-index value to positive.
#div2 {
min-height: 200px;
background: black;
opacity: 0.9;
width: 100%;
z-index: 999;
position: relative;
top: 494px;
}
Related
I have a single image (a checkmark) on the page and I want to fix its position when the user resizes the browser or go fullscreen.
As you can see here the image is moving around the page when I try to resize the browser:(image is the checkmark)
And when I resize the browser again:
The desired result is to fix the position of the image like that play button in the middle of the page that moves relative to the window.
Here is the CSS of the image:
Note: I need those viewport units for some complicated reason! and the absolute positioning is prefered.
#Image{
position: absolute;
max-width:10%;
height: auto;
opacity: 1;
top: 78vh;
left:26.5vw;
z-index: 1000;
}
<img id="Image" src="https://round-arm-authority.000webhostapp.com/test/Changed.png"/>
Update: using this seems to work fine but the image resizes Non-proportional:
#correctImage{
position: absolute;
transform: scale(0.2, 0.2);
height: 100vh;
width: 100vw;
opacity: 1;
z-index: 1000;
}
Update 2: Here is the link to download the zip files to test the code in the browser (Chrome is preferred). The HTML code to modify is in story_html5.html lines 22 - 27 and the CSS code is in correctImageStyle.css.
The desired behavior is just resizing and repositioning of the checkmark image like the play button in the center of the page.
http://s6.picofile.com/d/8381556034/1ef7bc07-eea8-4e9e-8bd8-57214a1e7ef8/Untitled1_Storyline_output.zip
Change the max-width: 10%; to width: 10%
#Image{
position: absolute;
width:10%;
height: auto;
opacity: 1;
top: 78vh;
left:26.5vw;
z-index: 1000;
}
<img id="Image" src="https://round-arm-authority.000webhostapp.com/test/Changed.png"/>
Maybe you should try to force your image to always be on the middle of the screen with:
#Image{
position: fixed;
top: 50%;
left: 50%;
transform: scale(0.2);
height: 100vh;
width: 100vw;
opacity: 1;
z-index: 1000;
}
<img id="Image" src="https://round-arm-authority.000webhostapp.com/test/Changed.png"/>
This should work
html,body,* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
.container {
position: relative;
display: flex;
justify-content:center;
align-items:center;
width: auto;
height: auto;
}
img.image {
width: 80%;
height: 250px;
display: block;
background: grey;
}
.logo {
height: 64px;
width: 64px;
position: absolute;
}
<div class="container">
<img class="image"/>
<img class="logo absolute" id="Image" src="https://round-arm-authority.000webhostapp.com/test/Changed.png"/>
</div>
With ::after
html,body,* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
img {
width: 80%;
height: 250px;
display: block;
background: grey;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items:center;
}
.container::after {
content: "";
background-image: url("https://round-arm-authority.000webhostapp.com/test/Changed.png");
background-position: center center;
background-size:contain;
background-repeat: no-repeat;
position: absolute;
height: 64px;
width: 64px;
z-index: 1;
}
<div class="container">
<img class="image"/>
</div>
I'm using the following code to show a background image on my page:
#bg-pic {
top: 0px;
left: 0px;
position: fixed;
z-index: -1;
margin: 0px;
width: 100%;
}
#bg-pic > img {
width: 100%;
display: block;
}
<div id="bg-pic">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg" />
</div>
This works fine once the ratio of the browser window is wide enough. But in case I have a very small window I want the picture still to cover the page so instead of width: 100%; height: 100%; would be correct. How can I fix this?
EDIT: Since the provided answer don't solve my actual problem let's describe it using an example:
Let's assume my picture has dimensions 100x100 and my browser window has dimensions 200x100. Then only the upper 100 pixels are filled with the picture. What I want is that the whole browser window is filled by zooming into the picture (of course then the area on the right and on the left of the picture which corresponds to the right 25 and left 25 pixels of the picture is omitted).
Use the background property instead of an img element.
Demo:
body {
background: url('image.jpg') center center / cover;
}
jsfiddle
In your case:
html, body {
min-height: 100%;
}
body {
margin: 0;
background: url('bg.jpg') center center / cover;
}
You could use the object-fit and object-position properties on the image tag.
Codepen example
#bg-pic{
top:0px;
left:0px;
position: fixed;
opacity: 0.18;
z-index: -1;
margin: 0px;
width: 100%;
height:100%;
}
#bg-pic img {
object-fit: cover;
object-position: 50% 50%;
width: 100%;
height: 100%;
}
You can read more about object-fit at CSS-Tricks : https://css-tricks.com/on-object-fit-and-object-position/
You just have to add height:100vh; in your img style tag,
You can't use height:100% because it won't be applied unless you have specified static height to parent div.
Always a better option to go for vh dimension.
#bg-pic {
top: 0px;
left: 0px;
position: fixed;
z-index: -1;
margin: 0px;
width: 100%;
}
<div id="bg-pic">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg" style="width:100%; height:100vh; display: block;"/>
</div>
body { background-image:url("../images/bg.jpg");
background-repeat: no-repeat;
background-size: 100% 100%; }
Try this
You can try flexbox like this:
#bg-pic {
top: 0;
left: 0;
position: fixed;
opacity: 0.5;
z-index: -1;
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
}
img {
min-width: 100%;
min-height: 100%;
flex-shrink: 0;
}
<div id="bg-pic"><img src="https://picsum.photos/800/800?image=1069" style="" /></div>
Try this, its cross browser compatible:
div {
position:relative;
}
img {
max-height: 100%;
max-width: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
This assumes you have given a size to the div.
You might be looking for background-size: contain. Paired with height: 100vh should give you desired effect.
If you need the image centered horizontally you can add background-position: 50% 0% or background-position: center; for both horizontal and vertical centering.
#container-with-background {
background: url(https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg);
background-repeat: no-repeat;
background-size: contain;
height: 100vh;
}
<div id="container-with-background">
</div>
If you need your images to be inside your <img> tags you can achieve the same effect with max-width: 100% and max-height: 100% on the <img> tag, and fixed height on the container - height: 500px for example. Setting the height to 100vh will make it fullscreen.
#container {
height: 100vh; /* Can be set to fixed value if needed */
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
}
<div id="container">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg">
</div>
I have a div which constains an image with diferent srcsets. I have set the div and image width and height to 100% so that the img embrace the whole page, so it is easy to assum that depending on the device screen it will show a bigger or a lower portion of the image when it doesn't fit on the div.
I'm ok with that, but the problem is that I want the image to be showed by the top so that if the height doesn't fit the 100% of the screen height and a part of the img gets cutted it is the bottom of it, but the img starts loading by the bottom and its the top the who gets cutted.
.portada {
width: 100%;
height: 100%;
}
#portadaImg {
height: 100%;
width: 100%;
object-fit: cover;
}
.portadaLetras {
position: absolute;
color: #FFFFFF;
font-size: 2em;
width: 33%;
min-width: 170px;
text-align: center;
background-color: #000000;
}
.centerBoth {
display: flex;
justify-content: center;
align-items: center;
}
<div class="portada centerBoth">
<img id="portadaImg" class="img-fluid" srcset="images/portada/portada-xl.jpg 2400w,
images/portada/portada-l.jpg 1200w,
images/portada/portada-md.jpg 992w,
images/portada/portada-tablet.jpg 768w,
images/portada/portada-mobile.jpg 458w" src="images/portada/portada-mobile.jpg" alt="Foto de portada">
<div class="portadaLetras">
Saint Paolo
<p>MMXIV</p>
</div>
</div>
Any idea what property am I missing?
Add the following property to the .portada class besides the ones I already had:
object-position: center top;
If you don't HAVE to use a srcset, why not use a background image instead of an image tag?
It would simply be:
.portada{
background: #000 url(../path/to/image.jpg) no-repeat;
background-size: cover;
}
Edit
I'm a little confused but if you are still willing to use a background image, perhaps the issue is with your Div styling.
Apply this CSS on the body tag instead...
body{
background: #000 url(../path/to/image.jpg) no-repeat center top;
background-size: cover;
}
You can do this by absolutely positioning your image inside a div with overflow: hidden.
The below image is 225px tall, but its parent div is only 160px tall, so it gets cropped from the bottom, leaving the top of the image alined with the top of its parent div.
.image {
position: relative;
overflow: hidden;
width: 378px;
height: 160px;
}
.image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
<div class="image">
<img src="https://images.pexels.com/photos/52903/pexels-photo-52903.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=225&w=378" alt="colored pencils">
</div>
A more generic solution that will replicate the effect of background-size: cover; background-position: top center would look something like this:
.image {
position: relative;
overflow: hidden;
width: 378px; /* or whatever */
height: 160px; /* or whatever */
}
.image img {
position: absolute;
top: 0;
left: -100%;
right: -100%;
margin: auto;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
}
I have 2 images (both 3000px x 3000px) and I have one as background and one in front of it (frontal one will rotate).
Problem now is that I always start at top/left corner (0px x 0px)...I want to start at 1500px from left and 1500px from top (=center of the image), so without overflow:hidden, you can see the x/y scrollbars centered (vertical/horizontal).
Is there some way to achieve this effect?
html,
body {
position: relative;
background: url(stripes.jpg) no-repeat;
background-position: center;
margin: 0;
padding: 0;
width: 3000px;
height: 3000px;
overflow: hidden;
}
.stars{
position: absolute;
width: 3000px;
height: 3000px;
border: 2px solid red;
z-index: 99;
background: url(squares.jpg) no-repeat center;
}
these (bad) images will give you some understanding of the wanted effect
Try this:
#container {
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#image {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
I am attempting to make the background div actually 100% with other movable/floating divs that are positioned absolutely.
Width 100% is not accounting for the .floater div being far off the screen. (which the browser shows with scrollbars).
live example of problem: https://jsfiddle.net/h0arax9o/2/
Scroll to the right of the preview.
I would like the purple background to cover the entire document.
html:
<div class="background"></div>
<div class="floater"></div>
css:
.background {
background: purple;
width: 100%;
height: 100%;
position: absolute;
}
.floater {
background: red;
width: 200px;
height: 200px;
left: 1400px;
position: absolute;
}
Edit: for clarity, I would like the background to 'stretch' across the entire page, for example, if it was an image, when you scrolled in the example, the image would scroll as well.
I updated the example to showcase that.
.background {
background: purple;
width: 100%;
height: 100%;
position: fixed;
}
.floater {
background: red;
width: 200px;
height: 200px;
left: 1400px;
position: absolute;
}
<div class="background"></div>
<div class="floater"></div>
.background {
background: purple;
top: 0; right: 0; bottom: 0; left: 0;
position: fixed;
}
.floater {
background: red;
width: 200px;
height: 200px;
left: 1400px;
position: absolute;
}
enter link description here
You need to use a css reset: http://meyerweb.com/eric/tools/css/reset/
If you click on the gear icon on the top right of the css part of jsfiddle you can choose to normalize css. Here's a forked jsfiddle where I did that: https://jsfiddle.net/ckkoq3pn/
_