Multiple instances of CSS linear gradients being shown

I recently added a linear-gradient effect to the CSS of my HTML website. However, I encountered an issue where the gradient was repeating multiple times on the page.

Just to provide some context, my website is hosted on nginx, and for server-side rendering, I utilize Express.js in combination with EJS.

If anyone has any insights or suggestions on how to troubleshoot and fix this problem, I would greatly appreciate your help.

* {
    margin: 0;
    font-family: Roboto,Arial,sans-serif;
    font-weight: bold;
    
}

@font-face {
    font-family: 'Mokoto Glitsch 2';
    src: url('../fonts/mokoto-mokoto-regular-glitch-mark-2-400.ttf') format('truetype');
    
}

body {
    background: linear-gradient( #D077E8, #01536C);
    background-size: cover;
    user-select: none;
    overflow: hidden;
}

header {
    position: relative; 
    width: 100%;
    height: 70px;
    color: white;
    background-color: #010F27;
}

.server-tool-text {
    font-family: 'Mokoto Glitsch 2', Arial, sans-serif;  
    line-height: normal;
    margin-top: 7px;
}

.logo {
    float: left;
    font-size: 25px;
    margin-left: 30px;
    height: 70px;
    display: flex;
    align-items: center;
}

.profile-picture {
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    object-fit: cover; 
    margin-right: 10px;
}
.profile-name {
    margin-right: 10px;
}

.user-menu {
    float: right;
    margin-right: 10px;
    text-decoration: none;
    height: 70px;
    display: flex;
    align-items: center;
}

.user-menu a {
    text-decoration: none;
    margin-right: 20px;
    color: white;
}

.menu {
    float: left;
    margin-left: 40px;
    text-decoration: none;
    height: 70px;
    display: flex;
    align-items: center;
}

.user-menu a {
    text-decoration: none;
    margin-right: 20px;
    color: white;
}

.menu-button {
    font-size: 15px;
    margin-left: 15px;
    color: white;
    background-color: #010F27;
    width: 150px;
    height: 40px;
    border-radius: 5px;
    border: None;
    transition: background-color 0.3s;
}

.menu-button:hover {
    cursor: pointer;
    background-color: rgb(8, 9, 22);
    transition: background-color 0.3s;
}

.log-in {
    font-size: 14px;
    color: white;
    background-color: #010F27;
    width: 80px;
    height: 40px;
    border-radius: 5px;
    border: None;
    transition: background-color 0.3s;
}

.log-in:hover {
    cursor: pointer;
    background-color: rgb(8, 9, 22);
    transition: background-color 0.3s;
}

.log-out {
    font-size: 14px;
    color: white;
    background-color: #ff0000;
    width: 80px;
    height: 40px;
    border-radius: 5px;
    border: None;
    transition: background-color 0.3s;
}

.log-out:hover {
    cursor: pointer;
    background-color: #690101;
    transition: background-color 0.3s;
}

.invite-button {
    font-size: 20px;
    margin: 0;
    position: absolute;
    top: 75%;
    left: 40%;
    transform: translate(-50%, -50%);
    color: white;
    background-color: #010F27;
    outline: 2px solid #00367c;
    width: 200px;
    height: 50px;
    border-radius: 5px;
    border: None;
    transition: background-color 0.3s;
}

.invite-button:hover {
    cursor: pointer;
    background-color: rgb(8, 9, 22);
    outline: 2px solid #003f91;
    box-shadow: 0 0 10px 2px rgba(0, 162, 255, 0.7);
    transition: background-color 0.3s;
    transition: outline 0.3s;
    transition: box-shadow 0.3s;
}

.dashboard-button {
    font-size: 20px;
    margin: 0;
    position: absolute;
    top: 75%;
    left: 60%;
    transform: translate(-50%, -50%);
    color: white;
    background-color: #010F27;
    outline: 2px solid #00367c;
    width: 200px;
    height: 50px;
    border-radius: 5px;
    border: None;
    transition: background-color 0.3s;
}

.dashboard-button:hover {
    cursor: pointer;
    background-color: rgb(8, 9, 22);
    outline: 2px solid #003f91;
    box-shadow: 0 0 10px 2px rgba(0, 162, 255, 0.7);
    transition: background-color 0.3s;
    transition: outline 0.3s;
    transition: box-shadow 0.3s;
}


.titel {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 800px;
    transform: translate(-50%, -50%);
    padding: 10px;
    color: white; 
    
}
.titel-subtitel {
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, 50%); 
    width: 500px;
    padding: 10px;
    color: white;
    text-align: center; 
}
<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>Server Tool</title> 
    <base href="https://servertool.xyz/">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <link rel="icon" type="image/ico" href="assets/favicon.ico">
</head>

<body>
    <header>
        <span class="logo">
            <img src="assets/img/servertool-logo.png" style="width: 65px; height: 65px; border-radius: 20%;" />
            &nbsp;
            <span style="color: white; font-weight:900;" class="server-tool-text">Server Tool</span>

        </span>
        <span class="menu">
            <a href='https://servertool.xyz/support'><button class='menu-button'>Support Server</button></a>
            <a href='https://servertool.xyz/docs'><button class='menu-button'>Documentation</button></a>
        </span>
        <span class="user-menu">
            <a href='https://servertool.xyz/login'><button class='log-in'>Login</button></a>
        </span>
    </header>

    <h1 style="font-weight:900; font-size: 24px; white-space: pre-line; " class="titel">
        <span style="color: white; font-weight:800; font-size: 30px;">Server Tool App and Website are in Development</span>
        <span style="color: white; font-weight:900;  font-size: 15px;" class="titel-subtitel">You can finde more information on our Support Server</span>
    </h1>
    <a><button onclick="inviteServerTool()" class="invite-button">Invite Server Tool</button></a>
    <a><button onclick="gotodashboard()" class="dashboard-button">Dashboard</button></a>

<script>
     function inviteServerTool() {
        var url = "https://discord.com/oauth2/authorize?client_id=1236000476143685762&permissions=8&scope=bot+applications.commands";
        var width = 450;
        var height = 750;
        var left = 0;
        var top = 0;
        window.open(url, "_blank", "width=" + width + ", height=" + height + ", left=" + left + ", top=" + top);
        }

        function gotodashboard() {
            window.location.href = `https://servertool.xyz/dashboard`;
        }
</script>

</body>

</html>

htmlcss

Answer №1

To enhance your website's design, consider adding the "background-attachment" property to your body tag in the CSS code.

body {
    background: linear-gradient(#D077E8, #01536C);
    background-size: cover;
    user-select: none;
    overflow: hidden;
    background-attachment: fixed;
}

The background-attachment property allows you to set whether a background image stays fixed within the browser viewport or scrolls with its container.

For more information, visit https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

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

Difficulties encountered when trying to send emails on iPhone with HTML formatting and attachments

I'm attempting to send a JPG attachment along with a formatted HTML message using [picker setMessageBody:emailBody isHTML:YES]; as recommended by several forum posts. However, what I've noticed is that the resulting email's content varies d ...

iphonehtmlemailattachment

Unable to Toggle the 'Checked' Prop on Selection with React Bootstrap CheckBox

As a newcomer to React Bootstrap, I've been encountering an irritating problem with checkboxes in a form I'm developing. After updating the state, the checkboxes don't remain checked when selected. However, if I check them again, they stay ...

htmlreactjsreact-bootstrap

What is the best way to target an anchor element that includes a particular word using jquery or css?

I attempted $('a[title="*"]').find('contains("PDF")').css({'background-color':'red'}); Unfortunately, this code is not working as expected. To clarify, I am searching for a specific word in the title. ...

jquerycss

Place a check mark in the corner of the button

I am looking to add a checkmark on my button in the right corner. I have set the input value and it displays a button with a check mark, but I want it to be positioned in the right corner. .buttoner{ background-color: #4CAF50; b ...

javascripthtmlcss

PlateJS: Transforming HTML into data

Trying to implement a functionality where clicking on a button retrieves an HTML string. The objective is to have this rich text editor within React-Hook-Form, and upon form submission, the value will be saved as HTML for database storage. Below is the pr ...

javascripthtmlreactjsserializationreact-slate

Collapsing Bootstrap menu bar causing logo overlap

When the navbar collapses (when it shows the toggle icon), the menu items (home, services, portfolio, about, contact) overlap with the logo. If I remove the position:absolute from the logo (navbar-brand), the menu appears in the center. Is there a way to h ...

javascriptjqueryhtmlcsstwitter-bootstrap

Delegate All Events to the Document

In my current setup, I have over 350 events that look like: $(document).on('click','.removable-init',function(){}); I've noticed a performance issue where some click events are delayed by a fraction of a second. This is happening ...

javascriptjqueryhtmlperformanceevents

Unresponsive Webpage

I am currently managing Facebook Ads for a client, but I have encountered an issue with their website not being responsive on mobile devices. While I have some knowledge of basic HTML & CSS, I am uncertain about how to address this particular problem. The ...

htmlcss

Is there a way to use JQuery to make one button trigger distinct actions in two different divs?

For instance: Press a button - one div flies off the screen while another div flies in. Press the button again - Same div flies out, other div returns. I'm completely new to Javascript/JQuery so any assistance would be highly appreciated! Thank you ...

javascriptjqueryhtmlcss

The addClass and removeClass functions in jQuery are functioning properly only on Firefox browser

Could someone help me understand why this code works in Firefox but not in Safari or Chrome? The variable newClass retrieves the value from a select box, which is then used to create a selector for adding or removing classes using addClass/removeClass. I ...

jqueryhtmlcss

Stacking a Bootstrap column above another column

Is there a way to stack a bootstrap column on top of another column while maintaining its size and responsiveness? Consider this scenario with 4 columns arranged in a row: https://i.sstatic.net/qug0g.png Upon clicking the Overlay btn, the E column shoul ...

htmlcsscss-positionbootstrap-5

I prefer not to have the entire URL visible to me

function updateDate(day, month, year) { month += ""; if (month.length <= 1) month = "0" + month; document.location.href = "<?php $_SERVER['PHP_SELF'];?>?page=events&day=" + day + "&month=" + m ...

javascriptphphtmlurlget

Integrating Images Seamlessly with Text using HTML and CSS

Still getting the hang of this! I'm working on a webpage with an image and text side by side in separate divs. I've positioned them correctly, but when I resize the page, the text changes size while the image stays the same. I want the text to al ...

htmlcssimageresize

The parent's height remains unaffected by the margins of its child element

My code snippet is concise: .parent{ box-sizing: border-box; } .child{ height: 100px; margin: 20px; background: red; } .a1{ background: green; } <!DOCTYPE html> <html> <head> </head> <body> ...

htmlcss

What could be causing the issue of my CSS file not properly connecting with my HTML files in Django?

I am facing an issue with linking the CSS file to the HTML file in my code. Despite not showing any errors, there is no effect on my webpage. The files I have included are settings.py, base.html, and base.css. Additionally, my static folder is located outs ...

htmlcssdjango

Ways to enable smooth scrolling feature in Safari

I attempted to implement smoothscroll using a polyfill by adding the following code to the bottom of my body tag: <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e99a8486869d819a8a9b868585c ...

javascripthtmlcss

The PHP on server could not be loaded by Ajax

Trying to establish a PHP connection, encountering an error and seeking assistance. The error message displayed is as follows: { "readyState": 0, "status": 0, "statusText": "NetworkError: Failed to execute 'send' on 'XMLHttpReq ...

javascriptphpjqueryajaxhtml

A method to ensure that inline <div> elements occupy the entire available width

The typical solution for this issue is using float, however, it does not work in my situation. I attempted to utilize flexbox and overflow:hidden for the parent element, but unfortunately, it did not resolve the issue. Currently, I am dealing with three i ...

htmlcss

Expanding the size of a buffer array dynamically in JavaScript while adding items

Within the source table are several records stored. Upon clicking each record in the source table, the AddSelectedItem(sValue) function is triggered, adding those specific records to the destination table. The desired outcome is for the array to dynamica ...

javascripthtml

Output MySQL information into an HTML form with radio buttons and an additional text field

Users are able to input product data into a MySQL database through my web form. They can choose between three main suppliers using radio buttons (Sigma-Aldrich, VWR, and Filter-Service), or select 'other' and specify a different supplier in a tex ...

phphtmlmysqlsql