How To Make A Background Cover A Separate Div?

I'm doing a site with side-menu. 30% of the screen is the menu and the rest is content. The contents of the div, I put a background image using the COVER method. I used the first e

Solution 1:

Basic approach using background-image and 3 different elements (to prevent xBrowser issues related mostly to Safari) setting the background to cover on the #bg layer element

*{ box-sizing: border-box;}
html, body{ height:100%; }
body{ position:static; margin:0; }

#bg{
  background: url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg') 50%;
  background-size: cover;
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 70%;
}
#menu{
  position: fixed;
  bottom: 0; top: 0; left: 0;
  width: 30%;
  background: rgba( 0, 0, 255, 0.4 );
}
#page{
  position: relative;
  border: 10px dashed #000;
  margin-left: 30%;
  width: 70%;
  height: 2000px;
}

<divid="bg">BG</div><divid="menu">FIXED</div><divid="page">SCROLLABLE</div>

on top of that code you can apply CSS3 media queries as you please.

Note that the "easiest" would be not to use the separate #bg element but instead to set the bg image directly to the #page element using background-attachment: fixed; but, as mentioned, the image might not appear on Safari in combination with it's size set to cover.

Solution 2:

use the background-image attribute in your CSS. You can create a separate class to use in the CSS that only has that attribute.

.bgImage {
    background-image: url("fundo.jpg");
}

then apply the class to the <div> tag.

<div id="direita" class="bgImage" style="width: 70%; height: 500px">
   ...    
</div>

Solution 3:

Let's do it the easy way - use the CSS background-image: url("fundo.jpg"); on the div's style.