Как сделать фоновое покрытие отдельным div?

Question

Я делаю сайт с боковым меню. 30% экрана - это меню, а остальное содержимое.

Содержимое div, я разместил фоновое изображение, используя метод COVER. Я использовал первый пример: https://css-tricks.com/examples/FullPageBackgroundImage/css-1.php

Однако этот метод отлично работает, когда изображение занимает весь фон. Как и в моем примере, я хочу, чтобы то же самое занимало 70% от ширины, «ест» углы изображения.

Как это исправить?

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

Answer 1

Базовый подход с использованием background-image и 3-х различных элементов (для предотвращения проблем Xbrowser, связанных в основном с Safari)
настройки фона на cover на #bg слоя элемента

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

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

поверх этого кода вы можете применить CSS3 медиа-запросы как хотите.

Примечание, что «простой» будет не использовать отдельный #bg элемент, но вместо того, чтобы установить Б.Г. изображение непосредственно к #page элементу с помощью background-attachment: fixed;, но, как упоминалось выше, изображение может не появиться на Safari в сочетании с установленным размером cover.

Answer 2

использовать атрибут background-image в вашем CSS. Вы можете создать отдельный класс для использования в CSS, который имеет только этот атрибут.

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

затем примените класс к тегу <div>.

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

Answer 3

Давайте сделаем это простым способом - используйте CSS background-image: url("fundo.jpg"); в стиле Div.