¿Cómo hacer que un fondo cubra un div por separado?

Estoy haciendo un sitio con menú lateral. El 30% de la pantalla es el menú y el rest es contenido.

El contenido del div, pongo una imagen de fondo usando el método COVER. Utilicé el primer ejemplo: https://css-tricks.com/examples/FullPageBackgroundImage/css-1.php

Sin embargo, este método funciona perfectamente cuando la imagen ocupa todo el fondo. Como en mi ejemplo, quiero que el mismo exacto ocupe el 70% del ancho, “come” las esquinas de la imagen.

¿Cómo puedo arreglar esto?

HTML:

....conteudo.....

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; } } 

Enfoque básico usando background-image y 3 elementos diferentes (para evitar problemas de xBrowser relacionados principalmente con Safari)
establecer el fondo para cover el elemento de capa #bg

 *{ box-sizing: border-box;} html, body{ height:100%; } body{ position:static; margin:0; } #bg{ background: url('http://sofes.miximages.com/html/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; } 
 
BG
SCROLLABLE

usa el atributo background-image en tu CSS. Puede crear una clase separada para usar en el CSS que solo tiene ese atributo.

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

luego aplica la clase a la etiqueta

.

 
...

Hagámoslo de la manera más fácil: use la background-image: url("fundo.jpg"); CSS background-image: url("fundo.jpg"); en el estilo del div