+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: [HTML/CSS]How do you add an image over an image? (/showthread.php?tid=3905043)
[HTML/CSS]How do you add an image over an image? - Dusteh - Dec 3, 2013
As the title says, how do you add an image over an image using html or css?
* - resent - Dec 3, 2013
You could use divs.
For example:
Code
<div class="image1">
<div class="image2"></div>
</div>Code
.image1 {
width: 300px; /* The width of the image */
height: 300px; /* The height of the image */
background: url('../yourimagesfolder/image.jpg'); /* The image */
}
.image2 {
width: 100px; /* The width of the image */
width: 100px; /* The height of the image */
background: url('../yourimagesfolder/image2.jpg'); /* The image */
position: relative;
/* fiddle with the stuff below until you have it positioned where you want it. */
top: 100px;
left: 0px;
right: 0px;
}* - xSploit™ - Dec 3, 2013
position:absolute is your friend in this case!
* - Krоnus - Dec 3, 2013
Sure, try position: absoulte; or you can use z-index :)
* - ~Dec - Dec 3, 2013
CSS3 allows multiple background images as well, using this syntax (left-most image = top-most image):
Code
.selector {
background-image: url(top.png), url(bottom.png);
}* - loveplazza - Dec 4, 2013
use z-index man
then you can add
thanks
* - iDyxl - Dec 4, 2013
I would go with z-index too
Probably the best way of doing it
http://css-tricks.com/almanac/properties/z/z-index/
* - resent - Dec 4, 2013
To use z-index, the images already have to be positioned over each other. [img]http://asterisk.apod.com/images/smilies/facepalm.gif[/img]
* - iDyxl - Dec 4, 2013
(Dec 4, 2013 06:14 AM)Poochyena Wrote: To use z-index, the images already have to be positioned over each other. [img]http://asterisk.apod.com/images/smilies/facepalm.gif[/img]
You can give it whatever position you want to, (not static ofc.), and then z-index will work, so why don't you got somewhere else with that ugly smiley?
* - ~Dec - Dec 4, 2013
(Dec 4, 2013 08:09 AM)iDyxl Wrote: You can give it whatever position you want to, (not static ofc.), and then z-index will work, so why don't you got somewhere else with that ugly smiley?
z-index makes no difference and actually is the worst possible way to do it. What if you have #image1 and #image2, and you use position:absolute and z-index to lay #image2 over #image1. Then you want that when the user hovers over #image1, #image2 will change colour... Because of the z-index, #image1's mouse events won't occur because the mouse never passes over it since it's behind something else...
Honestly, CSS3 multiple background images were created just for this purpose. You can also use pseudo-elements, or simply just wrap one image in another one using divs...