How to make a background cover on a separate div?

Navigation
0

I'm making a website with side menu. 30% of the screen is the menu and the rest is the content.

In the content div, I want to put a background image using the COVER method. I used the first one: link

However, this method works perfectly when the image fills the entire background. As in my example I want it to occupy exactly 70% of the width, it "eats" the corners of the image.

How can I resolve this?

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; 
}
}
    
asked by anonymous 28.12.2015 / 20:22

4 answers

3

See if this is what you wanted: 

*{
   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>

The two divs have a bg with the background-size: cover method, instead of using the img tag. Only% of content% is fixed. The rest is according to the question settings.

Image example

    
28.12.2015 / 20:51
2

Instead of putting a tag inside the # right, try applying the background to the CSS. 

#direita {
  background-image = url(fundo.jpg);
  background-size = cover;
  background-repeat = no-repeat;
}
    
29.12.2015 / 12:05
0

I believe this meets your need: 

.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>

Example: link

    
28.12.2015 / 20:55
0

If I understood your question, in order for the image to fit covering the entire div background of the content, place the background-size property with that value. background-size: 100% 100%.

    
28.12.2015 / 22:56
Syntax error warning on the console running AngularJS Block special characters but allow hyphen