Как сделать страницу с двумя столбцами с фоном img, который масштабируется в одной из столбцов?

Question

Я новичок в CSS, и я хочу создать двухколоночный макет; один столбец (около 70%) с фоновым изображением и один с полосой прокрутки (около 30%). Я хочу, чтобы фоновое изображение и полоса прокрутки изменялись/масштабировались так, чтобы он соответствовал размеру окна браузера, но высота фонового изображения всегда была такой же, как и окно браузера.

Надеюсь, что кто-то может мне посоветовать, и понять, что я имею в виду, несмотря на мои не очень хорошие объяснения и навыки CSS.

Answer 1

Вы можете использовать display:inline-block для создания двухколоночного макета. И чтобы размер фонового изображения был таким же, как у браузера, вы можете сделать background-size:cover.

Примечание: Прокрутка во втором столбце зависит от содержимого этого столбца.

HTML:

<div class="box1">box1</div> 
<div class="box2">box2</div> 

CSS:

.box1 
{ 
display:inline-block; 
width:70%; 
background : url(url/to/image) no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

.box2 
{ 
display:inline-block; 
width:30%; 
} 

В качестве альтернативы вы можете сделать то же самое с Bootstrap.

вы можете не получить точно соотношение 70-30, но вы можете играть с различными параметрами.

HTML:

<div class="row"> 
    <div class="col-md-8 box1 "> 
     column1 
    </div> 
    <div class="col-md-4"> 
     column2 
    </div> 
</div> 

CSS:

.box1 
{ 
background : url(url/to/image) no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

Не забудьте включить загрузчик в вашем коде.