Разделить одно фоновое изображение на два divs

Question

Привет, сообщество stackoweflow, мне нужна помощь, я создаю сайт, и мне нужно разделить изображение в половине, но они должны быть divs. Возможно ли разбить фоновое изображение на половину быть двумя дивидами? Hese является jsfiddle: http://jsfiddle.net/hLt5rguq/6/ Вот HTML-код, как мне это нужно, чтобы выглядеть следующим образом:

<div class="wallpaper"> 
    <div class="left-side"></div> 
    <div class="right-side"></div> 
</div> 

Answer 1

Да, вы просто должны вырезать его на 2 элемента и поместить фон. Я использовал .wallpaper, чтобы показать предыдущее изображение

* { 
 
    box-sizing: border-box; 
 
} 
 
.wallpaper { 
 
    background: transparent url("http://intrawallpaper.com/wp-content/uploads/awesome-rain-wallpaper_0.jpg") no-repeat scroll 0% 0%; 
 
    width: 500px; 
 
    height: 200px; 
 
    float: left; 
 
    margin-top: 10px; //spacing 
 
} 
 
.left-side { 
 
    float: left; 
 
    background: transparent url("http://intrawallpaper.com/wp-content/uploads/awesome-rain-wallpaper_0.jpg") no-repeat scroll 0 top; 
 
    width: 250px; 
 
    height: 200px; 
 
    margin-right: 10px; //show cutting edge 
 
} 
 
.right-side { 
 
    float: left; 
 
    background: transparent url("http://intrawallpaper.com/wp-content/uploads/awesome-rain-wallpaper_0.jpg") no-repeat scroll -250px top; 
 
    width: 250px; 
 
    height: 200px; 
 
}

<div class="left-side"></div> 
 
<div class="right-side"></div> 
 
<div class="wallpaper"></div>

JSFiddle

Answer 2

Попробуйте CSS, какие должны исправить вашу проблему

.left-side, .right-side { 
    width: 50%; 
    float: left; 
    display: inline-block; 
    height: inherit; 
    background-color: transparent; 
} 

Answer 3

Да, мы можем сделать это с помощью CSS, вот пример использования одного изображения пролитое на две дивы с помощью ниже кода

* { box-sizing: border-box; } 
.wallpaper { 
    width:1024px; 
    height:683px; 
    display:block; 
} 
.left-side{ 
    background: transparent url("http://intrawallpaper.com/wp-content/uploads/awesome-rain-wallpaper_0.jpg") no-repeat left top; 
    width:50%; 
    display:inline-block; 
    height:100%; 
    float:left; 
} 
.right-side{ 
    background: transparent url("http://intrawallpaper.com/wp-content/uploads/awesome-rain-wallpaper_0.jpg") no-repeat right top; 
    width:50%; 
    display:inline-block; 
    height:100%; 
}