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;
}
}
Let me get this straight, you want to apply a bg na
div
of the content, but thediv#direita
already has a bg, as an elementimg
, is that it? You couldn’t apply this background with css without using the tagimg
?– Samir Braga