The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Logo Overlay – Z INDEX – Photography Page – SOLVED.

  • # December 17, 2012 at 12:14 am

    Hi all, I’m trying to overlay a logo on top of the bottom right corner of the main photo gallery slider and having no success!!

    I have uploaded the logo and saved in a .png format with a transparent background:

    And here is the site:

    Thanks so much for the help!!

    # December 17, 2012 at 12:45 am

    Hi there,

    I’ve just had a play around with it on [CodePen]( “”), using absolute positioning to get it in the right spot, while maintaining responsiveness. Not sure if it’s exactly what you’re after but could serve as a starting point :)

    Perhaps there’s a better solution that doesn’t use absolute positioning?

    # December 17, 2012 at 2:31 am

    You could try this.

    Add the image right before the Nivo Slider div

    Give the image a class. I used image-overlay and apply the following style:

    position: absolute;
    z-index: 9999;
    top: 575px;
    right: 70px;

    # December 21, 2012 at 5:52 am


    # December 21, 2012 at 9:01 am

    I will just note that instead of positioning the logo from the top as Steven has done, I would position it from the bottom, as I did in [my version]( “”). By doing this, it will stay in the correct position, even if you change the dimensions of the photo/container

    # December 22, 2012 at 11:39 am

    @stevencrader and @david_leitch … thank you both. I’ll be trying both versions right now!!

    # December 22, 2012 at 6:00 pm

    Does anyone know how to change the opacity of the image? @stevencrader or @david_leitch? Thanks!

    # December 22, 2012 at 6:11 pm


    The point David makes is a great one if you are going to have different sized images or make the site responsive.

    Opacity of which image? The logo or the gallery images?

    # December 22, 2012 at 10:31 pm

    The logo sir.

    # December 23, 2012 at 1:40 am

    Use the opacity tag: `opacity: .3;` The number must be between 0 and 1.

    Word of warning: when using the opacity tag anything inside of the tag will receive the opacity. It isn’t a big deal with the img tag but is if used on a div with elements inside.

    # December 23, 2012 at 11:47 am

    Great! Thanks @stevencrader!

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed