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

Struggling with CSS Flexbox when it comes to organizing rows and combining Table and Table Cells

Steps for resetting a div's display after adjusting the device size

Steps for generating a unique division element for every javascript response

Encountering difficulties while using JavaScript to complete a form due to issues with loading the DOM

Issue with CSS positioning: Struggling to place images outside a div with floating properties

My AngularJS ng-show functionality is not functioning as expected. I have already reviewed the syntax and still encountering issues

Crafting web design with media queries to ensure responsiveness

Having difficulty extracting information from an HTML page using Swift

Dynamic background rectangle tilted at a 45-degree angle overlays an image

Different methods for modifying the height of an Angular datatable in response to the data provided

Show each item in the list vertically, using a single unordered list but displaying them in

Changing the Direction of News Ticker Movement from Right to Left

Can you explain the significance of "q" and "+" within the CSS properties of the HTML body tag?

Overlap of a fixed right column over a fixed sidebar in Bootstrap 4, causing it to overlap the

Adjust the background of the page at regular intervals

Monitoring changes to a SCSS file

Divs Stacked and Centered

Update the content of a div element without having to fetch an external file

Unable to adjust the padding of the material UI Select component

Align text vertically next to an image