Is it possible by setting an attribute that I have not discovered yet to have an element's background image actually extend outside the elements boundaries?
For instance, I have
#Test {
background-image: url(images/bg1.gif);
background-repeat: no-repeat;
background-position: 0px -50px 0px 0px;
}
and
<div id="test">Foobar</div>
I'd like the image to appear 50px above the div in question, however, it seems to be clipped by the actual boundary of the div. I've tried playing with the clip property, but it seems to only allow me to specify an even smaller interior space. I want a negative clip if you will.
Overflow also does not work as that seems to pertain to actual content, not the bg image.Make the img the bg of a larger containing div. Place the other div inside itMake the img the bg of a larger containing div. Place the other div inside it
Won't work for what I'm trying to do. Major pain to redo entire site to add that extra container to all pages.
Plus I was just curious in general as I try to build up my "toolbox" as I'm fairly new to CSS.
Thanks!I dont believe a bg can exceed the element
I would set the bg image and use padding to keep the content fo the element smaller that the img behind it
Let us know if you figure out something different thoughThe background image will fill to the inside edge of the border. The content will only go as far as the inside edge of the padding so the background will extend the width/height of the padding outside of the content.
For instance, I have
#Test {
background-image: url(images/bg1.gif);
background-repeat: no-repeat;
background-position: 0px -50px 0px 0px;
}
and
<div id="test">Foobar</div>
I'd like the image to appear 50px above the div in question, however, it seems to be clipped by the actual boundary of the div. I've tried playing with the clip property, but it seems to only allow me to specify an even smaller interior space. I want a negative clip if you will.
Overflow also does not work as that seems to pertain to actual content, not the bg image.Make the img the bg of a larger containing div. Place the other div inside itMake the img the bg of a larger containing div. Place the other div inside it
Won't work for what I'm trying to do. Major pain to redo entire site to add that extra container to all pages.
Plus I was just curious in general as I try to build up my "toolbox" as I'm fairly new to CSS.
Thanks!I dont believe a bg can exceed the element
I would set the bg image and use padding to keep the content fo the element smaller that the img behind it
Let us know if you figure out something different thoughThe background image will fill to the inside edge of the border. The content will only go as far as the inside edge of the padding so the background will extend the width/height of the padding outside of the content.