background image to overflow its absolutely positioned container

[Violet_82]

Hi chaps, I wonder whether this is possible or not. Basically, I have an absolutely positioned div with a width and height and a background image (it's a little arrow) that I want to overflow its container so that it sticks out and point at something. Is it possible with background images, or do I have to use a html image?
An example is this:

<div class="me">
    <div class="myDiv">

    </div>
</div>





.me{width:900px; 
height:800px;
position:relative;
/*background:url(ajax-loader.gif) 100px 40px no-repeat;*/
border:1px solid red;}

.myDiv{
    background:url('overlayArrow_03.png') no-repeat -20px 0;
    border:1px solid blue;
    height:150px;
    width:300px;
    position:absolute;
    top:217px;
    left:35px;
}

So here the background image is positioned -20px so it should stick out but it doestn's it looks like there is an overflow:hidden applied as a default. Is there anyway I can get that image to stick out?
thanks

So here the background image is positioned -20px so it should stick out but it doestn's it looks like there is an overflow:hidden applied as a default. Is there anyway I can get that image to stick out?

Can you post an image of the issue?

So we can see the code and the image at the same time.

Then give you an answer whether it is possible.

[Violet_82]

LastMitch, I believe I can't do what I wanted, because a background image can't extend outside its container. So I ended up having an html image, that gave me the flexibility I wanted

I believe I can't do what I wanted, because a background image can't extend outside its container. So I ended up having an html image, that gave me the flexibility I wanted

If you want to extend the background image you can used overflow: visible. It will stick out. I'm not sure if that's what you want.

[Violet_82]

sort of LastMitch, except that even with overflow visible the image won't extend, because it's a background image. What I am saying is essentially that if I have a div and this div has a background image, it's imposible to get the background image to overflow its container: this because we are talking about a background image.
If instead I have a div and inside a div there is a html image so something like:

<div>
    <img src="myImage.jpg">
</div>

and I try to get that image to overflow its container, then this is possible with some css (positioning the image absolutely in its div container)

and I try to get that image to overflow its container, then this is possible with some css (positioning the image absolutely in its div container)

You are correct regarding about the background image not overflowing. You can do that too. I guess you may have to put an image within an image (a div with a div).

I got no idea why you want this kind of design isn't it better to used photoshop and put that image on the image?

It's really up to you how you want it.

I don't know what else to tell you because you already came up with nice scenario of how to do this.

But I feel you wasn't too sure how to approached it so that why you post this question (to ask for an advice and opinion/suggestion).

[Violet_82]

spot on LastMitch : - ), thanks for your help!