Imagens sobrepostas

[mruoppolo 14]

Olá, tudo bem?

 

Estou montando um layout para um cliente em Bootstrap e tinha quase uns 2 anos que eu não mexia em frontend, então estou um tanto perdido, gostaria de saber como você me recomenda montar esta parte do layout aqui:

 

 

Perceba que são 2 containers diferentes, porém a imagem sobrepõe os 2, criei um row no de cima e coloquei a imagem como background-image, o de baixo é outro row com a imagem em branco, eu preciso montar isso, no responsivo eu vou simplesmente apagar esta imagem ai.

 

Como eu posso fazer pra ela ficar desta forma?

 

Obrigado :D

[L. Henrique 179]

Certo... E o que você já tentou e onde está o código?

Tecnicamente quando você adiciona linhas e colunas (grids do bootstrap) ele tende a respeitar sua largura e altura. Se a imagem não está respeitando, pode ter algo de errado no HTML (quando a estruturação e mal utilização do Bootstrap) ou até mesmo uma classe ou estilo do CSS que está fazendo tal efeito.

Publique o código que poderemos ajudar com maior precisão.

Abraços!

[mruoppolo 14]

Olá Henrique, tudo bem?

 

Eu já consegui fazer, minha dúvida não era impedir ela de ficar em 2 divs, muito pelo contrario eu precisava que ela ficasse sobre duas divs, assim como esta nesta imagem acima, eu coloquei com com margin-top:-20px;

 

O código esta em: http://www.marcelloruoppolo.com.br/projetos/buscacorrespondentes/home.php

 

Porém o mobile ainda esta todo errado, preciso conseguir arrumar para entregar hoje.

 

Muito obrigado :D

[L. Henrique 179]

Opa Marcello!

Boa! - Agora quanto ao mobile, creio que você definiu muitas alturas e larguras com px, já que ao reduzir, vejo que o conteúdo quebra a altura de algumas divs. Tente inserir a propriedade height: auto; no media query de algumas divs.

Abraços!

[mruoppolo 14]

Boa, isso é uma boa ideia, valeu mesmo L. Henrique

 

Abraço