Html Question posted in
Some basic documentation can be found here.

Html – container not aligned properly and images not appearing correctly

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.

Tags:

2

Answers


  1. 0

    use the background: url property.
    for example
    |

    Background: URL('link.png'); //image link past here

    and set this property in .about-us-image

    Login or Signup to reply.
  2. 0

    There were several factors affecting the output, so I made some changes to achieve the desired layout. Here’s the updated result:

    output

    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.

    <!DOCTYPE html>
<html>
  <head>
    <link
      href="file:///C:/xampp/htdocs/templatemo_591_villa_agency/styles.css"
      rel="stylesheet"
      type="text/css"
    />

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      body {
        background-image: url('https://i.pngimg.me/image_by_url?url=https://image.freepik.com/free-vector/network-connections-background_1048-8245.jpg');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .data-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
      }

      .about-us-image {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
      }

      .about-image {
        height: 500px;
        width: 400px;
        box-sizing: border-box;
      }

      .about-us-text {
        text-align: left;
        padding: 100px;
        width: 50%;
        box-sizing: border-box;
      }
    </style>
  </head>

  <body>
    <div class="data-container">
      <div class="about-us-image">
        <img
          class="about-image"
          src="https://img.freepik.com/free-photo/smiling-handsome-asian-manager-with-modern-device_1262-5773.jpg"
          alt="smiling-handsome-asian-manager-with-modern-device"
        />
      </div>
      <div class="about-us-text">
        <p style="font-weight: bold; font-size: 60px; color: #56aeff; margin: 0;">Who We Are</p>
        <p style="font-size: 18px;">
          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>
</html>

    NOTE: For the better understanding of Flexbox, please check out this Flexbox guide.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search