Dynamic image with text infront

HTML & CSS
1

Hi,

I am trying to do something on this page:

http://www.loumolloy.com/lou/

See “Product of the Week”…

The image underneath will be changing as the product of the week is changed so i will be retrieving this out from a database. I need the text to appear in-front of the image near the bottom. The normal way is to have the image as a background and add some padding.

However this image will constantly change, the image itself is 667*352 but its being cut off for some reason. So how can i accomplish this?

Hope someone can help…

Thanks again

2

I’m not sure what you are asking here?

Do you want the text “Product of the week Cherub cardigan £85.00” to sit on top of the image?

If so then wrap the text in a div with a high z-index and place it absolutely at the bottom and it will sit on top of the image. Apply position:relative to the parent (productoftheweek) to create a stacking context.

The image is cut off because the height of the text and the height of the image is greater than the height you set for that element and you hid the overflow. If you are going to absolutely place the text then it should slide up and fit the space you have already allocated.

3

Perfect! :slight_smile:

Thanks so much for that, it worked brilliantly :lol:

Thanks again

4

Actually i am trying the same thing with another <div> and it doesn’t seem to be working. If you look at this page:

http://www.loumolloy.com/lou/

In the #latestceleb div element you can see an image. But this image should be in-front of the image:

http://www.loumolloy.com/lou/images/latestceleb.png

Why doesn’t it work?

Thanks

5

The background needs to be transparent you see, i am attaching what it should look like, you will see what i mean :confused:

Hopefully someone can help…

6

Hi,

You can’t put a foreground image behind the elements background. You could just swap the images around and have the picture of the man as the background and then absolutely place the transparent image on top as before.

That image doesn’t seem to be transparent though?

If you want the picture of the man to be an image in the html then you will need to add an element to place the other image on and then position it.
e.g.


[B]#latestceleb,#latestceleb span {
    width: 212px;
    height: 351px;
    position:relative;
}
#latestceleb span {
    position:absolute;
    top:0;
    left:0;
    background:url(http://www.loumolloy.com/lou/images/latestceleb.png);
    z-index:999;
}[/B]




    <div id="latestceleb"><img src="http://www.loumolloy.com/lou/images/celeb.jpg" alt=""/><span></span>
        </div>
7

Hey,

That doesn’t seen to be working, the image of the man should be infront of the background, once it’s infront the top and bottom gray area will be transparent… like the image i attached…

Or can this not be done? The reason i have the image as such is because it will again constantly be changing every week so it’s essential i can read this image out of a database.

Any ideas?

8

How can the image of the man be in front of the image that you want to sit on top of it?

This image needs to be made transparent and then the image of the man which is underneath will show through and allow you to have different images there as required.

9

Ah i see :frowning:

It’s working now :slight_smile:

My mistake, well atleast now i understand how position:relative and absolute works :wink:

Thanks again Paul