Home/ Questions/Q 8590349
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T23:16:28+00:00

I have a splash page for my website that is implemented as a background

  • 0

I have a splash page for my website that is implemented as a background image on a main div:

#main
{
    background:url('../img/splash.jpg');
    background-repeat:no-repeat;
    width:1024px;
    height:768px;
    margin:auto;
}

...
<body>
     <div id="main">
     ...
     </ div>
</body>
...

Issue is that I want to make a part of the backround image clickable into our website. I’ve implmented this by setting a transparent box around the area I want clickable using position:absolute:

#logo-link 
{ 
        position: absolute; 
        top: 30px; 
        left: 350px; 
        width: 600px; 
        height: 280px; 
        background-color: transparent; 
}

...
<div>
    <a id="logo-link" href="/mylink"></a>
</div>
...

This works when I set the box on my screen, but I’ve noticed that the box shifts around on other screen resolutions. To the point where a screen with a much higher resolution has the box shifted to block out a form field to signup on my site!

I believe I’ve implemented the clickable area of a splash page poorly, can you show me how to do better?

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    [Live demo][1]……………………………..
    Hi now define **#main** position:relative;

    as like this

    #main{
position:relative;
}

    [Live demo][2]

    • 0