CSS background image ?

Question

I have a div that is 200px by 200px.

If I want to place a 30x30px no-repeat background image at the top left corner position of 120px from the left and 50px from the top ... while also allowing the text inside that div to be displayed on top of the background image ... how would I do that?

I tried the following, but it doesnt appear to work.

background:url(http://example.com/background-image.png) no-repeat 120px 50px;

Any ideas how to perform what I want to accomplish?

Answer 1

What is the exact problem? Is the image not appearing at all? Or it is positioned in a different place? There is no issue with the CSS. Check whethher the image is loading or not. For that you can remove the positions once and check whether the image loads or not.

Answer 2

This might give you something to work with. Beyond that, it'd be much easier to debug if I could see what's going on. Maybe the image path is incorrect, some other entity is occluding the box, the div is collapsing on itself (background images don't flow in the box model), or another CSS rule is overriding the one you've specified.

<div style="width: 200px; height: 200px; font-size: 2em;
background: url(http://sstatic.net/so/img/logo.png)
no-repeat 120px 50px; border: 1px solid #f00;">
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>

Answer 3

Open the image in the image editing software of your choice.

Make the canvas size 150px by 80px.

Place the image at the bottom right. Leave the rest transparent (no background behind the image).

Save as .png or .gif with transparency ON.

Toss that badboy into the background-image=url("example.com/img.png");

You should be golden.