How to put an image over background colour?

Question

Hello we are using CSS3.

We have a TD tag and it has background color set to red.

We are looking for a way in which we can put an image that is centered over that red background. Both red background and centered image must be visible within the td tag.

The background and image must be specified in inline style of the TD tag..

Answer 1

HTML:

<td style="background: red url(http://lorempixel.com/output/nature-q-c-50-50-9.jpg) center no-repeat"></td>

Background property docs.

1. red sets background-color
2. url(...) sets image
3. center sets image origin to center
4. no-repeat disables image repeating

JSBin .

Answer 2

using background property we can do it

try following

background: url("image path") no-repeat scroll center center #FF0000;

Answer 3

If you want to show the background color as well add a width and height to your td tag and a background size to your image like the following CSS.

width: 200px;
height: 200px;
background-color: red;
background-image: url('http://i.stack.imgur.com/i7woY.png?s=128&g=1');
background-position: center center;
background-repeat: no-repeat;
background-size: 100px 100px;