SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dynamic image with text infront

    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
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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. #3
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect!

    Thanks so much for that, it worked brilliantly

    Thanks again
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  4. #4
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  5. #5
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The background needs to be transparent you see, i am attaching what it should look like, you will see what i mean

    Hopefully someone can help..
    Attached Images Attached Images
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    #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;
    }
    Code:
        <div id="latestceleb"><img src="http://www.loumolloy.com/lou/images/celeb.jpg" alt=""/><span></span>
            </div>

  7. #7
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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. #9
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah i see

    It's working now

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

    Thanks again Paul
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •