Overlap background

Navigation
0

On my site I have an animation that is a train track and a train that runs along this same track, but now I wanted to overlap with a bottomless image, which would be tunnels, and to be positioned over the train. >

This is my site as it is now:

AndthisisthebottomlessimagewiththetunicsinthecurvesthatIwastalkingabout,Idonotknowifyoucanseewithoutclickingonit...

And I wanted to put this second image on the site so that the train when passing through them, go behind the image.

    
asked by anonymous 19.04.2017 / 10:59

1 answer

1

With a basic overlay technique , I did some testing and post my conclusions / opinions at the end.

As I do not have the source code, I have created the following code: 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        * {
            margin:0;
            padding:0;
            border:0;
            max-width:100%;
            border-spacing: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
        }
        div.dvMae {
            border: solid 1px red;
            width: 90%;
            min-height: 70%;
            margin: 20px auto 0 auto;
            padding: 50px;
            background: url('img/teste1.png'); /* SOMENTE PARA TESTE / NO CÓDIGO ORIGINAL PODE APAGAR */
            position: relative;
        }
        div.dvFilho {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: url('img/teste2.png'); /* CAMINHO DA IMAGEM COM OS TÚNEIS */
            background-size: 100% auto;
            background-repeat: no-repeat;
            background-position:50% -2000px;
            opacity: 0.5;
        }
    </style>
</head>
    <body>
        <div class="dvMae">
            Fubá
            <div class="dvFilho">
            </div>
        </div>
    </body>
</html>

With this code, I came to this position: NotethatIaddedabrownbackgroundtoyouroriginalimageforbetterdevelopmentvisualization.

Considerations:

  • Theabovecodeisforinstructional/guidancepurposes.Adaptitaccordingtoyourneed;
  • Theoriginalimageisat%pixelresolutionandonlycontainselementsfromthepixel8000x14450(vertically(6214)).Onadevicewithascreen4k,theresolutionis%cos_de%pixels.Whichconcludesthatyourimageisabsurdlylarge.
  • Recreatetheimagewiththetunnelsconsideringthesizeofthetargettobeoverlapped.
  • Considerdifferentresolutions,sinceyourpagecanbevisitedondifferentdevices.Doyouknowtheresponsivedesigner?

PS:Iwastryingtoaccessthisquestionthrough App Stack Exchange , on my cell phone with S. O. Android and the App could not handle the image, causing it to close instantly.

    
19.04.2017 / 14:57
Project Deploy in Laravel 5.4 in Umbler using SFTP in php 5.3 with phpseclib