сделать фоновое изображение за пределами div

Question

Я пытаюсь сделать фоновое изображение за пределами div и не могу понять, как это сделать (если это возможно). Мой HTML:

<div id="test"></div> 

Мой CSS:

#test { 
    width: 50px; 
    height:50px; 
    background: 0 50px url('https://developers.google.com/_static/images/developers-logo.svg') blue; 
} 

Изолированный демо:

http://jsfiddle.net/568Zy/

Демонстрационная показывает изображение в пределах 50х50 дел. Я надеялся, что фоновое изображение начнется с 0px сверху и 50 пикселей слева.

Любые идеи?

Answer 1

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

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

Я использовал эту технику на вашем примере: http://jsfiddle.net/568Zy/11/

#test { 
    background: blue; 
    height:50px; 
    position: relative; 
    width: 50px; 
} 
#test:before { 
    background: url("https://developers.google.com/_static/images/developers-logo.svg") repeat scroll 0 0 transparent; 
    content: " "; 
    display: block; 
    height: 100px; 
    position: absolute; 
    width: 450px; 
    z-index: -1; 
} 

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

Answer 2

Попробуйте следующее: http://jsfiddle.net/568Zy/16/. По существу, вы создаете два элемента <div> и устанавливаете абсолютное значение с z-index: 0; на одном и z-index: 1; с другой.

<div id="test">zzz</div> 
<div class="z-index"></div> 

#test { 
    background: blue; 
    width: 50px; 
    height:50px; 
    position: relative; 
    z-index: 1; 
} 

.z-index { 
    position: absolute; 
    background: url('https://developers.google.com/_static/images/developers-logo.svg'); 
    z-index: 0; 
    width: 300px; 
    height: 100px; 
    top: 0px; 
    left: 50px; 
}