Position an image on the top left corner of a div's border

Question

Position an image on the top left corner of a div's border

I have a situation where I'm trying to overlay a small square transparent image on the top left border of a div that has a 1px border. The image is 48px by 48px in size and I want it to give the illusion that it's going underneath the top and left borders of the div.

I've tried using background-image with 'left top' positioning, but it ends up placing the image inside the div's borders instead of overlapping them like I want it to. Unfortunately, I don't have any examples to provide, so I hope my explanation is clear enough.

For reference, you can view the JSFiddle here: 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;
}

html css

Answer 1

Answer №1

Your question isn't entirely clear without any visuals or demos showcasing the desired effect. However, based on my understanding, you can achieve what you want by utilizing CSS properties such as position: relative; for the container div, and using an actual img tag inside the div with position: absolute;, top: -1px;, and left: -1px;.

If your goal is to move a background image outside of the element area, that's not feasible. In such cases, you should use an actual img tag.

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

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

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

Update: (Following the addition of a demo)

Are you looking for something similar to this?

Answer 2

Your question isn't entirely clear without any visuals or demos showcasing the desired effect. However, based on my understanding, you can achieve what you want by utilizing CSS properties such as position: relative; for the container div, and using an actual img tag inside the div with position: absolute;, top: -1px;, and left: -1px;.

If your goal is to move a background image outside of the element area, that's not feasible. In such cases, you should use an actual img tag.

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

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

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

Update: (Following the addition of a demo)

Are you looking for something similar to this?

Answer 3

Answer №2

Is this the kind of thing you're looking for? http://jsfiddle.net/q44k5/

Here's the HTML:

<div> </div>

And here's the 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;
}

Answer 4

Is this the kind of thing you're looking for? http://jsfiddle.net/q44k5/

Here's the HTML:

<div> </div>

And here's the 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;
}

Answer 5

Answer №3

Check out this suggested CSS snippet:

#sidePanel{
    position:relative;
}
background: #ffffff url('http://spikyarc.net/images/up_Arrow.png') no-repeat top right;

Here is an example of the HTML code to use:

<img id="sidePanel" src="http://spikyarc.net/images/up_Arrow.png" />
<div class="sidebar">
  Your content goes here.
</div>

Answer 6

Check out this suggested CSS snippet:

#sidePanel{
    position:relative;
}
background: #ffffff url('http://spikyarc.net/images/up_Arrow.png') no-repeat top right;

Here is an example of the HTML code to use:

<img id="sidePanel" src="http://spikyarc.net/images/up_Arrow.png" />
<div class="sidebar">
  Your content goes here.
</div>

Position an image on the top left corner of a div's border

Answer №1

Answer №2

Answer №3

Similar questions

Leveraging IE conditional comments for including CSS or JavaScript files can lead to an increase in the number of HTTP

The <a> element does not direct to a different webpage

Extract ID for Bootstrap modal display

How can I utilize a PHP variable as the height and width parameters in a CSS style?

JavaScript event array

The .remove() method is ineffective when used within an Ajax success function

Eliminate all elements marked with a particular class when the user clicks outside of a

Styling Your Website: Embrace CSS or Stick with Tables?

Display a full-screen image and align it horizontally from the center using CSS styling

Retrieve SQL data and store it in a JavaScript variable

What causes child margins to extend beyond the boundaries of div elements?

Generating a dynamic method for uploading multiple files

How to assign attributes to multiple menu items in WordPress without using JavaScript

Using CSS, the ability to scroll to the top of a page is restricted when an inner div expands to the top while using flex

Minimize ring size through mesmerizing smoke effects

Utilizing margins in CSS for various div elements

Is there a way to automatically update the input value when I refresh the page following a click event?

Is there a way to convert a button into clickable text that performs the same function as the original button?

Adjusting the height of an <iframe> element to match the full height of the document

The Print Preview Displays No Content When an External Stylesheet Reference is Included in the Printable HTML Content