Insert an image or icon within the boundaries of a div element

I need assistance achieving the desired result showcased in the image below. I have successfully added a border around the div for the card, but I am unsure how to place an icon or image on the top border without it looking interrupted. https://i.sstatic.net/y0eqD.png

Below is the HTML code for the Bootstrap 4 card that I am currently using.

  
  <div class="container pt-5 pb-5">
<div class="row">
  <div class="col">
    <div class="card card-thin-v2 w-100 bg-dark-green">
      <div class="card-body card-thin-body-v2">
        
        <h2 class="card-title"><img src="../assets/main/src/img/present-icon.png" alt="" srcset="">text<span class="orange-text">text</h2>
        <p class="card-text">text</p>
        <a href="#" class="btn btn-green">buttonr&nbsp; <i class="icon-arrow-right"></i></a>
      </div>
    </div>
  </div>
</div>

CSS Code

    
.card-thin-body-v2 {
    border: 1px dotted rgba($color: $white, $alpha: .15);
    width: 74rem;
    padding: 1rem .3rem 1rem 1rem;
    margin: 15px 0px 15px 15px;
    background-image: url('../../img/cartu-book.svg');
    >h2 {
        color: $white;
        font-family: "adobe-caslon-pro";
        font-size: 40px;
        font-style: normal;
        font-weight: 600;
        line-height: 48px;
        letter-spacing: 0em;
        margin-left: 1rem;
        >img {
            height: 50.66937255859375px;
            width: 53.306663513183594px;
            border-radius: 0px;
            margin: 20px 5px -10px 0px;
        }
    }
    >p {
        font-family: "adobe-

<!-- begin snippet: js hide: false console: true babel: false -->
<div class="container pt-5 pb-5">
    <div class="row">
      <div class="col">
        <div class="card card-thin-v2 w-100 bg-dark-green">
          <div class="card-body card-thin-body-v2">
            
            <h2 class="card-title"><img src="../assets/main/src/img/present-icon.png" alt="" srcset="">text<span class="orange-text">text</h2>
            <p class="card-text">text</p>
            <a href="#" class="btn btn-green">buttonr&nbsp; <i class="icon-arrow-right"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>

Your help would be greatly appreciated. Thank you!

cssbootstrap-4

Answer №1

Here is a solution for you...

Create two divs as described below:

  • First div without any border (outer)
  • Second div with a dashed border (inner)

To adjust the image position, apply margin-top: -2%; to the image. Additionally, use padding-left: 2%; and padding-right: 2%; to break the border line and ensure both the outer div and the image have the same background-color (e.g. background-color: gray;) so that the image appears to cut through the dashed border.

#box {
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: 2vw;
  background-color: gray;
  margin-top: 2.5%;
}

#dashed {
  width: 90%;
  height: 90%;
  border-width: 5px;
  border-style: dashed;
  border-radius: 2vw;
}

#image {
  width: 10%;
  margin-top: -2%;
  padding-left: 2%;
  padding-right: 2%;
  background-color: gray;
}
<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <link href='https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187a77776c6b6bcb797575100151ea0c3c07b0e1ccbfb1abec9f7f0">[email protected]</a>/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
  <link rel='stylesheet' type='text/css' href='style.css'>
  <script src='javascript.js'></script>
</head>

<body>

  <div class='container-fluid d-flex justify-content-center'>
    <div class='d-flex align-items-center justify-content-center' id='box'>
      <div class='d-flex align-items-start justify-content-center' id='dashed'>
        <img id='image' src='https://animals.sandiegozoo.org/sites/default/files/2016-11/animals_hero_giraffe_1_0.jpg'>
      </div>
    </div>
  </div>

</body>

</html>

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

Is there a way to adjust the theme color in _variables.scss by recompiling Bootstrap while working with Angular and CSS?

I've been trying to update the primary color in my Angular project by editing the SCSS file node_modules/bootstrap/scss/_variables.scss. However, after stopping npm and running the front-end again, I noticed that the changes I made are not reflected i ...

csstwitter-bootstrapbootstrap-4sassbootstrap-5

Having Trouble With Your Font Display?

I am confident that my code is correct. Here's a snippet from what I've done: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="homepage.css"/> </head> <body> <div id="menu"> &l ...

cssfontsfont-face

Issue with strange symbols appearing in Safari on Mac

Hey there! I have this website built with asp.net and I have a text-box for filling in quantities. Sometimes, I notice this strange icon that looks like a human appearing on the text box. It only seems to show up when using Mac Safari browser. Check out th ...

jqueryasp.nettwitter-bootstrapcsssafari

Tips for creating a responsive ReactJS website with Material-UI

I've been working on a reactjs project with material-ui, and everything looks great on desktop. However, when I switch to the mobile layout, all the text and images start overlapping. I'm wondering how I can make my site responsive. Below you&apo ...

cssreactjsflexboxmaterial-uigrid-layout

Instructions on how to create a horizontal scrolling div using the mouse scroll wheel

I need help with scrolling a div horizontally using the mouse scroll button. My div does not have a vertical scroll and I would like users to be able to scroll horizontally. Can anyone provide guidance on how to achieve this? ...

javascripthtmlcss

layering information on the backstretch

My goal is to include a div with a specific title above the JQuery Backstretch images. The current code setup is as follows: <div class="col-md-4 col-xs-12"> <div class="imgs"> </div> </div> When I try to insert any conten ...

javascriptjquerycssjquery-backstretch

Enhancing NG Style in Angular 6 using a custom function

Today, my curiosity lies in the NG Style with Angular 6. Specifically, I am seeking guidance on how to dynamically update [ngStyle] when utilizing a function to determine the value. To better illustrate my query, let me present a simplified scenario: I ha ...

cssangulartypescriptng-style

How can I use JavaScript and HTML to print a canvas that is not within the print boundaries?

As someone who is new to javascript, I recently created a canvas function that allows me to successfully print. However, I am encountering an issue with printing large canvas areas. When I navigate to the further regions of the canvas and try to print, i ...

javascriptcsshtmlcanvasprinting

Help with Crafting Responsive CSS Design

I am seeking help to better comprehend the concept of responsive design through this question. Let's imagine a header on a standard desktop screen. Within that, I have a div element containing the information I wish to showcase. .hdrinfo{ width: ...

cssresponsive-designmedia-queries

The upper spacing is malfunctioning

Why is my margin-top not working when margin-left is functioning as expected? p.ex1 { margin-top: 15px; margin-left: 35px; } <div class="footer2"> <p class="ex1"> ABOUT US </p> <hr> <div class="footer"> &l ...

css

What could be causing my CSS transitions to fail when using jQuery to add classes?

I'm currently working on a website and I'm facing an issue with the transition not functioning as expected. The problem persists even when the 7.css stylesheet is removed and interestingly, the transition works fine when using window:hover. My a ...

javascriptjquerycsscss-transitions

What is the best way to use inline-block for older versions of Internet Explorer, specifically under

Looking to display rating stars in a row using repeated images with the inline-block property: <span class="stars" style="width:20px; margin-top:15px;"> <span style="width:40px;"></span> </span> span.stars, span.stars span { ...

htmlcssinternet-explorer

Can using display: none impact the SEO of a website's navigation menu?

Is there a difference in SEO impact between using display:none with CSS and using display:none with jQuery for menus? Appreciate the insights! ...

jquerycssseomenu

Collapse the columns and set them to float on the left side

My current setup might not be the most visually appealing, but it gets the job done. I have several col-md-4 tags in place. The issue arises when the height of the first tag is larger than the ones next to it, causing the subsequent tag to appear in the mi ...

angularjstwitter-bootstrapcsstwitter-bootstrap-3

How can I align the kendoMenu in the center when the menu width is unpredictable?

Presenting a modified menu structure: <html class="k-webkit k-webkit40"> <head> <title>Site Title</title> <!-- js and css files referenced here --> </head> <body> <link h ...

jquerycsskendo-menu

Picture not adapting correctly to various screen sizes

I'm looking to adjust the size of an image based on the user's browser window. Here is the code I have so far: .image { max-height: 15%; width: auto; } The image class is used in this section of my code: <ul> <li> <img c ...

htmlcss

Calculating dimensions for parents and their children

Could someone please explain to me why the size of #child is different from that of #parent? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or ...

htmlbordermargincss

I'm looking to design a search/filter feature for a website that is specific to my local area, complete with a

I have created a local page search input box that currently filters results as you type. However, I am looking to modify it so that the search/filter function only executes when a specific button is pressed. Essentially, I want users to input their lookup ...

javascripthtmlcssbuttoninputbox

The utilization of the <span> tag featuring a {float:right] property causes container expansion in Internet Explorer 7

Within my HTML code, I have an A tag button that contains a Span element to hold icons. This setup functions correctly in most browsers, except for IE7. When I attempt to float the Span to the right side using CSS, it causes issues specifically in IE7, cau ...

htmlcsscss-float

What is the reason why the show() function in JQuery only applies to one specific element, rather than all elements selected with the same selector?

JSFiddle. This example code features a nested <table> within another <table>. The main issue concerns the click listener for the #add button. Specifically, the final if/else statement in the function. When you execute this code and click the ...

javascriptjqueryhtmlcss