Can images be placed on the border?

Hi there! I am trying to add an image on a border with a 100px solid width using CSS. I have experimented with positions and z-index, but I can't seem to get the desired effect. Any ideas on how to achieve this? Here is an example image: https://i.sstatic.net/qIUNl.jpg

<img width="30%" height="30%" src="https://i.imgur.com/deoFQ7i.png" />
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; max-width: 600px !important; border-left: 62px solid #fca9cf;">
    <tr class="container" style="">
        <td valign="top" style="background-image: url('https://i.imgur.com/deoFQ7i.png'); background-repeat: no-repeat; background-position: -20px; background-size: contain; border-top: 0; border-bottom: 0; padding-top: 0; padding-bottom: 0;">
            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock" style="min-width: 100%; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                <tbody class="mcnTextBlockOuter">
                    <tr>
                        <td valign="top" class="mcnTextBlockInner" style="padding-top: 0px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                            <table align="left" border="0" cellpadding="0" cellspacing="0" style="max-width: 100%; min-width: 100%; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" width="100%"
                            class="mcnTextContentContainer">
                                <tbody>
                                    <tr>
                                        <td valign="top" class="mcnTextContent" style="padding: 0px 18px 9px; line-height: 200%; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #603813; font-family: Helvetica; font-size: 16px; text-align: left;">
                                            <p style="font-family: philosopher;color: #603813;font-size: 24px;text-align: center;line-height: 200%;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                <br />
                                                <br />
                                            </p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>
javascripthtmlcsssass

Answer №1

Solution 1:

.rectangle {
  background:pink;
  width:100px;height:150px;
  position:relative;
}

img {
  width:100px;position:absolute;
  right:-86px;
}
<div class="rectangle">
  <img src="https://i.imgur.com/deoFQ7i.png">
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display the data labels for the spiderweb graph only when hovering over the line or corresponding legend

I'm currently working on creating a spiderweb chart using the Highcharts guide. One challenge I'm facing is that the data labels are currently enabled by default. I would like to hide the data on load and only display it when the user hovers over ...

javascriptjqueryhighcharts

Ensuring the Sticky Table Header Moves Alongside Horizontal Scroll

I've been working with an HTML table that has a sticky header, meaning the header stays in place as the table scrolls vertically. However, I'm facing an issue where I need the header to move along with the horizontal scroll, but remain fixed ver ...

htmljquerycss

JavaScript: Launching the current page in a new tab or window

Is it feasible to open a new window or tab from the existing HTML page? Absolutely, I am referring to the current HTML page itself. Not triggered by an external call like this: window.open('page.html', '_blank'); Possible through Jav ...

javascripthtmlinternet-explorer

One Functionality on Button is Failing to Execute among Several Tasks

I've encountered an issue with one of the tasks triggered by a button click. The button successfully executes two out of three tasks (hides them on click), except for the last task which involves a text-blinking JavaScript function. I've used the ...

javascripthtmlscript-tag

New elements can be inserted at the rear of the queue while older elements are removed from the front of the queue

I'm new to JavaScript and currently working on a task involving queues. Here is the task description: Create a function called nextInLine that takes an array (arr) and a number (item) as parameters. The function should add the number to the end of ...

javascriptarraysjson

In JavaScript, capture data returned from a function in a separate variable using a POST REST API call

So, here's the deal - I've got this awesome code that does a POST to an API in order to fetch some data. The best part? It works like a charm when it's wrapped up neatly in a function. But now, the tricky part comes in. I need to actually re ...

javascriptnode.jspost

Updating entire DOM in javascript

Implementing undo-redo functionality in my project has proven to be quite complex, as every change affects numerous elements. I believe that saving and restoring the entire page may be the most effective solution. However, I have encountered issues with mi ...

javascriptdomreplaceundo

Utilizing Angular directives to trigger functions within nested child directives

Seeking guidance on implementing a hierarchical structure in Angular, where a directive (<partition>) can trigger a method on a child directive's controller (<property-value>). Sample example provided: https://jsfiddle.net/95kjjxkh/1/ ...

javascriptangularjsangularjs-directiveparent-child

Testing React components with Jest by mocking unnecessary components

Consider a scenario where we have the Page component defined as: const Page = () => <> <Topbar /> <Drawer /> <Content /> </> When writing an integration test to check interactions within the Drawer and Con ...

javascriptreactjsjestjsintegration-testingenzyme

Optimizing Open Graph tags for sharing WhatsApp links

I am utilizing Open Graph tags to optimize sharing on social media platforms. The image I have specified is 1200 x 630 pixels and displays correctly on Facebook as well as Whatsapp: <meta property="og:image" content="https://emotionathlet ...

htmlfacebook-opengraphwhatsappsocial-media

Exploring Globalization in NextJS

As I work on setting up a NextJS project that requires i18n support, I have come across various libraries dedicated to internationalization. Are these libraries truly necessary? After reviewing the documentation, I find the idea of keeping an object at a g ...

javascriptnext.jsinternationalizationreact-i18nextnext-i18next

What is the best way to assign multiple event handlers to Solid.js components within a single HTML element?

Introduction I am currently exploring Solid.js and facing a challenge in adding multiple event handlers to the same HTML element from different components using JSX. While it's straightforward in Vue, I have noticed that Solid.js overrides events bas ...

javascriptjsxsolid-js

Does Google Chrome have a strange way of interpreting CSS?

Almost done with my website and it looks great on Firefox and IE 8, but Chrome is causing issues. Here's how it appears on FF: And here's Chrome: Notice how Chrome resizes the first image even though the code is the same as the one below? Che ...

cssgoogle-chrome

Using getStaticProps in Next.js to retrieve menu data and seamlessly integrate it into the layout

I have integrated Sanity.io as a backend for my project, specifically managing the data for my main menu in parent/children object arrays. While I am able to successfully fetch this data, I prefer to utilize getStaticProps to ensure that my site remains c ...

javascriptnext.jssanity

I'm experiencing a problem when trying to add a document to Firebase Firestore using React Native - it doesn't seem to

I'm currently working on a React Native project that utilizes Firebase v9. My goal is to add a user object to my user collection whenever a new user signs up through the sign-up screen. However, I've encountered an issue where the user object is ...

javascriptfirebasereact-nativegoogle-cloud-firestore

Incorporating a javascript library or plugin into Vue.js code

Hey there, I recently came across the really cool component called vue-social-sharing. It's my first time using a library like this and I'm a bit confused on how to set it up properly. I've installed it through NPM, but when it comes to the ...

javascriptvue.jsvuejs2vue-component

Getting the dimensions of an image when clicking on a link

Trying to retrieve width and height of an image from this link. <a id="CloudThumb_id_1" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: 'http://www.example.com/598441_l2.jpg'" onclick="return theFunction();" href="http ...

javascripthtml

Simple code styling tool

Seeking guidance to create a basic syntax highlighter using JavaScript or ClojureScript. While aware of existing projects like Codemirror and rainbow.js, I'm interested in understanding how they are constructed and looking for a simple example. Do th ...

javascriptcsssyntax-highlightingcodemirrorclojurescript

What is the best way to increase the height of an image in a grid container beyond the height of

I am currently designing a grid layout to showcase recent articles. Each article includes an image and a brief description. My goal is to have the image taller than the content text block, while ensuring responsiveness across various screen sizes. Below i ...

cssnext.jstailwind-css

Unveiling Insights from a JSON File: Data Extraction

I have a JSON file named pio2.json that contains the following data: { "controles":[{ "chart":[{ "type":"columns", "title":"Pollitos" }], "datos":[{"key":"Math","value":98}, {"key":"Physics" ...

javascriptarraysjson