How to do a background cover on a separate div?

Asked

Viewed 959 times

0

I’m making a site 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: https://css-tricks.com/examples/FullPageBackgroundImage/css-1.php

However, this method works perfectly when the image occupies 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 fix 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; 
}
}
css html5 css3 front-end

  • Let me get this straight, you want to apply a bg na div of the content, but the div#direita already has a bg, as an element img, is that it? You couldn’t apply this background with css without using the tag img?

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>

Both divs have a bg with the method background-size: cover, instead of using the tag img. Only that of div content is fixed. The rest is in accordance with the question’s definitions.

Image example

2

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

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

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: https://jsfiddle.net/nux9199j/

0

If I understood your question, so that the image fits covering the entire background of the content div, put the property background-size with this value. background-size: 100% 100%.

Browser other questions tagged css html5 css3 front-end

You are not signed in. Login or sign up in order to post.