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>

1 Answer 1

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>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .