Spreceriany
Spreceriany

Reputation: 89

How to make a circular background?

I want to make a circular background as shown in the photo:

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/[email protected]" class="overlay-logo" alt="logo">
  </a>
  <img src="/images/icon-close.svg" class="close" alt="close">
  <ul class="overlay-list">
    <li><a href="about">About us</a></li>
    <li><a href="menu">Menu</a></li>
    <li><a href="contact">Contact</a></li>
  </ul>
</div>
<header>
  <a href="">
    <img src="images/[email protected]" class="header-logo" alt="logo">
  </a>
  <nav>
    <ul class="header-links">
      <li><a href="about">About us</a></li>
      <li><a href="menu">Menu</a></li>
      <li><a href="contact">Contact</a></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>
      <a href="" class="btn btn__gold">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> </a>
    </div>
    <div class="food-bg"></div>
  </div>
</div>

enter image description here

enter image description here

Upvotes: 1

Views: 382

Answers (3)

Ashish Bhattarai
Ashish Bhattarai

Reputation: 150

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

Upvotes: 0

karolus
karolus

Reputation: 922

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/[email protected]" class="overlay-logo" alt="logo">
  </a>
  <img src="/images/icon-close.svg" class="close" alt="close">
  <ul class="overlay-list">
    <li><a href="about">About us</a></li>
    <li><a href="menu">Menu</a></li>
    <li><a href="contact">Contact</a></li>
  </ul>
</div>
<header>
  <a href="">
    <img src="images/[email protected]" class="header-logo" alt="logo">
  </a>
  <nav>
    <ul class="header-links">
      <li><a href="about">About us</a></li>
      <li><a href="menu">Menu</a></li>
      <li><a href="contact">Contact</a></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>
      <a href="" class="btn btn__gold">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> </a>
    </div>
    <div class="food-bg"></div>
  </div>
</div>

Upvotes: 0

Pablo Darde
Pablo Darde

Reputation: 6402

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>

Upvotes: 1

Related Questions