Conical-gradient is repeated a lot of times, how can I have it repeated once?

Question

I designed the main page of a website, but when I try to put the background colors, these are repeated many times I have already researched for 1 hour and I have not found a solution.

I've tried deleting DISPLAY: FLEX; and deleting the content of BODY but nothing happens.

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

    body {
        font-family: 'Poppins', sans-serif;
        background: conic-gradient(from 180deg,#86BBD8, #86BBD8, #5881AB, #5881AB);
    }

    header {
        display: flex;
        width: 90%;
        height: 10vh;
        margin: auto;
        align-items: center;
    }

    nav {
        flex: 1;
    }

    .nav-links {
        display: flex;
        justify-content: space-around;
        list-style: none;
    }

    .nav-link {
        text-decoration: none;
        font-size: 24px;
        line-height: 36px;
        color: #564787;
        text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    }

     <body>
            <header>
            <nav>
                <ul class="nav-links">
                    <li><a href="#" class="nav-link">Inicio</a></li>
                    <li><a href="#" class="nav-link">Institución</a></li>
                    <li><a href="#" class="nav-link">Noticias</a></li>
                    <li><a href="#" class="nav-link">Contacto</a></li>
                </ul>
            </nav>
        </header>
    </body>

I want the Conic-Gradient not to repeat itself

Dacre Denny · Accepted Answer · 2019-10-08T20:21:39.457

A simple solution would be to add height: 100vh; to your body styling. That will cause the body to expand vertically to fill the height of the viewport and, by default, a single conic pattern will scale and center to fit the viewport via the body element.

This addition to your CSS should produce the desired result:

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

body {
  font-family: 'Poppins', sans-serif;

  /* Added no-repeat here */
  background: conic-gradient(from 180deg, #86BBD8, #86BBD8, #5881AB, #5881AB);

  /* Added height property here */
  height: 100vh;
}

header {
  display: flex;
  width: 90%;
  height: 10vh;
  margin: auto;
  align-items: center;
}

nav {
  flex: 1;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  list-style: none;
}

.nav-link {
  text-decoration: none;
  font-size: 24px;
  line-height: 36px;
  color: #564787;
  text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
}

<header>
  <nav>
    <ul class="nav-links">
      <li><a href="#" class="nav-link">Inicio</a></li>
      <li><a href="#" class="nav-link">Institución</a></li>
      <li><a href="#" class="nav-link">Noticias</a></li>
      <li><a href="#" class="nav-link">Contacto</a></li>
    </ul>
  </nav>
</header>

note that the no-repeat isn't mandatory, only the height is – Temani Afif Oct 08 '19 at 09:31 — Temani Afif, Oct 08 '19 at 09:31
thanks @TemaniAfif - just updated answer :) – Dacre Denny Oct 08 '19 at 20:21 — Dacre Denny, Oct 08 '19 at 20:21

Conical-gradient is repeated a lot of times, how can I have it repeated once?

1 Answers1