Home > Enterprise >  I Want To Add A Border Line In My Image In HTML File
I Want To Add A Border Line In My Image In HTML File

Time：07-24

I Was Browsing Many Other Developer's Portfolio And Came Across A Portfolio Where The Profile Image Has A Background With Some Solid Line. You can Check It Here. Or You Can Visit Site https://brittanychiang.com/.

I Also Wanted This Type Of Background In My Image Too. Please Help Me.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.about {
  width: 100%;
  height: 100vh;
  background-color: #161922;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.about .content img {
  height: auto;
  width: 300px;
  border-radius: 0.5rem;
}

.text {
  width: 550px;
  max-width: 100%;
  padding: 0 10px;
}

.content {
  width: 1280px;
  max-width: 95%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.text h1 {
  color: #ffcc74;
  font-size: 85px;
  margin-bottom: 20px;
  text-transform: capitalize;
}

.text h5 {
  color: white;
  font-size: 25px;
  margin-bottom: 25px;
  text-transform: capitalize;
  letter-spacing: 2px;
}

.text p {
  color: #c0c4d4;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 1px;
  margin-bottom: 45px;
}

button {
  background-color: #ffcc74;
  color: black;
  border: 2px solid transparent;
  text-decoration: none;
  padding: 10px 30px;
  border-radius: 30px;
  font-size: 17px;
  font-weight: bold;
}

button:hover {
  transform: scale(1.2);
  background-color: transparent;
  border: 2px solid #ffcc74;
  color: #ffcc74;
  transition: .4s;
  cursor: pointer;
}

@media screen and (max-width: 1180px) {
  .about {
    width: 100%;
    height: auto;
    padding: 70px 0px;
  }
}

@media screen and (max-width: 650px) {
  .about .content img {
    margin-bottom: 35px;
  }
  .text h1 {
    font-size: 60px;
    margin-bottom: 25px;
  }
}
<section >
  <div >
    <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAI0AXgMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAEBgMFBwIBAP/EADsQAAIBAwIDBgQDBAsBAAAAAAECAwAEEQUhBhIxEyJBUWFxFDKBoZGxwSNSctEVFiRCQ2KCkrLh8Af/xAAYAQADAQEAAAAAAAAAAAAAAAAAAQIEA//EAB4RAQEBAQEBAQADAQAAAAAAAAABAhExIRIyQVED/9oADAMBAAIRAxEAPwBjSOiESvkWplWqS8C10EqRRXQFARclcMlE8tcstACMlQulGstQstAV8kfpQkkVWjrQ0iUwqJoc FAyw71dyx0FJFvQRqQVMorlRUqikp6BXWK9FK3HPE39B2iw27AXc2y7Z5B4tRbwSdH69xLp2iERXDPLcsMrbxDLH38hVNb8R6ncwtOsdrGrHCg8xVPRuhz67Cld449QgDWztJeqyuWmbvM3v6 X8q 1DVZUXtX7awuwvKwljJSUe4/PrXHWrfHSZk9OZ4gns4lk1Wz5AThjE2cH08x18c0fp rWGqc3wVwkjL8ydGH08vWshl4vvmXsbgRTRDuspHddfIj9apxedjcm5sJ5oHByuDuv1qs61/Zak/pvzrUDrVDwNrF5q1h/b2V5FAIYLgketMTiuiAMi0LJHvVjItDOtMl6tSrUS1KtBuwKwji/U57rim7nDP3ZOzjT0G2MVu  Nuvh71jHCOm/0nxpKt8A5id2cY25uYio34rHojRNF1a/dJo7IQKV2bmZcj8cY lOC8D3N7a9nf3chj8EzT5biws40SSWJcDABIFWCXVmy92RcVn99afGTy//ADXTkVvm2O3tSlxJwU2nWTXEB5iuTj0rdL 905CQ9xEp8i4FJ3Gc8LaVI0DI4Ix3TnFLtl HyWfYz7gDWGtNTgsxuk7chB3x5EVqrgVhXCYP9a9OUZ3uFIH51uzitWWOhpBQ7iipBUDiqJarUqmoVNSLQaYHb1rK9ItruHifUG0wvGJriVZGKgsT3mULscDZ8n2rUlNLtrYi14lvJGk7s5SVMbMjDP8A76kVz3fjp/znaVdXtdXvW5ZLK1LA4LTyguPpVjw/p3FbW91HZpaKIYBIVunbqc4VSv8AD4 lPl5cwRxc7O4bGxxGT/wovSYOw0yQux7WcFnZ8ZJPn7DAx6Vx7/rv b6wu6i1TUk KewjlLAMC7EE 2TtUFxJf29q4RGUJhezbvKST02rTrBBG9xZXAHKjnkV1V1K GPHHXbO3Twqv4kt7K3tOZuRSDlUSMKCfDPWiaFxxnvBsMMfFqOGY9kjN3hjv4wR9zWwwyCWIMKxXR7gRam9z05mYj6mtQ4evxcRcpO9aMsup9XD1A9TuageqSsUNSqagU1KpoNMDSzxkz2hgvo3wwIiYeh8fx/OmNTS7xuva6PKvjsRnzG4qdTsVnVzexQ2WrSwaz8RqskogjPLFn5ckDvVQazxTrmn6hfLY30j2k0zPGD3uTPlTZwLefG2r2s4VyF5Ckgz NQ8U6DMGVbTRoSjHdkRRj186zT5frX/ACnpV0TiO6g0uS3neWW5kmLxtjmYEjy lfa5q11JbJ8VlXePPL5Z2q1igfQbGe5e3jiflIUYBNI99eS3TFpM5Y758MdBTzJdOe9XM51z2 XXkHKq9POnXhG8KsATsaREFNWg5QIR4VpkZtNPRw6A1y5oLTp eEZ8KKY0yHIamU0KjZqVT60GIBqj4sUvpkgHXFW4NBarbSXNs6opIxjPhSDL5rm90bU/irNuQkd4eDVdHj69mi76f3T4 NE6vpyypuNxtSrdaNseR8eOKzfL603Op4g1rWb3Vn5ZX7gOQg8ar76IRWsS9SGPMfMkVY2tgIjzE5YdKMk01Z7bkcbE9aqakqfxbKWI/mFNujD9mPah7Pg28upCtpKhYDIV9s/WjrWyutPfsruCSJht3hsfY12zqXxw1LPlMumS8owTVqHyKX7Z U1aRSnl61SYto3oiFXlcJGpdj0Ar3RtLnv8SH9nD 8ere1OOn2FvZJiJMHxY9TS6oDp2gYUSXrb9ezU/man16yDaafh0A7MfKB4VbhqjlyN1xv Bqb9nFS8vWUXkW GHWl 9iAJGK1DVtAguyzW7CKQ78jdM lKOo8MX3MQIyf4d6z3NjTNyk1YgSMAVbWdi0iDu/armx4WnBHPC c5yRimmw0aC3A7fBI/w08fej82i7kV/D2m9jE07rjPdXP3q7NnDPHyTRo6nqGGaIbGwAGB0A6Cu0rvmfmcZtX9Xpb1Hg6CUF7F wf9w7r/ANUv3em32nvyTwtjwdRlT9a0pTXLgeQqup4njKooCgADoBUwlqpW6VkEqnuMuRXcUrP5ika17XbauGlI6GoEJxXzNtQHMr83zAGhZVz0Zh/qNTMd65agBWTzZz7sa7iGBgbD0rpsV4u1ASEV9nFeZqNmoDszctRzXAQqM9Rmh5m26 NCTSF7oKPCPP3oAe0vAZpbUnoe0Qf5T1  fxq4tZVx1zSDpt9I8 jzsMtMnI/rsR gNNtk7cp38aAvVlzXpegEkPITXMszpayzD5lQkUDwaz VDS/Ev8k0cQ/g5j f6UDos0kunJJIxZmLEk 9FSylUZuuBRZwpezoeW31DmzHqhHo1upH6V7FLewk/FCGaMD5oVKt/tOfsay/UuKNRuLy6aSeVYj3RFFJyBQG2wfz8apU1XUY37SK9uI2znCSsAPvUdU3OO5jmiWSJ1dG6Mp2NRyTYrNeDuJr7t3tbnlmR2DZOzczOFJ  aep5GGRVS9hPL24wuzYquutXttOlE93IERkCgnzJJ/Sg9YuXjhYjypZ15fjpbJJSeXsC2PM5A/nTD//2Q==" alt="">
    <!-- Image Profile -->
    <div >
      <h1>About Me</h1>
      <h5>Web Developer</h5>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid molestiae iste accusantium rerum magnam reprehenderit possimus voluptatem fugiat, fugit recusandae, animi ipsum. Esse, similique! Consequatur delectus vel ab eos eveniet?</p>
      <button>Hire Me</button>
    </div>
  </div>
</section>

Please Help Me To DO So!!!!

CodePudding user response：

How about something like this? Box shadows instead of borders.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.about {
  width: 100%;
  height: 100vh;
  background-color: #161922;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.about .content img {
  height: auto;
  width: 300px;
  border-radius: 0.5rem;
}

.text {
  width: 550px;
  max-width: 100%;
  padding: 0 10px;
}

.content {
  width: 1280px;
  max-width: 95%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.text h1 {
  color: #ffcc74;
  font-size: 85px;
  margin-bottom: 20px;
  text-transform: capitalize;
}

.text h5 {
  color: white;
  font-size: 25px;
  margin-bottom: 25px;
  text-transform: capitalize;
  letter-spacing: 2px;
}

.text p {
  color: #c0c4d4;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 1px;
  margin-bottom: 45px;
}

button {
  background-color: #ffcc74;
  color: black;
  border: 2px solid transparent;
  text-decoration: none;
  padding: 10px 30px;
  border-radius: 30px;
  font-size: 17px;
  font-weight: bold;
}

button:hover {
  transform: scale(1.2);
  background-color: transparent;
  border: 2px solid #ffcc74;
  color: #ffcc74;
  transition: .4s;
  cursor: pointer;
}

@media screen and (max-width: 1180px) {
  .about {
    width: 100%;
    height: auto;
    padding: 70px 0px;
  }
}

@media screen and (max-width: 650px) {
  .about .content img {
    margin-bottom: 35px;
  }
  .text h1 {
    font-size: 60px;
    margin-bottom: 25px;
  }
}

img {
  box-shadow: 30px 30px 0 -10px #161922, 30px 30px 0 0 cyan;
}
<section >
  <div >
    <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAI0AXgMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAEBgMFBwIBAP/EADsQAAIBAwIDBgQDBAsBAAAAAAECAwAEEQUhBhIxEyJBUWFxFDKBoZGxwSNSctEVFiRCQ2KCkrLh8Af/xAAYAQADAQEAAAAAAAAAAAAAAAAAAQIEA//EAB4RAQEBAQEBAQADAQAAAAAAAAABAhExIRIyQVED/9oADAMBAAIRAxEAPwBjSOiESvkWplWqS8C10EqRRXQFARclcMlE8tcstACMlQulGstQstAV8kfpQkkVWjrQ0iUwqJoc FAyw71dyx0FJFvQRqQVMorlRUqikp6BXWK9FK3HPE39B2iw27AXc2y7Z5B4tRbwSdH69xLp2iERXDPLcsMrbxDLH38hVNb8R6ncwtOsdrGrHCg8xVPRuhz67Cld449QgDWztJeqyuWmbvM3v6 X8q 1DVZUXtX7awuwvKwljJSUe4/PrXHWrfHSZk9OZ4gns4lk1Wz5AThjE2cH08x18c0fp rWGqc3wVwkjL8ydGH08vWshl4vvmXsbgRTRDuspHddfIj9apxedjcm5sJ5oHByuDuv1qs61/Zak/pvzrUDrVDwNrF5q1h/b2V5FAIYLgketMTiuiAMi0LJHvVjItDOtMl6tSrUS1KtBuwKwji/U57rim7nDP3ZOzjT0G2MVu  Nuvh71jHCOm/0nxpKt8A5id2cY25uYio34rHojRNF1a/dJo7IQKV2bmZcj8cY lOC8D3N7a9nf3chj8EzT5biws40SSWJcDABIFWCXVmy92RcVn99afGTy//ADXTkVvm2O3tSlxJwU2nWTXEB5iuTj0rdL 905CQ9xEp8i4FJ3Gc8LaVI0DI4Ix3TnFLtl HyWfYz7gDWGtNTgsxuk7chB3x5EVqrgVhXCYP9a9OUZ3uFIH51uzitWWOhpBQ7iipBUDiqJarUqmoVNSLQaYHb1rK9ItruHifUG0wvGJriVZGKgsT3mULscDZ8n2rUlNLtrYi14lvJGk7s5SVMbMjDP8A76kVz3fjp/znaVdXtdXvW5ZLK1LA4LTyguPpVjw/p3FbW91HZpaKIYBIVunbqc4VSv8AD4 lPl5cwRxc7O4bGxxGT/wovSYOw0yQux7WcFnZ8ZJPn7DAx6Vx7/rv b6wu6i1TUk KewjlLAMC7EE 2TtUFxJf29q4RGUJhezbvKST02rTrBBG9xZXAHKjnkV1V1K GPHHXbO3Twqv4kt7K3tOZuRSDlUSMKCfDPWiaFxxnvBsMMfFqOGY9kjN3hjv4wR9zWwwyCWIMKxXR7gRam9z05mYj6mtQ4evxcRcpO9aMsup9XD1A9TuageqSsUNSqagU1KpoNMDSzxkz2hgvo3wwIiYeh8fx/OmNTS7xuva6PKvjsRnzG4qdTsVnVzexQ2WrSwaz8RqskogjPLFn5ckDvVQazxTrmn6hfLY30j2k0zPGD3uTPlTZwLefG2r2s4VyF5Ckgz NQ8U6DMGVbTRoSjHdkRRj186zT5frX/ACnpV0TiO6g0uS3neWW5kmLxtjmYEjy lfa5q11JbJ8VlXePPL5Z2q1igfQbGe5e3jiflIUYBNI99eS3TFpM5Y758MdBTzJdOe9XM51z2 XXkHKq9POnXhG8KsATsaREFNWg5QIR4VpkZtNPRw6A1y5oLTp eEZ8KKY0yHIamU0KjZqVT60GIBqj4sUvpkgHXFW4NBarbSXNs6opIxjPhSDL5rm90bU/irNuQkd4eDVdHj69mi76f3T4 NE6vpyypuNxtSrdaNseR8eOKzfL603Op4g1rWb3Vn5ZX7gOQg8ar76IRWsS9SGPMfMkVY2tgIjzE5YdKMk01Z7bkcbE9aqakqfxbKWI/mFNujD9mPah7Pg28upCtpKhYDIV9s/WjrWyutPfsruCSJht3hsfY12zqXxw1LPlMumS8owTVqHyKX7Z U1aRSnl61SYto3oiFXlcJGpdj0Ar3RtLnv8SH9nD 8ere1OOn2FvZJiJMHxY9TS6oDp2gYUSXrb9ezU/man16yDaafh0A7MfKB4VbhqjlyN1xv Bqb9nFS8vWUXkW GHWl 9iAJGK1DVtAguyzW7CKQ78jdM lKOo8MX3MQIyf4d6z3NjTNyk1YgSMAVbWdi0iDu/armx4WnBHPC c5yRimmw0aC3A7fBI/w08fej82i7kV/D2m9jE07rjPdXP3q7NnDPHyTRo6nqGGaIbGwAGB0A6Cu0rvmfmcZtX9Xpb1Hg6CUF7F wf9w7r/ANUv3em32nvyTwtjwdRlT9a0pTXLgeQqup4njKooCgADoBUwlqpW6VkEqnuMuRXcUrP5ika17XbauGlI6GoEJxXzNtQHMr83zAGhZVz0Zh/qNTMd65agBWTzZz7sa7iGBgbD0rpsV4u1ASEV9nFeZqNmoDszctRzXAQqM9Rmh5m26 NCTSF7oKPCPP3oAe0vAZpbUnoe0Qf5T1  fxq4tZVx1zSDpt9I8 jzsMtMnI/rsR gNNtk7cp38aAvVlzXpegEkPITXMszpayzD5lQkUDwaz VDS/Ev8k0cQ/g5j f6UDos0kunJJIxZmLEk 9FSylUZuuBRZwpezoeW31DmzHqhHo1upH6V7FLewk/FCGaMD5oVKt/tOfsay/UuKNRuLy6aSeVYj3RFFJyBQG2wfz8apU1XUY37SK9uI2znCSsAPvUdU3OO5jmiWSJ1dG6Mp2NRyTYrNeDuJr7t3tbnlmR2DZOzczOFJ  aep5GGRVS9hPL24wuzYquutXttOlE93IERkCgnzJJ/Sg9YuXjhYjypZ15fjpbJJSeXsC2PM5A/nTD//2Q==" alt="">
    <!-- Image Profile -->
    <div >
      <h1>About Me</h1>
      <h5>Web Developer</h5>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid molestiae iste accusantium rerum magnam reprehenderit possimus voluptatem fugiat, fugit recusandae, animi ipsum. Esse, similique! Consequatur delectus vel ab eos eveniet?</p>
      <button>Hire Me</button>
    </div>
  </div>
</section>

CodePudding user response：

Something like this?

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.about {
    width: 100%;
    height: 100vh;
    background-color: #161922;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.about .content img {
    height: auto;
    width: 400px;
    border-radius: 0.5rem;
    display: block; /*DEMO PURPOSE*/
    background: #ff0; /*DEMO PURPOSE*/
}
/*added css*/
.about .content .img_wrapper {
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px -15px navy;
    transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1);
    display: block;
    position: relative;
    z-index: 1;
}
.about .content .img_wrapper::before {
    top: 0px;
    left: 0px;
    background-color:navy;
    mix-blend-mode: screen;
}
.about .content .img_wrapper::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1);
    border: 2px solid green;
    top: 20px;
    left: 20px;
    z-index: -1;
}
.about .content .img_wrapper:hover::after, 
.about .content .img_wrapper:focus::after {
    top: 10px;
    left: 10px;
}
/*added css*/
.text {
    width: 550px;
    max-width: 100%;
    padding: 0 10px;
}

.content {
    width: 1280px;
    max-width: 95%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

.text h1 {
    color: #ffcc74;
    font-size: 85px;
    margin-bottom: 20px;
    text-transform: capitalize;
}

.text h5 {
    color: white;
    font-size: 25px;
    margin-bottom: 25px;
    text-transform: capitalize;
    letter-spacing: 2px;
}

.text p {
    color: #c0c4d4;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 1px;
    margin-bottom: 45px;
}

button {
    background-color: #ffcc74;
    color: black;
    border: 2px solid transparent;
    text-decoration: none;
    padding: 10px 30px;
    border-radius: 30px;
    font-size: 17px;
    font-weight: bold;
}

button:hover {
    transform: scale(1.2);
    background-color: transparent;
    border: 2px solid #ffcc74;
    color: #ffcc74;
    transition: .4s;
    cursor: pointer;
}

@media screen and (max-width: 1180px) {
    .about {
        width: 100%;
        height: auto;
        padding: 70px 0px;
    }
}

@media screen and (max-width: 650px) {
    .about .content img {
        margin-bottom: 35px;
    }

    .text h1 {
        font-size: 60px;
        margin-bottom: 25px;
    }
}
<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">
    <link rel="stylesheet" href="./public/css/about.css">
    <title>Document</title>
</head>

<body>
    <section >
        <div >
        <div class='img_wrapper'> <!--added-->
            <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAI0AXgMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAEBgMFBwIBAP/EADsQAAIBAwIDBgQDBAsBAAAAAAECAwAEEQUhBhIxEyJBUWFxFDKBoZGxwSNSctEVFiRCQ2KCkrLh8Af/xAAYAQADAQEAAAAAAAAAAAAAAAAAAQIEA//EAB4RAQEBAQEBAQADAQAAAAAAAAABAhExIRIyQVED/9oADAMBAAIRAxEAPwBjSOiESvkWplWqS8C10EqRRXQFARclcMlE8tcstACMlQulGstQstAV8kfpQkkVWjrQ0iUwqJoc FAyw71dyx0FJFvQRqQVMorlRUqikp6BXWK9FK3HPE39B2iw27AXc2y7Z5B4tRbwSdH69xLp2iERXDPLcsMrbxDLH38hVNb8R6ncwtOsdrGrHCg8xVPRuhz67Cld449QgDWztJeqyuWmbvM3v6 X8q 1DVZUXtX7awuwvKwljJSUe4/PrXHWrfHSZk9OZ4gns4lk1Wz5AThjE2cH08x18c0fp rWGqc3wVwkjL8ydGH08vWshl4vvmXsbgRTRDuspHddfIj9apxedjcm5sJ5oHByuDuv1qs61/Zak/pvzrUDrVDwNrF5q1h/b2V5FAIYLgketMTiuiAMi0LJHvVjItDOtMl6tSrUS1KtBuwKwji/U57rim7nDP3ZOzjT0G2MVu  Nuvh71jHCOm/0nxpKt8A5id2cY25uYio34rHojRNF1a/dJo7IQKV2bmZcj8cY lOC8D3N7a9nf3chj8EzT5biws40SSWJcDABIFWCXVmy92RcVn99afGTy//ADXTkVvm2O3tSlxJwU2nWTXEB5iuTj0rdL 905CQ9xEp8i4FJ3Gc8LaVI0DI4Ix3TnFLtl HyWfYz7gDWGtNTgsxuk7chB3x5EVqrgVhXCYP9a9OUZ3uFIH51uzitWWOhpBQ7iipBUDiqJarUqmoVNSLQaYHb1rK9ItruHifUG0wvGJriVZGKgsT3mULscDZ8n2rUlNLtrYi14lvJGk7s5SVMbMjDP8A76kVz3fjp/znaVdXtdXvW5ZLK1LA4LTyguPpVjw/p3FbW91HZpaKIYBIVunbqc4VSv8AD4 lPl5cwRxc7O4bGxxGT/wovSYOw0yQux7WcFnZ8ZJPn7DAx6Vx7/rv b6wu6i1TUk KewjlLAMC7EE 2TtUFxJf29q4RGUJhezbvKST02rTrBBG9xZXAHKjnkV1V1K GPHHXbO3Twqv4kt7K3tOZuRSDlUSMKCfDPWiaFxxnvBsMMfFqOGY9kjN3hjv4wR9zWwwyCWIMKxXR7gRam9z05mYj6mtQ4evxcRcpO9aMsup9XD1A9TuageqSsUNSqagU1KpoNMDSzxkz2hgvo3wwIiYeh8fx/OmNTS7xuva6PKvjsRnzG4qdTsVnVzexQ2WrSwaz8RqskogjPLFn5ckDvVQazxTrmn6hfLY30j2k0zPGD3uTPlTZwLefG2r2s4VyF5Ckgz NQ8U6DMGVbTRoSjHdkRRj186zT5frX/ACnpV0TiO6g0uS3neWW5kmLxtjmYEjy lfa5q11JbJ8VlXePPL5Z2q1igfQbGe5e3jiflIUYBNI99eS3TFpM5Y758MdBTzJdOe9XM51z2 XXkHKq9POnXhG8KsATsaREFNWg5QIR4VpkZtNPRw6A1y5oLTp eEZ8KKY0yHIamU0KjZqVT60GIBqj4sUvpkgHXFW4NBarbSXNs6opIxjPhSDL5rm90bU/irNuQkd4eDVdHj69mi76f3T4 NE6vpyypuNxtSrdaNseR8eOKzfL603Op4g1rWb3Vn5ZX7gOQg8ar76IRWsS9SGPMfMkVY2tgIjzE5YdKMk01Z7bkcbE9aqakqfxbKWI/mFNujD9mPah7Pg28upCtpKhYDIV9s/WjrWyutPfsruCSJht3hsfY12zqXxw1LPlMumS8owTVqHyKX7Z U1aRSnl61SYto3oiFXlcJGpdj0Ar3RtLnv8SH9nD 8ere1OOn2FvZJiJMHxY9TS6oDp2gYUSXrb9ezU/man16yDaafh0A7MfKB4VbhqjlyN1xv Bqb9nFS8vWUXkW GHWl 9iAJGK1DVtAguyzW7CKQ78jdM lKOo8MX3MQIyf4d6z3NjTNyk1YgSMAVbWdi0iDu/armx4WnBHPC c5yRimmw0aC3A7fBI/w08fej82i7kV/D2m9jE07rjPdXP3q7NnDPHyTRo6nqGGaIbGwAGB0A6Cu0rvmfmcZtX9Xpb1Hg6CUF7F wf9w7r/ANUv3em32nvyTwtjwdRlT9a0pTXLgeQqup4njKooCgADoBUwlqpW6VkEqnuMuRXcUrP5ika17XbauGlI6GoEJxXzNtQHMr83zAGhZVz0Zh/qNTMd65agBWTzZz7sa7iGBgbD0rpsV4u1ASEV9nFeZqNmoDszctRzXAQqM9Rmh5m26 NCTSF7oKPCPP3oAe0vAZpbUnoe0Qf5T1  fxq4tZVx1zSDpt9I8 jzsMtMnI/rsR gNNtk7cp38aAvVlzXpegEkPITXMszpayzD5lQkUDwaz VDS/Ev8k0cQ/g5j f6UDos0kunJJIxZmLEk 9FSylUZuuBRZwpezoeW31DmzHqhHo1upH6V7FLewk/FCGaMD5oVKt/tOfsay/UuKNRuLy6aSeVYj3RFFJyBQG2wfz8apU1XUY37SK9uI2znCSsAPvUdU3OO5jmiWSJ1dG6Mp2NRyTYrNeDuJr7t3tbnlmR2DZOzczOFJ  aep5GGRVS9hPL24wuzYquutXttOlE93IERkCgnzJJ/Sg9YuXjhYjypZ15fjpbJJSeXsC2PM5A/nTD//2Q==" alt="">
 <!-- Image Profile -->
            </div> <!--added-->
            <div >
                <h1>About Me</h1>
                <h5>Web Developer</h5>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid molestiae iste accusantium rerum
                    magnam reprehenderit possimus voluptatem fugiat, fugit recusandae, animi ipsum. Esse, similique!
                    Consequatur delectus vel ab eos eveniet?</p>
                    <button>Hire Me</button>
            </div>
        </div>
    </section>
</body>

</html>

Play with the values until you're happy...

CodePudding user response：

This is a working example of your requirement

img,
.border {
  height: 150px;
  width: 150px;
}

.container {
  position: relative;
}

.border {
  border: 5px solid green;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: -1;
}
<div >
  <img src="https://doggowner.com/wp-content/uploads/2020/08/brown-dog-names-cover-image.jpg" </img>
  <div ></div>
</div>

Page link：https//www.codepudding.com/Enterprise/486690.html

Prev:How do I stop Visual Studio from Inserting Namespaces into the Designer Code
Next:Saving and serving images in a Java Web app
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding