Com uma técnica básica de sobreposição, fiz alguns testes e postarei as minhas conclusões/opiniões no final.
Como não tenho o código fonte, criei o seguinte código:
<!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>
Com esse código, cheguei a esse posicionamento:
Note que adicionei um fundo marrom à sua imagem original para melhor visualização no desenvolvimento.
Considerações:
- O código acima é para fins de instrução/orientação. Adapte-o de acordo com sua necessidade;
- A imagem original está com resolução de
8000 x 14450
pixels e só tem elementos à partir do pixel 6214
(na vertical (y
)). Em um dispositivo com tela 4k, a resolução é de 3840 × 2160
pixels. O que conclui que sua imagem está absurdamente grande.
- Recrie a imagem com os túneis considerando o tamanho do alvo a ser sobreposto.
- Considere diferentes resoluções, uma vez que sua página poderá ser visitada em dispositivos diferentes. Conhece o designer responsivo?
PS: Estava tentando acessar essa pergunta pelo App Stack Exchange, no meu celular com S. O. Android e o App não aguentou processar a imagem, causando seu fechamento instantâneo.
div
composition: fixed
ou tentou colocar umz-index: 99999
? Já parou pra pensar no dimensionamento do projeto em diferentes clientes?position: fixed
, mas acredito que vc deve usar oposition: absolute
ouposition: relative
, senão a imagem vai ficar no mesmo lugar na tela ao rolar a página. No caso derelative
, coloque dentro da div com o trilho. Dica: Utilize uma imagem diferente, para o posicionamento. Mas com a mesma dimensão! Essa imagem dificulta o posicionamento.