CODEWITHSUNDEEP
htmlcss
DS.
DS.

Reputation: 3004

Overlay image on div border top left

I have a div with a border of 1 px. I have a square transparent-in-parts png image much smaller than the div 48px * 48px.

I'd like to position the square image such that it overlays the top left border of the div giving the appearance of both top and left borders going underneath the image.

Using background-image 'left top' puts the image inside the div borders which is not what I'm looking for. Wish I could show an example but I don't have any. Hope my question describes it well.

Here's the JSFiddle: http://jsfiddle.net/9sn22/1/

<div id='mybox'>text</div>

#mybox {
text-indent: 0.5in;
background-image:url('http://aerbook.com/site/images/quote-mark-icon-black.png');
border-radius:3px;
border: 1px solid #cccccc;
height: 300px;
font-weight: 200;
text-indent: 0.35in;
padding: 20px;
background-repeat:no-repeat;
background-position: left top;
}

Upvotes: 1

Views: 10626

Answers (3)

Mr. Alien
Mr. Alien

Reputation: 157334

Not quiet getting your question as there are no images or any demo for the desired effect you are trying to achieve, but from what I understood, you can use position: relative; for the container div and use a literal img tag inside the div and use position: absolute; with top: -1px; and left: -1px; respectively.

If you are trying to make the background-image move out of the element area than it's not possible...you need to use img for this

<div>
   <img src="#" />
</div>

div {
   position: relative;
   border: 1px solid #000;
}

img {
   position: absolute;
   left: -1px;
   top: -1px;
}

Update: (After you added a demo)

Do you need something like this?

Upvotes: 4

Falguni Panchal
Falguni Panchal

Reputation: 8981

try this css below

#cLeft{
    position:absolute;
}
background: #ffffff url('http://spikyarc.net/images/down_Arrow.png') no-repeat top left;

try this html below

<img id="cLeft" src="http://spikyarc.net/images/down_Arrow.png" />
<div class="content">
  Your Text here.
</div>

Upvotes: 0

Chanckjh
Chanckjh

Reputation: 2597

do you mean something like this? http://jsfiddle.net/q44k5/

html:

<div> </div>

css:

    div{
        border: 1px solid red;
        height: 100px;
        width: 100px;
        position: relative;
        margin: 50px;
    }

div:before{
    content: '';
    height: 20px;
    width: 20px;
    position: absolute;
    top: -10px;
    left: -10px;
    background: green;
}

Upvotes: 2

Related Questions