CODEWITHSUNDEEP
htmlcssimagebackground-image
Travis
Travis

Reputation: 53

Can you set a background image to an image?

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.

enter image description here

Upvotes: 1

Views: 306

Answers (5)

albert
albert

Reputation: 8153

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/

Upvotes: 0

Milche Patern
Milche Patern

Reputation: 20442

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.

Upvotes: 0

omma2289
omma2289

Reputation: 54619

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;
}

Upvotes: 2

Brilliand
Brilliand

Reputation: 13714

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).

Upvotes: 5

IdeoREX
IdeoREX

Reputation: 1485

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

Upvotes: -1

Related Questions