How to make a circular background? - html

Question

I want to make a circular background as shown in the photo:
desktop version
mobile version
However, I don't know how to make a correct structure in HTML and CSS. I'm starting from mobile and from there I want to expand to bigger sizes. My problem is I don't know how to make the circle responsive and to make it looks like on the picture, especially on the mobile version. I'm not sure if I should use the ::after for the circle but in my example I have the position absolute on the div so I really can't.
header {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: -webkit-sticky;
position: sticky;
width: 100%;
padding: 1em 3em;
min-height: 8vh;
text-align: center;
top: 0;
z-index: 4;
background-color: white;
}
header img {
width: 8em;
}
header ul {
list-style: none;
}
header ul li {
display: inline-block;
padding: 1em 2em;
color: white;
position: relative;
overflow: hidden;
will-change: transform;
}
header ul li a {
text-decoration: none;
color: black;
font-weight: 700;
font-size: clamp(1.5rem, 5vw, 1.8rem);
}
header .burger {
display: none;
}
#media only screen and (max-width: 996px) {
header .burger {
display: block;
width: 4em;
cursor: pointer;
}
header .burger img {
width: 3em;
}
header ul {
display: none;
}
}
#media only screen and (max-width: 1022px) {
.overlay {
position: fixed;
z-index: 4;
width: 100%;
height: 100%;
padding: 2em;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
overflow-y: scroll;
}
.overlay .close {
position: absolute;
top: 2em;
right: 2em;
width: 3em;
height: 3em;
cursor: pointer;
}
.overlay img {
width: 10em;
}
.overlay .overlay-list {
list-style-type: none;
text-align: center;
}
.overlay .overlay-list li {
color: black;
font-size: 2rem;
font-family: Josefin Sans;
padding: .6em 0;
}
.overlay .overlay-list li a {
text-decoration: none;
color: black;
}
}
#media only screen and (min-width: 1024px) {
.overlay {
display: none;
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "Raleway", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 800;
}
.hero {
width: 100%;
min-height: 100vh;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#def0d8), to(var(--unnamed-color-fafafa))) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #def0d8 0%, var(--unnamed-color-fafafa) 100%) 0% 0% no-repeat padding-box;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#def0d8), to(#fafafa)) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #def0d8 0%, #fafafa 100%) 0% 0% no-repeat padding-box;
z-index: 1;
position: relative;
}
.hero__container {
padding: 2em;
height: 70vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
z-index: 4;
overflow: hidden;
}
.hero__container::after {
content: '';
position: absolute;
width: 600px;
height: 600px;
z-index: -1;
top: 0;
left: 0;
background-color: #387546;
border-radius: 0 0 0 60%;
}
.hero__container .food-bg {
background-image: url("../images/background+pict.png");
background-position: top;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
right: -36%;
}
.hero__container .left-col {
width: 68%;
z-index: 2;
}
.hero__container .left-col h1 {
color: white;
margin-bottom: .7em;
}
.hero__container .left-col p {
color: white;
margin-bottom: 2em;
width: 70%;
}
.btn {
text-decoration: none;
color: white;
padding: .7em 0.7em .7em 1em;
border-radius: .8em;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.btn__gold {
background-color: #f19a33;
}
.button__icon {
width: 1.5em;
height: 1.5em;
fill: currentcolor;
margin-left: 1em;
}
/*# sourceMappingURL=main.css.map */
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#400;500;700;900&display=swap" rel="stylesheet">
<div class="overlay">
<a href="">
<img src="images/wrapped_green_logo#2x.png" class="overlay-logo" alt="logo">
</a>
<img src="/images/icon-close.svg" class="close" alt="close">
<ul class="overlay-list">
<li>About us</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<header>
<a href="">
<img src="images/wrapped_green_logo#2x.png" class="header-logo" alt="logo">
</a>
<nav>
<ul class="header-links">
<li>About us</li>
<li>Menu</li>
<li>Contact</li>
</ul>
<div class="burger">
<img src="images/icon-hamburger.svg" alt="hamburger-icon">
</div>
</nav>
</header>
<div class="hero">
<div class="hero__container">
<div class="left-col">
<h1>Healthy & Fresh Food For You</h1>
<p>Created for lover of healty, delicious and non-obvious food</p>
Check Menu<svg xmlns="http://www.w3.org/2000/svg" class="button__icon" viewBox="0 0 30 24" width="50" height="20"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="rgba(255,255,255,1)"/></svg>
</div>
<div class="food-bg"></div>
</div>
</div>

Answer 1

This is a simple solution. There're many others.
.wrapper {
width: 90%;
height: 400px;
overflow: hidden;
background: lightgreen;
box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.4);
}
nav {
width: 100%;
height: 60px;
background: #fff;
position: relative;
z-index: 20;
border-bottom: 1px solid black;
}
.background {
position: relative;
width: 100%;
height: 0;
right: 0;
}
.background > div {
position: absolute;
right: -50px;
top: -20px;
width: 400px;
height: 400px;
border-radius: 50%;
background: green;
}
<div class="wrapper">
<div class="background">
<div></div>
</div>
<nav>Menu</nav>
</div>

Answer 2

There are a number of ways to do this, and here's one. For brevity, only one breakpoint was added, and for mobile, it was assumed this was an intro screen with no scrolling content, so the background will adapt to the viewport size. You may want to add some adjustment to get it to the desired placement for each breakpoint:
header {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: -webkit-sticky;
position: sticky;
width: 100%;
padding: 1em 3em;
min-height: 8vh;
text-align: center;
top: 0;
z-index: 4;
background-color: white;
}
header img {
width: 8em;
}
header ul {
list-style: none;
}
header ul li {
display: inline-block;
padding: 1em 2em;
color: white;
position: relative;
overflow: hidden;
will-change: transform;
}
header ul li a {
text-decoration: none;
color: black;
font-weight: 700;
font-size: clamp(1.5rem, 5vw, 1.8rem);
}
header .burger {
display: none;
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "Raleway", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 800;
}
.hero {
width: 100%;
min-height: 100vh;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#def0d8), to(var(--unnamed-color-fafafa))) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #def0d8 0%, var(--unnamed-color-fafafa) 100%) 0% 0% no-repeat padding-box;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#def0d8), to(#fafafa)) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #def0d8 0%, #fafafa 100%) 0% 0% no-repeat padding-box;
z-index: 1;
position: relative;
}
.hero__container {
padding: 2em;
height: 90vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
z-index: 4;
overflow: hidden;
}
.hero__container::after {
content: '';
position: absolute;
width: 300vw;
height: 300vw;
z-index: -1;
top: -170vw;
right: -160vw;
background-color: #387546;
border-radius: 50%;
}
.hero__container .food-bg {
background-image: url("../images/background+pict.png");
background-position: top;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
right: -36%;
}
.hero__container .left-col {
width: 68%;
z-index: 2;
}
.hero__container .left-col h1 {
color: white;
margin-bottom: .7em;
}
.hero__container .left-col p {
color: white;
margin-bottom: 2em;
width: 70%;
}
.btn {
text-decoration: none;
color: white;
padding: .7em 0.7em .7em 1em;
border-radius: .8em;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.btn__gold {
background-color: #f19a33;
}
.button__icon {
width: 1.5em;
height: 1.5em;
fill: currentcolor;
margin-left: 1em;
}
/*Responsive Styles*/
#media only screen and (max-width: 996px) {
header .burger {
display: block;
width: 4em;
cursor: pointer;
}
header .burger img {
width: 3em;
}
header ul {
display: none;
}
}
#media only screen and (max-width: 1022px) {
.overlay {
position: fixed;
z-index: 4;
width: 100%;
height: 100%;
padding: 2em;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
overflow-y: scroll;
}
.overlay .close {
position: absolute;
top: 2em;
right: 2em;
width: 3em;
height: 3em;
cursor: pointer;
}
.overlay img {
width: 10em;
}
.overlay .overlay-list {
list-style-type: none;
text-align: center;
}
.overlay .overlay-list li {
color: black;
font-size: 2rem;
font-family: Josefin Sans;
padding: .6em 0;
}
.overlay .overlay-list li a {
text-decoration: none;
color: black;
}
}
#media only screen and (min-width: 1024px) {
.overlay {
display: none;
}
.hero__container {
height: 70vh;
}
.hero__container::after {
width: 900px;
height: 900px;
z-index: -1;
top: 0;
top: -240px;
right: -120px;
}
}
<div class="overlay">
<a href="">
<img src="images/wrapped_green_logo#2x.png" class="overlay-logo" alt="logo">
</a>
<img src="/images/icon-close.svg" class="close" alt="close">
<ul class="overlay-list">
<li>About us</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<header>
<a href="">
<img src="images/wrapped_green_logo#2x.png" class="header-logo" alt="logo">
</a>
<nav>
<ul class="header-links">
<li>About us</li>
<li>Menu</li>
<li>Contact</li>
</ul>
<div class="burger">
<img src="images/icon-hamburger.svg" alt="hamburger-icon">
</div>
</nav>
</header>
<div class="hero">
<div class="hero__container">
<div class="left-col">
<h1>Healthy & Fresh Food For You</h1>
<p>Created for lover of healty, delicious and non-obvious food</p>
Check Menu<svg xmlns="http://www.w3.org/2000/svg" class="button__icon" viewBox="0 0 30 24" width="50" height="20"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="rgba(255,255,255,1)"/></svg>
</div>
<div class="food-bg"></div>
</div>
</div>

Answer 3

Similar to Karolaus Answer but i like to use view height more... I just removed the overflow from .hero__container and changed the following stylings (or added #media) to the original code... you can see how much view height you need for mobile (or how much width you consider it as a mobile device)...
.hero__container::after {
content: '';
position: absolute;
width: 100vh;
height: 100vh;
z-index: 0;
top: -20vh;
right: -20vh;
/* [![enter image description here][1]][1] */
background-color: #387546;
background-position: -200vh -200vh;
border-radius: 50%;
}
#media screen and (max-width: 420px){
.hero__container::after{
width:125vh;
height:125vh;
top: -50vh;
right: -50vh;
}
}
Link to Codepen
: https://codepen.io/vattevaii/pen/PobWZzX