Logo placement on responsive image

Question

I have a responsive background image that fades in and out using the jQuery vegas plugin http://vegas.jaysalvat.com/

I have a logo in a separate div that fades in and out in front of the background image. It has to be positioned absolute to a specific spot in the background image. I modified the plugin to update the logos left and top coordinates.

How do I make it so if the background is responsive, the logo will stay in the correct spot of the image?

Thanks

Answer 1

You could make it so that you're also rotating through a set of your logo, where each image in the logo set would be sized to the same as the background images, and the placement of the logo in those images would correspond to where it needs to be for that corresponding background image.

Answer 2

You could try putting the logo's element within the image element for the vegas slideshow. It would look something like this I think:

<img id="vegas-background">
    <div id='logo-wrapper' style='position: relative; height: 100%;'>
        <img id="logo" />
    </div>
</img>

The relative position on the logo-wrapper will make it so that the absolute position will be relative to the image, instead of the page like it is now. I believe vegas creates that img element, so you'll need to insert the logo-wrapper and logo element using javascript (jquery used in the below), perhaps using one of the vegas events:

$('body').bind('vegasstart', 
    function(e) {
        $('vegas-background').append("
            <div id='logo-wrapper' style='position: relative; height: 100%;'>
                <img id="logo" />
            </div>
        ");
    }
);