Can you set a background image to an image? - html

Question

I am trying to set a background image on an img tag. Is this possible?
My HTML:
<div id="content">
<img src="my-image.jpg" alt="image" class="img-shadow">
</div>
My CSS:
#content img {
float:right;
margin:0 0 15px 15px;
border:4px solid #ffffff;
}
.img-shadow {
background-image:url('img-shadow.png');
background-repeat:no-repeat;
background-position:0 232px;
}
Using Chrome's "Inspect Element" I can see the path to the background is correct. It's just not showing up in the browser. Below is the desired effect I am going for. By the way. the foreground image dimensions are 258x258 (with border) and the background-image dimensions are 258x40.

Answer 1

An image with no transparency and no padding will cover up its own background image. Images having background images do work, provided there's some gap for the background image to show through.
Adding a padding around the image will suffice, if you just want the background image to show around the image. You can then set a negative margin of the same size, if you don't like the padding taking up space.
Setting the background position to something other than 0 0 will NOT suffice; no matter what the background position is set to, the background will never extend beyond the area taken up by the element (including padding, but excluding border and margin).

Answer 2

Here's a solution using a container element and CSS :after
Demo fiddle
HTML
<div id="content">
<div class="img-container">
<img src="http://placehold.it/258x258" alt="image" class="img-shadow" />
</div>
</div>
CSS
#content img {
border:4px solid #ffffff;
vertical-align: top;
}
.img-container{
position: relative;
display:inline-block;
}
.img-container:after {
content: url('http://placehold.it/258x40');
display: block;
position: absolute;
top: 100%;
right: 0;
}
UPDATE
And using CSS3 box-shadow
Demo fiddle
.img-container:after {
content: '';
display: block;
position: absolute;
top: 90%;
right: 0;
height: 20px;
width: 258px;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
-moz-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
box-shadow: 0 10px 10px rgba(0,0,0,0.5);
z-index: -1;
}

Answer 3

YES you can put a background image to an image.
.your-image{
padding-bottom:18px; /* <-- height of texture image */
background:transparent /* <-- to manage some-transparent.png don't set a bgColor */
url(txtr-bottom-shadow-divider.png) /* <-- Your bottom right texture */
no-repeat /* <-- */
100% /* <-- align right */
100% /* <-- align bottom */
scroll /* <-- avoid Yoda trolling for spam abuse. Joke */;
}
You noticed the padding? It is to display the background-texture, otherwise, the image will take 100% of available space (width and height) so you won't see anything.

Answer 4

yup. just make sure you set some padding so the background-image will peek through; demo: http://jsfiddle.net/jalbertbowdenii/p6fm4/1/
updated fiddle by removing all the padding. to get the desired "peek" effect set the two corners you are peeking out of with a little bit of padding and the others to 0. like so: http://jsfiddle.net/jalbertbowdenii/p6fm4/5/

Answer 5

Yes,
Here is the easiest way to do it:
In your CSS file
body
{
background-image:url('img-shadow.png');
background-repeat:repeat-x;
background-position:center;
background-size: 100% 100%;
}
It will set it for every page of your site
You do not need to use an IMG tag for background images. It is the best form to set your background image in the css, so that you can easily layer items on top of it. With a IMG tag you need to make sure that everything you place ontop of it is absolute positioning, so it doesn't move. This is a huge pain. Good Luck