How do I achieve a single repetition of the conical gradient instead of multiple repetitions?

After spending an hour researching, I am still struggling with a repeating background color issue on the main page of a website that I designed. I have tried removing 'display: flex;' and clearing the content of BODY, but nothing has worked so far.

 * {
                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 need to find a solution to prevent the Conic-Gradient from repeating itself.

htmlcss

Answer №1

To create a seamless design, you can simply incorporate the height: 100vh; property to your body styling. This adjustment will enable the body to extend vertically to occupy the entire height of the viewport while automatically scaling and centering a single conic pattern within the body element.

Integrating the following snippet into your CSS code will yield the desired outcome:

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

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

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

  /* Add 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">Home</a></li>
      <li><a href="#" class="nav-link">About Us</a></li>
      <li><a href="#" class="nav-link">News</a></li>
      <li><a href="#" class="nav-link">Contact</a></li>
    </ul>
  </nav>
</header>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

reason behind text styling: thick 12 pixels height with line spacing of 25 pixels using "Arial" font

Question about CSS Size: Understanding font sizes in CSS {font: 14px/24px Arial, Helvetica, sans-serif} I've noticed some CSS code like this on the website .selector {font: bold 12px/25px "Arial";} I know that 'bold' refers to font w ...

css

Utilizing Jquery to reach faraway parent elements

Looking at the HTML structure below, we have a drop-down menu: <ul class="tabMenu"> <li><a href="#">Games</a> <div id="sub"> <ul> <li><a href="#">Main</a></li> ...

jqueryhtmldomclickparent

Enhancing the functionality of radio buttons through event changes and optimizing related features

I am searching for a more efficient method to reuse functions that serve a similar purpose. For example, I would like to modify various radio buttons that toggle a hide class on different divs. JSFiddle Link How can jQuery be used to create a reusable fu ...

javascriptjqueryhtml

After the page loads, the Facebook Like button causes my website content to shift downwards by 1 pixel

Why does the like button push down my website content by 1 pixel after loading? Any ideas on what might be causing this issue? Check out the website: See the problem in action here: ...

htmlcssfacebook

Utilizing onBlur and onFocus events in React to implement a dynamic menu that shows or hides

Currently, I am in the process of mastering React and developing a small online electronic store. Within my project, there is a tab labeled "View Store". My goal is for a small, hidden column to appear when a user clicks on this tab, revealing text or imag ...

javascriptjqueryhtmlcssreactjs

Click on the lines to highlight them with your mouse or use the arrow keys

Previously, I inquired about how to Highlight lines of text on mouseover. However, after using it for some time, I discovered a few drawbacks. One issue was that users would often lose track of their place when switching tabs or moving the mouse to perform ...

javascriptjqueryhtmlcsshighlight

Is there a way to eliminate the "x" in the upper right corner of a Foundation Joyride?

Edit 7/16/15: I decided to place the following code between the <li> tags within the joyride that required the removal of the "x" button: <script>$('.joyride-close-tip').remove();</script> While not the most elegant solution ...

csssasszurb-foundationzurb-joyride

Is it possible to incorporate various colors into an SVG image using HTML, specifically with d3.js?

Is it possible to dynamically fill different parts of an SVG image with colors based on data using HTML, CSS, and JavaScript? I have a project in Angular that utilizes D3.js. Here is an example image for reference, where the arms, head, and legs are fill ...

javascripthtmlangularsvgd3.js

Using both PHP and HTML to create a select tag

I'm new to PHP and HTML and I'm trying to create a form with three drop-down lists (select tags). However, when I select an option from one list, the values in the other two lists disappear. Should I save the selected values when submitting the f ...

phphtmltags

AngularJS bracket-enhanced template

Why is AngularJS giving an error when brackets are used inside ng-template content? I am trying to create an input field that should accept an array, but I keep getting this error message: "Error: Syntax Error: Token ']' not a primary expression ...

javascriptangularjshtml

Leveraging both Angular Material UI and Tailwind CSS simultaneously

Recently, I've been incorporating Material UI with Angular. With the deprecation of flexlayout and the rise of Tailwind as a recommended alternative, I'm wondering if it's feasible to utilize both Material UI and Tailwind in tandem. How can ...

cssangularmaterial-uitailwind-css

What are your thoughts on using inline PHP to assign values to JavaScript variables?

Imagine you have a PHP document and need to determine if the request was made with or without query parameters using JavaScript. Since there is no built-in function to extract values from the URL, you may need to resort to some sort of workaround. While it ...

javascriptphpjqueryhtmldynamic

Display the integer value in a div element using PHP

echo "<td>".$value["rating"]."<div class=ratingOutput data-average=".$rates." **data-id="$value["id"]"**></div>".$newline.$rateHere.$starOutput."</td>"; I need the value of data-id to be an integer, however, I encountered an error ...

phphtml

Is it possible to create a CSS code that targets specific browsers for a particular style to be applied?

My project has external CSS that contains all the styles for my site. The site looks great in Firefox, but it becomes a mess in Internet Explorer (as usual). Is there a way to write CSS so that specific styles only apply to certain browsers? For example, ...

htmlcssstylesheet

I successfully developed a unique custom accordion feature in React.js, where the toggle functionality is fully functional. However, I am currently facing an

import React, { useState, useEffect } from "react"; import axios from "axios"; const Faq = () => { const [faq, setFaq] = useState([]); const [activeIndex, setActiveIndex] = useState(null); const fetchFaqs = async () => { ...

htmlreactjsapiaxios

The line-height property does not appear to have any effect when used within a table cell

I am struggling to format a table with fonts similar to the one shown in the image. I attempted to set the line-height for numbers to 33%, but so far, the line height has not been as expected. I have been unsuccessful in achieving the layout displayed belo ...

htmlcss

Utilizing interpolation in Angular to apply CSS styling to specific sections of a TypeScript variable

Suppose I have a variable called data in the app.component.ts file of type :string. In the app.component.html file, I am displaying the value of data on the UI using string interpolation like {{data}}. My question is, how can I apply some css to specific ...

cssangulartypescriptstring-interpolation

Deleting content in a text area when specific text is entered

Is there a way to clear the textarea value if I type in <br>? The code I have right now is shown below. I understand that this may seem like an odd request, but I am experimenting with a typing effect. function eraseText() { document.getElemen ...

javascripthtml

Exploring LESS - improving CSS output by utilizing mixins for rule optimization

I've recently started experimenting with LESS. I decided to create rules for elements with numeric IDs, leading me to this code snippet: @myRule: {padding: 0;}; .myLoop(@c, @rules) when (@c >= 0) { .myLoop((@c - 1), @rules); &[id*=@{c ...

cssless

Overlap one element entirely with another

Currently, I am working on a way for an element called overlayElement to completely cover another element known as originalElement. The overlayElement is an iFrame, but that detail may not be significant in this scenario. My goal is to ensure that the over ...

javascripthtmlcss