What is the best way to maintain two distinct background effects that each require different pixel sizes?

I am attempting to create a gradient that goes from the top-right corner to the bottom-left corner, and I also want to add a grid of dots. However, the method I am using to create the grid of dots is through a radial gradient which requires a small background size. This limitation does not allow for the gradient effect that I desire. https://i.sstatic.net/iyDDA.png

I am unsure of what steps to take next or what resources to search for.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
        <title>Ameglass</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <p>Press Any Key to Continue</p>
            <h1 class="gradient-text" style="font-size:400%">Welcome to Ameglass</h1>
        </div>
    </body>
</html>

style.css

/*
body {
    background-image: linear-gradient(to bottom left, #EE82EE 30%, #00D1FF 100%);
    height: 100vh;
    font-family: Montserrat;
}
*/
body {
    background-size: 40px 40px;
    background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(to bottom left, #EE82EE 30%, #00D1FF 100%);
}
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0px;
}

.gradient-text {
    background-image: linear-gradient(to right, #d173d1 33%,#9460e7 66%, #00D1FF 100%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

h1, p {margin: 0;}

Answer №1

Solved the puzzle, just insert 200vh following the specified background size.

background-size: 40px 40px, 200vh;

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

Can fputs() or fwrite() encode HTML special characters at times?

I have encountered an issue where I am outputting HTML content as a string to an HTML file, but some servers are encoding special characters (for example " becomes \&quot;). Even after using the htmlspecialcharacters_decode function, the problem p ...

Position a span within a container div and ensure that it remains centered even in cases of overflow

I need assistance with centering text horizontally next to an image inside a container div that is 40px x 40px. The anchor tag contains the image with matching dimensions, and below it is a span with text. I've tried using text-align: center, adjustin ...

Request the generic password prior to revealing the concealed div

I want to implement a feature where a hidden div is shown once a user enters a password. The password doesn't need to be stored in a database, it can be something simple like 'testpass' for now. Currently, I have written some code using Java ...

Implement Icon using CSS Class in jQuery Mobile

Is there a way to use an icon in jQuery Mobile on a span element and also support retina display without giving the span a fixed width? Should I attempt to utilize Media Queries to achieve this, or is there an "official way" to do it? Thanks, Nils ...

Display an additional div when hovering over form input

I am currently in the process of designing a search bar animation. Specifically, I want the search history to appear when hovering over the search bar. However, I am facing an issue where the code doesn't seem to work when I use .search-bar-input:hove ...

Integrate JavaScript into your HTML code

I'm a beginner in HTML and am working on creating a login form. Here is the code that I have written so far. I need help with importing my JavaScript code into the HTML form. C:\Program Files\xampp\htdocs\forsiteSystem\thems& ...

Guide on displaying search results in separate boxes using HTML

I am struggling with organizing my search engine results in separate boxes on my website. Being new to HTML, I am unsure of how to achieve this layout. Currently, all the results are overlapping each other, and it's creating a messy display. Can anyon ...

Simple Steps to Connect an HTML File to CSS in Windows Notepad

I have scoured the depths of the online realm in search of a method to connect HTML with CSS within the preinstalled Notepad application on Windows. Regrettably, my attempts, including utilizing the system path, proved fruitless. Is it conceivable to ach ...

Tips for designing a webpage where a div element adjusts to fit the screen, regardless of the width of the content inside

Can CSS3 or a JavaScript library be used to create a webpage with a div that contains content wider than the screen, such as a large image or newsletter, and still fits it to the screen without scrolling or clipping any content? Below is an image demonst ...

Creating a series of scalable svgs of uniform size in a row, enabling me to resize them based on width without disrupting the overall design

I need a row of equally sized SVGs with some text below them, like a navigation bar but larger. I almost have it working, but there are some issues with my current setup. To clarify, this is what I am aiming for: The SVGs should be responsive and scale a ...

Firefox showing inconsistent jQuery positioning results

Here is a fiddle I created to demonstrate the issue at hand... https://jsfiddle.net/scottieslg/q78afsu8/10/ Running this fiddle in Chrome or Opera yields a value of 8. However, Firefox returns 9, and IE gives 8.5. How can I ensure consistency across al ...

Express backend not receiving form data from post request

I recently created a form to submit a file to an express backend, but I'm encountering an issue where the data is not being received on the backend when the form is submitted. Upon using console.log, I noticed that req.body returns {}, and sampleFile ...

HTML with embedded PHP script

i cannot seem to display mysql data in html format. the table i am working with is called App appid | app | version | date | apk file | 1 sample 1.0.0 2012-10-12 sample.apk //here is the mysql query ...

Increasing the height of a DIV that is positioned beneath another DIV with a set height

My goal is to convey my message visually. I hope you can understand without too many words. The issue I am facing is that when trying to stretch a 100% height DIV under another DIV with fixed height, it does not stretch properly. If you want to experiment ...

Tips for eliminating the additional space on the right side of MUI grid components

The MUI grid example displayed below appears to leave an additional space on the right side of the grid, giving the impression that it does not fully occupy the available space on the page. https://i.sstatic.net/Q6sgB.png I have attempted to adjust/remov ...

Is it possible for the vertical borders of <span> to overlap?

When nesting multiple spans within each other and giving them borders, their horizontal borders overlap by default while their vertical borders stack. Check out a live example on JsFiddle: https://jsfiddle.net/4un9tnxy/ .html: <span><span>a& ...

Is your idTabs design in need of some sprucing up

Just stumbled upon idTabs and trying to implement a basic one on my server. I've taken the code from the 'Usual' page, included the plugin file and jQuery, but all I'm seeing is... - Tab 1 - Tab 2 - Tab 3 This is tab 1. Seems like it& ...

Adjust the alignment of items in the NavBar using BootStrap to ensure they

I'm having trouble centering the contents of my Nav Bar, and for some reason, everything seems to be left-aligned instead of centered. I haven't used float: left anywhere, so I'm not sure why it's not working as expected. The goal is ...

Displaying information stored in a database as notifications in the notification icon within the HTML/PHP header

Within my MySQL database, there exists a table named order_detail. This table is populated with values from my android app. I am looking to display the order_id as a notification in my admin panel, which is built using HTML/PHP. The attributes of the orde ...

Center the div and make it position fixed

Is there a way to position a div in the center of the screen or its parent div, and have it fixed so that it does not shift when its width changes? I have a div containing a table, as shown below: https://i.sstatic.net/OVh2y.png I'm unsure if the oute ...