A linear gradient effect originating from the center/middle of the background

Is it possible to create a linear-gradient background that starts from the center or middle of the screen?

This is the CSS I am currently using:

body {
    display: table;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    background-size: 800px;
    background: blue;
    background: -webkit-linear-gradient(to left, black, blue, blue, black 800px);
    background: linear-gradient(to left, black, blue, blue, black 800px);
}

The gradient background stops after 800px as desired, but it is on the right side of the screen rather than behind the content of the webpage. I cannot move it elsewhere and its position varies with window size. I need it to stay fixed in the center behind my content.

Is there something like the following line available?

background: linear-gradient(to sides, blue, black 400px);

I want to be able to set the starting position of the linear-gradient to the center and have it run to both sides. It should stop at 400px from the center (using the last color thereafter) making it a total width of 800px for the gradient.

htmlcssbackgroundlinear-gradients

Answer №1

After interpreting your request correctly, here is the solution:

body, html {
  width: 100%;
  height: 100%;
  margin: 0px;
}
body {
  background-image: linear-gradient(to right, black, blue 400px, black 800px);
  background-size: 800px 100%;
  background-position: 50% 100%;
  background-repeat: no-repeat;
}

Answer №2

Consider trying out this code snippet:

background: linear-gradient(to right, orange, red 20%, red 80%, orange 100%);

By utilizing percentages in your gradient, you can guarantee that the appearance of your webpage will adjust accordingly. This code will result in the left and right portions being orange, while the central area will be a solid red color!

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

color-transition effect (CSS-only)

I'm attempting to replicate the fading effect shown here in the lower right corner where the artist name and track title gradually fade out towards the right. Initially, I tried creating an overlay image, but it resulted in a jagged edge on the right ...

htmlcss

Ensure that the fixed header's width matches the size of the container div

The header element is contained within a div. I have positioned the header as fixed, leading to 2 issues: The width of the header extends beyond the width of the div container. It should align with the div. When the header is fixed, the other elements li ...

htmlcss

What are some creative ways to format text displayed using ngx-markdown?

I'm currently in the process of building a blog using Angular and I have decided to use Markdown for creating my posts. Specifically, I am looking into integrating ngx-markdown for rendering purposes. As of now, I am developing a component dedicated t ...

cssangularmarkdown

How can I retrieve the offset top of a td element in relation to its parent tr element?

Here is some sample dummy HTML code: <table> <body> <tr> <td id="cell" style="height: 1000px; width: 200px;"></td> </tr> </body> </table> I am looking to attach a click event ...

javascriptjqueryhtmlcss

Using an array of images with CSS and displaying them in HTML

Is there a way to use one class for 3 buttons, each with its own unique background image? I wanted to create an array of background images in CSS and then retrieve them individually for each button. However, after some research, it seems that CSS does not ...

htmlcss

Obtain the CSRF token from a webpage using JavaScript

I am currently working on a project where I need to retrieve the csrf token from a web page built with Django using javascript. The structure of my HTML template is as follows: <div class = "debugging"> <p id = "csrf">{% csrf_token %}</p ...

javascripthtml

store JSON data within an HTML list element

I've been working on a JavaScript script that allows me to generate list items in HTML. Right now, I have functionality to drag and remove the items using another script. However, I am interested in adding some additional information to each list item ...

javascripthtmljsonlist

Stop the form from refreshing upon submission using an Ajax call in AngularJS

Currently, I am in the process of developing a search form that requires two inputs: Job title and Location. These keywords are used to gather data from various websites. However, upon submitting the form, the page refreshes itself. To prevent this, I have ...

javascriptjqueryhtmlajax

How can you determine if multiple checkboxes have been checked with "if" statements following a button click?

I am looking to display a message after clicking a button if one or more checkboxes are checked. I would prefer using Jquery for this functionality. Any help on achieving this would be highly appreciated. $(function() { $(".btn").click(function() { ...

javascripthtmljquery

Exploring the benefits of using Div and semantic elements in web

After spending more than two months learning HTML, I still find myself uncertain about the most practical coding approach. Despite knowing that it's important not to overthink it, I often wonder if I should stick with simplicity or add extra elements ...

htmlcss

Enhancing the appearance of a JSX component in React

I have a segment of code within my project that calculates a specific percentage and displays it on the dashboard. <text className="netProfit-circle-text" x="50%" y="50%" dy=".2em" textAnchor="middl ...

javascriptcssnode.jsreactjsecmascript-6

Remove a div using JavaScript

My approach involves dynamically adding div elements using JavaScript in the following manner: <div id="detail[0]"> <input name="detail.Index" type="hidden" value="0" /> <input name="detail[0].details_name" type="text" /> ...

javascriptjqueryhtml

What is the CSS technique to make text wrap around an image, similar to the layout seen in certain newspapers?

I am looking for a way to have my images wrap with text align in this specific layout: <html> text text text text text <br> text text text text text <br> ______________ text text text <br> image | text text text <br> i ...

htmlcssimagealignmentword-wrap

What steps can be taken to modify the style of a single button belonging to a broader group of elements?

Is there a way to hide the save button within a Vue Modal without affecting other buttons with the same class? .btn.btn-primary { display: none; } Simply targeting .btn-primary in the CSS affects all elements with that class, and adding .modal woul ...

cssvue.jsbuttonmodal-dialog

creating and managing multiple redirect routes in vue.js application

const router = new VueRouter({ routes: [ {path: '*', redirect: '/'} } )} I have configured this as the default redirect route in my routes.js file. Now, I am wondering how I can set multiple redirect paths and trigger them ...

htmlvue.jsvuejs2

Arranging items to be flush at the base of several columns

I need help with positioning buttons at the bottom of three columns of text. I want them to be aligned vertically on the page when the columns are side-by-side, and then placed after each column when viewed in a single-column layout on small screens. The c ...

htmlcsspositioningmultiple-columns

Verifying the selection state of a dynamically generated checkbox with JavaScript

I have a table with checkboxes. Each time a button is clicked, I dynamically add new checkboxes to the table like so: var cell3 = row.insertCell(2); cell3.innerHTML = '<input type="checkBox" value=\"selected?\" style="cursor:poin ...

javascripthtml

Guide to configuring an Angular Material Footer using Flex-Layout

Could someone help me with setting up the footer in my Angular Material app? I want it to: stick to the bottom when the content height is smaller than the view-port move down or get pushed down when the content height exceeds the view-port One important ...

htmlcssangularangular-materialangular-flex-layout

When using equal-width columns in Bootstrap, the columns will be stacked one on top of the other

When I utilize Bootstrap 5, I am encountering an issue where equal width columns are being displayed one underneath the other. To illustrate, here is a simple example directly from the Bootstrap website: <link rel="stylesheet" href="https://cdn.jsd ...

htmlcsstwitter-bootstrapbootstrap-5

Expanding Image with HTML and CSS: A Guide

In the process of creating my website, I encountered an issue with the logo placement. I wanted the logo to be in the top left corner, similar to the one shown in this image. Initially, everything was working fine until I made some adjustments to move the ...

javascripthtmlcssimagesticky