How to create circular background behind an image? - Html

mitas1c
February 23, 2023
266 views
1 vote
2 Answers

I am trying to recreate this image.

I however can’t figure out how to create the orange circle behind the image. I’ve trid using relative and absolute position but that did nothing and pushed other elements to the side. I have even tried to color the div parent element and give it border radius but that only caused some ugly lines to be visible on the sides.

This is my code.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700;800;900&display=swap');

:root{
    --background: #f7f7ff;
    --headerBackgroundColour: #ff9101;
    --titles: #0b0b15;
    --text: #555555;
    --borders: #bbbbbb;
    --dividers: #eeeeee;

    --spacing: 1em;
    --sectionSpacing: 4vw;
}

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

    font-family: 'Roboto';
    text-decoration: none;

    color: var(--text);
    font-weight: 400;
}

.PageHeader{
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: center;

}

.PageHeader div:nth-child(1){
    width: 50%;

    padding-left: var(--sectionSpacing);
    padding-top: var(--sectionSpacing);
    padding-bottom: var(--sectionSpacing);
}

.PageHeader div:nth-child(1) p:nth-child(1){
    color: var(--titles);

}

.PageHeader div:nth-child(1) h1{

    padding: 0;
    font-weight: 900;
    color: var(--titles);
    font-size: 6em;
}

.PageHeader div:nth-child(1) h2{
    color: var(--headerBackgroundColour);
    font-weight: 700;
    font-size: 2em;
}

.NavBar ul{
    margin-top: var(--spacing);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

    .NavBar li{
        list-style: none;
    }

    .NavBar li a{

        padding: var(--spacing);
        border-radius: 5px;
    }

.PageHeader .ImageContainer{
    width: 50%;

    display: flex;
    flex-direction: column;

    padding-right: var(--sectionSpacing);
}

    .PageHeader .ImageContainer div{
        width: 1000px;
        height: 1000px;

        background-color: var(--headerBackgroundColour);
        position: absolute;
        display: block;

        border-radius: 50%;
    }


    .PageHeader .ImageContainer .Image{
        display: inline-block;
        width: 250px;
        height: 250px;
        background-color: red;

        margin-left: var(--sectionSpacing);
    }

.BioContainer{
    background-color: whitesmoke;
}

<!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">

    <link rel="stylesheet" href="./style.css"/>


    <title>Joe Doe</title>
</head>
<body>
        <header class="PageHeader">
            <div>

                <p>Hello, My name is</p>
                <h1>Joe Doe</h1>
                <h2>Full-Stack Developer</h2>
                <p>I design and develop services for customers of all sizes, specializing in creating stylish, modern websites, web services and online stores</p>
                
                <nav class='NavBar'>
                    <ul>
                        <li><a href='#Biography'>Biography</a></li>
                        <li><a href='#MySkills'>What I Do?</a></li>
                        <li><a href='#Awards'>Awards</a></li>
                        <li><a href='#Experience'>Experience</a></li>
                        <li><a href='#Portfolio'>My Portfolio</a></li>
                        <li><a href='#Contact'>Contact</a></li>
                    </ul>
                </nav>
            </div>

            <div class="ImageContainer">
                <div></div>
                <p class="Image">IMAGE</p>
            </div>
    
        </header>

</body>
</html>

Answers

Usually you can position the elements with position: absolute and setting the top or bottom and left or right property. You can learn more about it on https://www.w3schools.com/css/css_positioning.asp

You can adjust which element is over the other with the property z-index. You can learn more about it on https://www.w3schools.com/cssref/pr_pos_z-index.php

I have added a z-index to your image and adjusted the top and right properties for both the image and the circle.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700;800;900&display=swap');

:root{
    --background: #f7f7ff;
    --headerBackgroundColour: #ff9101;
    --titles: #0b0b15;
    --text: #555555;
    --borders: #bbbbbb;
    --dividers: #eeeeee;

    --spacing: 1em;
    --sectionSpacing: 4vw;
}

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

    font-family: 'Roboto';
    text-decoration: none;

    color: var(--text);
    font-weight: 400;
}

.PageHeader{
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: center;

}

.PageHeader div:nth-child(1){
    width: 50%;

    padding-left: var(--sectionSpacing);
    padding-top: var(--sectionSpacing);
    padding-bottom: var(--sectionSpacing);
}

.PageHeader div:nth-child(1) p:nth-child(1){
    color: var(--titles);

}

.PageHeader div:nth-child(1) h1{

    padding: 0;
    font-weight: 900;
    color: var(--titles);
    font-size: 6em;
}

.PageHeader div:nth-child(1) h2{
    color: var(--headerBackgroundColour);
    font-weight: 700;
    font-size: 2em;
}

.NavBar ul{
    margin-top: var(--spacing);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

    .NavBar li{
        list-style: none;
    }

    .NavBar li a{

        padding: var(--spacing);
        border-radius: 5px;
    }

.PageHeader .ImageContainer{
    width: 50%;

    display: flex;
    flex-direction: column;

    padding-right: var(--sectionSpacing);
}

    .PageHeader .ImageContainer div{
        width: 1000px;
        height: 1000px;

        background-color: var(--headerBackgroundColour);
        position: absolute;
        display: block;

        border-radius: 50%;
        top: -40%;
    }


    .PageHeader .ImageContainer .Image{
        display: inline-block;
        width: 250px;
        height: 250px;
        background-color: red;
        z-index: 999;
        position: absolute;
        top: 25%;
        right: 15%;

        margin-left: var(--sectionSpacing);
    }

.BioContainer{
    background-color: whitesmoke;
}

<!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">

    <link rel="stylesheet" href="./style.css"/>


    <title>Joe Doe</title>
</head>
<body>
        <header class="PageHeader">
            <div>

                <p>Hello, My name is</p>
                <h1>Joe Doe</h1>
                <h2>Full-Stack Developer</h2>
                <p>I design and develop services for customers of all sizes, specializing in creating stylish, modern websites, web services and online stores</p>
                
                <nav class='NavBar'>
                    <ul>
                        <li><a href='#Biography'>Biography</a></li>
                        <li><a href='#MySkills'>What I Do?</a></li>
                        <li><a href='#Awards'>Awards</a></li>
                        <li><a href='#Experience'>Experience</a></li>
                        <li><a href='#Portfolio'>My Portfolio</a></li>
                        <li><a href='#Contact'>Contact</a></li>
                    </ul>
                </nav>
            </div>

            <div class="ImageContainer">
                <div></div>
                <p class="Image">IMAGE</p>
            </div>
    
        </header>

</body>
</html>

This is a basic idea on how you could accomplish it with a block element that has a border radius set on it and with the parent hiding the overflow.

.wrapper {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.wrapper::after {
  position: absolute;
  z-index: 0;
  display: block;
  content: '';
  top: -150px;
  right: -100px;
  border-radius: 50%;
  width: 400px;
  height: 400px;
  background-color: blue;
}

.row {
  display: flex;
  flex-direction: row;
  width: 100%;
  display: flex;
  height: 200px;
}

.column {
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  z-index: 1;
}

.column.image {
  background-image: url('https://placekitten.com/75/150');
  background-repeat: no-repeat;
  xbackground-attachment: fixed;
  background-position: center bottom;
}

<div class="wrapper">
  <div class='row'>
    <div class='column'>
      <h2>Hello World</h2>
      <p>Basic idea</p>
    </div>
    <div class='column image'>
    </div>
  </div>
</div>

Other option is using an SVG or a clip path to trim the element.

Please signup or login to give your own answer.

Click here to cancel reply.

How to create circular background behind an image? – Html

Answers