Im new to css and trying to get an image to overlay another image multiple times. So the orange dots overlay the images. In the same spot for multiple images.
code
So what you need is to play with css position property.
give to parent element position: relative and to the overlaying child position: absolute, then play with the exact position using left and top properties.
should be something like this:
.parent {
position: relative;
display: inline-block;
}
.badge {
position: absolute;
left: 10px;
top: 10px;
}
<div class="parent">
<img width="170" src="https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img width="40" class="badge" src="https://image.flaticon.com/icons/png/512/1977/1977845.png"/>
</div>
<div class="parent">
<img width="170" src="https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img width="40" class="badge" src="https://image.flaticon.com/icons/png/512/1977/1977845.png"/>
</div>
<div class="parent">
<img width="170" src="https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img width="40" class="badge" src="https://image.flaticon.com/icons/png/512/1977/1977845.png"/>
</div>
Related
I'm trying to put an link below an image and for whatever reason, the link just keeps going to the side (right) of the picture. The image displays fine and the link works, but I just need it underneath the picture.
Any ideas?
HTML:
<div class="images">
<img src="imgs/2.jpeg" width="280" height="350" alt="Exterior" />
<a class="link1" href="https://www.google.com">Test</a>
</div>
CSS:
.images {
position: absolute;
left:10px;
top: 200px;
font-size: 120%;
}
I'm new to HTML/CSS so if anyone can explain in easy terms, I would really appreciate it. I have tried lots of different things such as span, align etc and it just won't work!
If I use a p statement instead of a ULR (h ref) the text does go below the image, so I'm baffled!
Images are by default inline-element 8though treated as inline-block). All you need to do, is to set the image as block-level element with : img { display: block; }
img {
display: block;
}
<div class="images">
<img src="https://via.placeholder.com/100.jpg" width="280" height="350" alt="Exterior" />
<a class="link1" href="https://www.google.com">Test </a>
</div>
You can use display flex to make this a column.
Explanation: https://www.w3schools.com/css/css3_flexbox_container.asp
.images {
position: absolute;
left: 10px;
top: 200px;
font-size: 120%;
display: flex;
flex-direction: column;
}
<div class="images">
<img src="imgs/2.jpeg" width="280" height="350" alt="Exterior" />
<a class="link1" href="https://www.google.com">Test </a>
</div>
You could add the break line tag below the image tag.
<div class = "images">
<img src="imgs/2.jpeg" width="280" height="350" alt="Exterior" />
<br>
<a class="link1" href = "https://www.google.com" >Test </a>
</div>
I have 3 horizontally aligned images. I set a background image (background image) for the aligned images as below. When I run my code, the background image flows over the images. I want the 3 aligned images to appear on top of the background image. I tried to use box-shadow which couldn't work. I don't want the background image to cross over any of the 3 aligned images. How do I do this please?
HTML
<div class="col-lg-12">
<img src="images/background.png" alt="Change">
<div class="img">
<div class="column-img">
<img src="/images/pic.jpg" alt="" width="426" height="479">
</div>
<div class="column-img">
<img src="/images/pic.jpg" alt="" width="425" height="479">
</div>
<div class="column-img">
<img src="/images/change.jpg" alt="" width="426" height="479">
</div>
</div>
</div>
CSS
//how I align my 3 images horizontally.
.column-img {
float: left;
width: 33.33%;
padding: 5px;
}
Hm, so you want the background.png to appear behind the other images? If you insist on having it within the DOM, you'd need to remove it from the document flow. Something like this:
.column-img {
float: left;
width: 33.33%;
padding: 5px;
}
.background {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.background-anchor {
position: relative;
}
<div class="col-lg-12 background-anchor">
<img class="background" src="https://placekitten.com/1300/1300" alt="Change">
<div class="img">
<div class="column-img">
<img src="https://placekitten.com/426/479" alt="" width="426" height="479">
</div>
<div class="column-img">
<img src="https://placekitten.com/425/479" alt="" width="425" height="479">
</div>
<div class="column-img">
<img src="https://placekitten.com/426/479" alt="" width="426" height="479">
</div>
</div>
</div>
css :
.img {
background-image: url('../images/pic.jpg');
}
this is the right way to put a background image in css
get more information from : W3school
Currently you can see on that the central image and the button underneath aren't grouped together which I would like them to be. Horizontally it spans fine but the button overlaps vertically onto the image depending on the window size. I would like the button to be in a fixed position directly underneath the image regardless of the window size.
You can see how I've placed the button underneath below. Can anyone see where I am going wrong? Cheers
Here is the relevant code
html {
height: 100%;
width: 100%;
}
body {
width: 100%;
height: 100%;
}
#mainText {
position: fixed;
top: 35%;
left: 33%;
}
#yesButton {
position: fixed;
top: 59%;
left: 33%;
}
.image_off, #home:hover .image_on{
display:none
}
.image_on, #home:hover .image_off{
display:block
}
================= HTML =================
<div id="mainText">
<img src="images/mainText.png" height="160" width="340">
</div>
<div id="yesButton">
<a id="home"><img class="image_on" src="images/yesPlease.png" height="60" width="336" alt="" /><img class="image_off" src="css/images/yesPleaseHover.png" height="60" width="336" alt="" /></a>
</div>
Pol is correct, position absolute is what you're looking for.
But you need to change more than just CSS in this case.
Wrap your div mainText around your yesButton div and make sure your yesButton's position is set to absolute.
</div>
<div id="mainText">
<img src="images/mainText.png" height="160" width="340">
<div id="yesButton">
<a id="home"><img class="image_on" src="images/yesPlease.png" height="60" width="336" alt="" /><img class="image_off" src="css/images/yesPleaseHover.png" height="60" width="336" alt="" /></a>
</div>
</div>
</div>
You will also need to reposition the yesButton but I have a fiddle that shows a good indication of where you might want it.
https://jsfiddle.net/pjcscc2a/
Moving the "yesButton" DIV into "mainText.png" and directly below the "maintext.png" image tag worked for me. I also had to comment out the CSS rule assigned to "yesButton"
I have this demo: http://vestigedayz.com/sys/adminexec/Test/
I have put a image on it (right, that folder icon) but i don't want to make it move when I randomly type on the keyboard.
.image{
padding-left:1100px;
position:fixed;
}
<a href="">
<div class="image">
<img src="images/suspect.png" width="160" height="140" alt="">
</div>
</a>
Change right and top to what you want.
position: absolute;
right: 50px;
top: 10px;
Lose the:
padding-left:1100px;
position:fixed;
i want to alignt a image, that is in front of another image, to the right.
In this example the little google image is on the upper left but i want it to be on the upper right:
http://jsfiddle.net/2NYve/
i already tried float: right and align="right" but that doenst work.
As you can see in the example the background is a object with a svg but for this example i simple put a image at this place, i think there should be no different.
<div id="divSvgView" dojoType="dojox.mobile.ScrollableView" style="background-color: #d0d0d0;">
<!--foreground-->
<div style="float:right;width:30px; height:30px;position: absolute; z-index:5000"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" /></div>
<!--background-->
<div style="width:100%; position: absolute; z-index:100"><img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
<!--<object type="application/xhtml+xml" id="svgObject" data="" style="width:100%; height:100%;margin:1%;"></object>--></div>
Add (Where 20px is the width of your image)
right: 20px;
to the image. That's the only way as far as I know if you use absolute positioning
http://jsfiddle.net/2NYve/1/
<div style="z-index:10; position: relative; float:right;width:30px; height:30px; z-index:5000">
<a href="javascript:goToLastNodeDiv()"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" />
</a></div>
<div style="z-index:1; width:100%; position: absolute; z-index:100">
<img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
</div>
I added to the div with the chromo logo :
z-index:10; position: relative;
And to the other one, with the google logo :
z-index:1
I used the CSS z-index proprety : http://www.w3schools.com/cssref/pr_pos_z-index.asp
Here's the updated jsFiddle : http://jsfiddle.net/2NYve/7/
Set the foreground divs position to 'relative' instead of 'absolute' and add some right margin to place it a little to the right.
<div id="divSvgView" dojoType="dojox.mobile.ScrollableView" style="background-color: #d0d0d0;">
<!--foreground-->
<div style="float:right;width:30px; height:30px;position: relative; z-index:5000;margin-right:10px"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" /></div>
<!--background-->
<div style="width:100%; position: absolute; z-index:100"><img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
<!--<object type="application/xhtml+xml" id="svgObject" data="" style="width:100%; height:100%;margin:1%;"></object>--></div>