0

I have a visualforce page on which I want to show a full height png image with a hole in the middle. In that hole i want to show an animated gif. On top of the page I want to use an image as a button with a link.

I managed the gif behind the image. The image which I use for the button appears next to the full height image. How do I make this button image overlay the other image?

VFP:

<apex:page controller="OfferteBevestigingController" action="{!bevestig}" sidebar="false" showHeader="false">
    <style>
        body{ 
        background-image: URL("{!$Resource.LandingspaginaAnimatie}");
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: 20% 30% !important;     
        }
    </style>
    <div style="text-align:center;">
        <apex:image url="{!$Resource.Landingspagina}" width="" height="100%"/>
        <apex:outputLink value="https://www.google.com" id="theLink"><apex:image url="{!$Resource.Buttonhomepage}" width="" height="100%"/></apex:outputLink>
    </div>
</apex:page>
0

It can be done by adding some style to the <apex:image> tag like following,
<apex:outputLink value="https://www.google.com" id="theLink"><apex:image url="{!$Resource.Buttonhomepage}" width="" height="100%" style="margin-top:-65%"/></apex:outputLink>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.