使背景图像位于 div 之外

Question

I'm trying to make a background image be outside a div and can't figure out how to do this (if even it's possible). My HTML:

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

My CSS:

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

A stand-alone demo:

http://jsfiddle.net/568Zy/

The demo shows the image within the 50x50 div. What I was hoping for was to have the background image start at 0px from the top and 50px from the left.

Any ideas?

Answer 1

Your question does not make it clear exactly what you want the end result to look like.

It is not possible to make a background image 'overflow' it's element, however you can apply the background image to a pseudo element and make that whatever size you want and position it wherever you want.

I have used this technique on your example: http://jsfiddle.net/ybw750jd/

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

If this is not the effect you want, please rephrase your question and consider making a mock up image showing what you want it to look like.

Answer 2

Try this: http://jsfiddle.net/568Zy/16/ . Essentially, you're creating two <div> elements, and set one to be absolute with a z-index: 0; on one and z-index: 1; on the other.

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