hi everyone i am trying to make a web page look like my canva design below but i got the second image beneath that as my result.
My Canva design
My result
My current HTML code for the design is shown below
<body>
<div style="display: flex;">
<div class="about-us-image">
<img class="about-image"
src="file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/smiling-handsome-asian-manager-with-modern-device.jpg"
alt="smiling-handsome-asian-manager-with-modern-device">
</img>
</div>
<div class="about-us-text">
<h2><h2 style="color: #56aeff;">Who We Are</h2>
<p>With more than a decade of experience, we are a trusted team of business and financial planners to help you start your business or retirement in Bali, Indonesia and other islands</p>
</div>
</div>
</body>
My current css for the design is below:
.about-us-image {
height: 100%;
width: 50%;
background-image: none;
background-color: none;
}
.about-image {
object-fit: contain;
}
.about-us-text {
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
text-align: left;
padding: 20px;
width: 50%;
}
if you want to view the full code, it’s on my codepen: my codepen
i tried adding modifying my css attributre for the container to have no background image and no background color to allow the original background image from my external css to appear but iyt has not worked. i also tried adding the attribute of object fit to contain for my image class but it hasn’t worked.