Estou fazendo um site com com menu lateral. 30% da tela é o menu e o restante é o conteúdo.
Na div do conteúdo, quero colocar uma imagem de fundo, utilizando o método COVER. Utilizei o primeiro: https://css-tricks.com/examples/FullPageBackgroundImage/css-1.php
Porém, este método funciona perfeitamente quando a imagem ocupa todo o background. Como no meu exemplo eu quero que o mesmo ocupe exatos 70% da largura, ele "come" os cantos da imagem.
Como posso resolver isso?
HTML:
<div id="esquerda" style="width: 30%; height: 500px">
....conteudo.....
</div>
<div id="direita" style="width: 70%; height: 500px">
<img src="fundo.jpg" class="bg">
</div>
CSS:
.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
float: right;
}
@media screen and (max-width: 1024px){
.bg {
left: 50%;
margin-left: -512px;
}
}
div
do conteúdo, mas adiv#direita
já possui um bg, como um elementoimg
, é isso? Você não poderia aplicar esse background com css, sem utilizar a tagimg
?