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.
2
Answers
use the background: url property.
for example
|
and set this property in .about-us-image
There were several factors affecting the output, so I made some changes to achieve the desired layout. Here’s the updated result:
Changes Made:
1. Images: I used direct links to images to demonstrate the layout properly.
2. Body Style: I added styles to the body element to cover the entire screen background.
3. Flexbox and Background Properties: I used CSS flex properties and background properties to adjust the whole layout.
NOTE: For the better understanding of Flexbox, please check out this Flexbox guide.