0

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; 
}
}
1
  • Deixa eu ver se entendi, você deseja aplicar um bg na div do conteúdo, mas a div#direita já possui um bg, como um elemento img, é isso? Você não poderia aplicar esse background com css, sem utilizar a tag img? 28/12/2015 às 19:35

4 Respostas 4

3

Veja se isso é o que queria:

*{
   padding: 0;
   margin: 0;
   border: 0;
}
body, html{
  height: 100%;
}
#esquerda{
  width: 30%;
  height: 500px;
  background: url('https://css-tricks.com/examples/FullPageBackgroundImage/images/bg.jpg') no-repeat fixed;
  background-size: cover;
  background-position: center;
  float: left;
  clear: left;
}
#direita{
  width: 70%;
  height: 500px;
  background: url('http://shmector.com/_ph/17/990955453.png') no-repeat;
  background-size: cover;
  background-position: center;
  float: right;
  clear: right;
}
<div id="esquerda"></div>
<div id="direita"></div>

As duas divs possuem um bg com o método background-size: cover, ao invés de usar a tag img. Apenas o da div do conteúdo é fixo. O resto está de acordo com a definições da pergunta.

Imagem exemplo

2

Em vez de colocar uma tag dentro da #direita, experimente aplicar o background pelo CSS.

#direita {
  background-image = url(fundo.jpg);
  background-size = cover;
  background-repeat = no-repeat;
}

0

Acredito que isso atenda sua necessidade:

.general { height: 800px; background: url('https://css-tricks.com/examples/FullPageBackgroundImage/images/bg.jpg');
background-position: right top;
background-size: 70%;
background-repeat: no-repeat;
}
<div class="general">

</div>

Exemplo: https://jsfiddle.net/nux9199j/

0

Se eu entendi sua pergunta, para que a imagem encaixe cobrindo todo o fundo da div do conteúdo, coloque a propriedade background-size com esse valor. background-size:100% 100%.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .