Получение двух разделов для совместного использования одного фонового изображения

Question

Итак, я пытаюсь получить два отдельных div, которые находятся близко друг к другу, чтобы поделиться одним фоном, но я не уверен, что это возможно. Я загрузил две фотографии, второй - для меньшего экрана (просто для того, чтобы объяснить, что я имею в виду) http://imgur.com/a/2dypd. Я не могу представить, что два отдельных фоновых изображения будут работать, поскольку они не выстраиваются в линию при изменении размера окна.

Единственное решение, о котором я могу думать, это создать два простых белых divs для наложения на один div, но это похоже на издевательство. Я не ожидаю, что для меня будет написан кусок кода, возможно, просто объясните, возможно ли это, и ссылку, чтобы я мог учиться. Приветствия.

Answer 1

на основе комментариев @ cale_b, вы можете установить один и тот же фон для обоих div-х, а затем использовать свойство background-position сделать иллюзию обмена фона.

Затем вы можете использовать медиа-запросы, чтобы они хорошо выглядели на мобильных устройствах.

Здесь у вас есть простой пример, который выглядит как один вы публикуемую:

#wrapper { 
 
    width: 800px; 
 
    font-family: sans-serif; 
 
} 
 

 
#top { 
 
    height: 200px; 
 
    margin-bottom: 20px; 
 
    background-image: url("https://placekitten.com/800/400"); 
 
    background-position: 0 0; 
 
    line-height: 150px; 
 
    color: #FFF; 
 
    font-size: 32px; 
 
    text-indent: 50px; 
 
} 
 

 
#bottom { 
 
    width: 500px; 
 
    height: 100px; 
 
    background-image: url("https://placekitten.com/800/400"); 
 
    background-position: 0 -220px; 
 
} 
 

 
#bottom ul { 
 
    list-style: none; 
 
} 
 

 
#bottom ul li { 
 
    display: inline-block; 
 
    list-style: none; 
 
    padding: 0 10px; 
 
    line-height: 50px; 
 
    color: #000; 
 
    font-size: 24px; 
 
}

<div id="wrapper"> 
 
    <div id="top"> 
 
    I'm a banner 
 
    </div> 
 
    <div id="bottom"> 
 
    <ul> 
 
     <li>I'm</li> 
 
     <li>a</li> 
 
     <li>menu</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

Как я понимаю, вы хотите использовать только одну копию изображения одного изображения в течение двух div, и вы не хотите использовать любые накладки .

Таким образом, вы можете сделать следующее:
На нижнейdiv используйте background-position-y:-100pxили любой другой желаемый значение. Таким образом вы нажимаете изображение вверх.

Это выглядит многообещающим, но вы столкнетесь с проблемой размера фона, особенно если вы делаете отзывчивую веб-страницу. Я бы сказал, что background-size:100% 100% для обоих div выполнит эту работу, но это сделает изображение растяжкой (если вы не идете действительно отзывчивый).

Я по-прежнему рекомендую использовать наложение или даже готовое изображение. Но если вы настаиваете на использовании двух div, то вышеуказанных шагов должно быть достаточно, пока вы должны сделать свой дизайн подходящим для этого изображения.

N.B. имейте в виду, что вам может понадобиться использовать background-repeat:no-repeat