Background overlay

Asked

Viewed 965 times

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 backdrop image, which would be tunnels, and that was positioned above the train.

This is my site as it is now:

inserir a descrição da imagem aqui

And this is the bottomless image with the tunnels in the curves I was talking about, I don’t know if you can see without clicking on top... inserir a descrição da imagem aqui

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

html css ruby-on-rails image

  • I don’t know if I got it right, but come on. You want the picture with these obar blue stay over the tracks? If so, ever tried to put a div with position: fixed or tried to put a z-index: 99999? Already stopped to think about the dimensioning of the project in different clients?

  • I used a div but with z-index: 11. I will try

  • The image doesn’t even appear and should appear

  • Blz, but it’s no use you simply change the z-index. Vc should position the image as well. I even quoted the position: fixed, but I believe you should use the position: absolute or position: relative, otherwise the image will be in the same place on the screen when scrolling the page. In the case of relative, place inside the div with the rail. Tip: Use a different image for positioning. But with the same dimension! This image makes positioning difficult.

  • ok I’ll try thank you

  • Post the source code that try help you if necessary.

Show 1 more comment

1 answer

1

With a basic technique of overlapping, I did some tests and will post my conclusions/opinions at the end.

Since I don’t have the source code, I 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’ve reached this position: inserir a descrição da imagem aqui Note that I added a background brown to its original image for better visualization in development.

Considerations:

  • The above code is for instruction/guidance purposes. Adapt it according to your need;
  • The original image is with resolution of 8000 x 14450 pixels and only have elements from the pixel 6214 (upright (y)). On a device with screen 4k, the resolution is to 3840 × 2160 pixels. Which concludes that your image is absurdly large.
  • Recreate the image with the tunnels considering the size of the target to be superimposed.
  • Consider different resolutions, since your page can be visited on different devices. You know the responsive designer?

PS: I was trying to access this question by App Stack Exchange, on my cell phone with S. O. Android and the App couldn’t handle processing the image, causing its instant closure.

Browser other questions tagged html css ruby-on-rails image

You are not signed in. Login or sign up in order to post.