I have been trying to position the image on top of the image, following StackOverflow question 27609816 (positioning the scalable image on top of another image), but cannot get css to work.
My second image displays inline to the right of the first image.
I'm assigning a class to the second image as follows -
.earth {
position: absolute;
top: 100;
left: 0;
height: auto;
width: 100%;
z-index: 1;
}
#topDiv {
text-align: center;
position: relative;
width: 100%;
height: 205px;
background-image: url(/I/starry_sky.jpg);
background-repeat: repeat-x;
}
<div id="topDiv">
<img src="I/map.jpg" width="900" height="205" align="top"/>
<img class="earth" src="I/earth1.gif" align="top"/>
</div>
/*NORMAL STYLING*/
.main {
text-align: center;
}
.img-1 {
position: relative;
height: 400px;
width: 400px;
object-fit: cover;
}
.img-2 {
height: 300px;
width: 300px;
object-fit: cover;
/*css required to get image on top of img-1*/
position: absolute;
top: 0;
left: 50%;
}
<div class="main">
<img src="https://images.unsplash.com/photo-1593642532744-d377ab507dc8?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" class="img-1">
<img src="https://images.unsplash.com/photo-1628160634750-a81a2a780805?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60" class="img-2">
</div>
It's because you must apply position absolute to both of children. Ans this way you can align them. Don't forget that you should give z-index a higher number to the first image.
#topDiv {
text-align: center;
position: relative;
width: 100%;
height: 205px;
background-image: url(/I/starry_sky.jpg);
background-repeat: repeat-x;
}
/* EDITED HERE */
.water {
position: absolute;
top: -10px;
z-index: 1
}
.earth {
position: absolute;
top: 0;
left: 0;
height: auto;
width: 100%;
/* YOU CAN REMOVE Z-INDEX HERE
z-index: 1; */
}
<div id="topDiv">
<img class='water' src="https://picsum.photos/200/300" width="900" height="205">
<img class="earth" src="https://picsum.photos/100/300">
</div>
Related
This is the sample of the design that I want to create.
I'm using scss for this build. Thank you. Because I'm not sure how am I going to get the height 100% for the image icon and overflow to the container? this is the snippet of the code.
.image-container {
position: relative;
min-width: 191px;
height: 160px;
background-size: cover;
background-position: center center;
background: url(${img}) no-repeat;
}
<div class="image-container">
<img src="url here" alt="" />
</div>
There are multiple ways to do this using css positions, flexbox, grids etc..
Using z-index you can move the item to foreground or background. See more here
Using positions:
.image-container {
position: relative;
min-width: 191px;
height: 160px;
background-size: cover;
background-position: center center;
margin-top: 30px;
}
img{
max-width: 100%;
height: 100%;
}
#box1{
min-width: 80px;
height: 100%;
background: red;
position: absolute;
min-height: 200px;
top: -30px;
left: 30px;
z-index: -1;
}
#box2{
min-width: 80px;
height: 100%;
min-height: 200px;
background: blue;
position: absolute;
top: -30px;
left: 130px;
}
<div class="image-container">
<img src="https://www.w3schools.com/howto/img_forest.jpg" alt="" />
<div id="box1"></div>
<div id="box2"></div>
</div>
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've tried everything, but nothing works! transform: translate (50%); seems to work, but it doesn't align it to the exact center. I even tried left: 50%; with it.
I've spent a week figuring it out, and I still can't.
The image I'm trying to align is a logo with the dimensions 660 X 150.
<div id="rectangle"> </div>
<img class="logo" src="Untitled.png">
<style>
.logo {
position: fixed;
width: 35%;
top: -5px;
height: auto;
}
#rectangle {
width: 100%;
height:100px;
background:#101010;
position: fixed;
top: 0;
}
</style>
EDIT: No, I want to align the logo to the center of the page. The rectangle div is the background color for the logo.
Also, none of those answers worked. :(
Try this:-
Use display: flex; justify-content: center; element to align img at center.
<div id="rectangle" style="display: flex; justify-content: center;">
<img class="logo" src="Untitled.png">
</div>
<style>
.logo {
position: relative;
width: 35%;
top: -5px;
height: auto;
text-align:center;
}
#rectangle {
width: 100%;
height:100px;
background:#101010;
position: fixed;
top: 0;
}
</style>
Instead of using an <img> tag, try using a div and give that image as backgorund with
background-position: center;
background-image=url('image.png');
backgorund-repeat:no-repeat;
background-size:contain;
use this
<div id="rectangle"><img class="logo" src="Untitled.png"></div>
and for style
<style>
.logo {
margin-right:auto;
margin-left:auto;
}
#rectangle {
width: 100%;
height:100px;
vertical-align:center;
}
</style>
try it
<div id="rectangle"> </div>
<img class="logo" src="Untitled.png">
</div>
<style>
.logo {
width: 35%;
height: 150px;
}
#rectangle {
width: 100%;
height: 150px;
background: #101010;
text-align: center;
}
</style>
Are you looking for something like this ?
And yes, avoid using center tag as its deprecated in HTML5.
.center-my-content {
height: 500px;
width: 500px;
position: relative;
border: 1px solid #000;
margin: 0 auto;
}
.logo{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div id="rectangle" class="center-my-content">
<img class="logo" src="http://www.harpseals.org/images/seals/whitecoat_on_back-photo-eric_baccega_npl-sm.jpg">
</div>
Remove the position: fixed; from the img.
.logo {
height: auto;
width: 35%;
display: block;
margin: 0 auto;
top: -5px;
}
#rectangle {
position: fixed;
width: 100%;
height: 100px;
background: #101010;
top: 0;
}
<div id="rectangle">
<img class="logo" src="image.png"></div>
I need some help with CSS / Responsive Code. As my window size decreases I need all elements to decrease at the same ratio. Having issues with that. The arrow and the Rooster do no decrease as view port decreases.
The Rooster's shadow of his foot should stay slightly covered by the arrow. The top of the arrow's body (not the point) should stay inline with the divide line between the grey and white sections.
I need some help with CSS / Responsive Code. As my window size decreases I need all elements to decrease at the same ratio. Having issues with that. The arrow and the Rooster do no decrease as view port descreses.
The Rooster's shadow of his foot should stay slightly covered by the arrow. The top of the arrow's body (not the point) should stay inline with the divide line between the grey and white sections.
http://www.bootply.com/fiF4GI3g0n
body {
margin: 0px;
}
.special_box {
background-image: url("http://beta.madrooster.com/images/special_bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
height: 434px;
max-width: 100%;
position: relative;
z-index: 1
}
.special_content {
position: absolute;
margin: auto;
height: 85%;
width: 70%;
top: 0;
}
.rodney {
position: absolute;
margin: auto;
height: auto;
width: 100%;
text-align: right;
top: 4%;
right: 16%;
z-index: 5;
}
.rodney img {
max-width: 315px;
height: auto;
}
.special_arrow {
position: absolute;
margin: auto;
bottom: 0;
left: 0;
z-index: 10;
}
.special_arrow img {
max-width: 916px;
height: auto;
display: block;
}
<div class="special_box">
<div class="special_content"></div>
<div class="rodney">
<img src="http://beta.madrooster.com/images/special_rodney.png" alt="rodney" />
</div>
<div class="special_arrow">
<img src="http://beta.madrooster.com/images/special_arrow.png" alt="arrow" />
</div>
</div>
Responsive Design
Try this. With this code the arrow decreases size according to screen size. You can edit it as you like,
Use #media screen property to display content with respect to screen size
<html>
<head>
<style>
body {
margin: 0px;
}
.special_box {
background-image: url("http://beta.madrooster.com/images/special_bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
height: 434px;
max-width: 100%;
position: relative;
z-index: 1
}
.special_content {
position: absolute;
margin: auto;
height: 85%;
width: 70%;
top: 0;
}
.rodney {
position: absolute;
margin: auto;
height: auto;
width: 100%;
text-align: right;
top: 4%;
right: 16%;
z-index: 5;
}
.rodney img {
max-width: 315px;
height: auto;
}
.special_arrow {
position: absolute;
margin: auto;
bottom: 0;
left: 0;
z-index: 10;
}
.special_arrow img {
width:60%;
height: auto;
display: block;
}
#media screen and (max-width:1800px){
.special_arrow img {
width:98%;
height: auto;
display: block;
}
}
</style>
</head>
<body>
<div class="special_box">
<div class="special_content"> </div>
<div class="rodney"> <img src="http://beta.madrooster.com/images/special_rodney.png" alt="rodney"/> </div>
<div class="special_arrow"> <img src="http://beta.madrooster.com/images/special_arrow.png" alt="arrow"/> </div>
</div>
</body>
</html>
I have figured out a way to do this making the Rooster and arrow images with filler transparent space from the top. Not sure this this the best way, but it works.
http://www.bootply.com/wfxTqAKJfo
CSS Code
body {
margin: 0px;
}
.special_box {
background-image: url("http://beta.madrooster.com/images/special_bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
height: 440px;
width: 100%;
position: relative;
z-index: 1
}
.special_content {
margin: auto;
height: auto;
width: 100%;
top: 0;
position: relative;
}
.rodney {
background-image: url("http://beta.madrooster.com/images/special_rodney.png");
background-repeat: no-repeat;
background-size: 22% auto;
background-position: right 21% top;
height: 440px;
width: 100%;
position: relative;
z-index: 5
}
.special_arrow {
background-image: url("http://beta.madrooster.com/images/special_arrow.png");
background-repeat: no-repeat;
background-size: 64% auto;
background-position: left top;
height: 440px;
width: 100%;
position: relative;
z-index: 10
}
HTML Code
<div class="special_box">
<div class="special_content">
</div>
<div class="rodney">
<div class="special_arrow"> </div>
</div>
</div>
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.