The vertical and horizontal centering of linear gradients is causing them not to display

I'm having trouble with a background gradient not working properly after I centered the page both horizontally and vertically. Here is the code snippet:

body {
  background: linear-gradient(to right, #CB356B 0%, #BD3F32 100%);
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<h1>Lorem Ipsum</h1>

Check out my JsFiddle here.

I've also tried another solution, but it's still not working unless I add margin to the body, which is something I don't want to do.

Any help would be appreciated. Thanks!

htmlcss

Answer №1

Since the body is set to absolute positioning, its size becomes 0 within your html. To resolve this issue, setting the height of your html to 100% will provide a solution.

html {
  height: 100%;
}

body{
  background: linear-gradient(to right, #CB356B 0%, #BD3F32 100%);
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<h1>Lorem Ipsum</h1>

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

Tips for changing the background color depending on the value

I am creating a table displaying the results of a tournament. Each team's final placement and original seeding will be listed. I plan to include a small bubble next to each team showing how their final placement compares to their initial seeding. To v ...

htmlcssangular

Arrangement of Divs in Mobile Design - Utilizing Bootstrap 4 Rows and Columns

I've been grappling with a layout issue while using Bootstrap 4, specifically concerning the positioning of elements on mobile devices. I was wondering if anyone could lend me a hand with this challenge. Let me illustrate the desired layout: Link to ...

htmlcssflexboxbootstrap-4responsive

Storing geographic locations in a variable by inputting an address

Currently, I am working on a feature that allows users to input a location and then convert it into longitude and latitude coordinates. These coordinates will be stored in a variable called latlng instead of using preset coordinates. Right now, I have a fu ...

javascriptjqueryhtmlforms

Various image resolutions designed for extra small, small, medium, and large screens

My image has a relative width and currently the src points to a single, large file (approximately 1000px). The issue arises on small devices with Opera and IE where the browser scaling results in pixelated images. Conversely, using a smaller image leads to ...

htmlcssimage

Is there a way I can ensure that two elements have identical heights?

Is there a way to ensure that two different elements in HTML are always the same height using CSS? I attempted to achieve this by setting each element to 50vh in the CSS, but it didn't work. codepen: https://codepen.io/ichfickedeinemutterdudummerwich ...

htmlcss

Alignment issue with Bootstrap's vertical radio buttons

When the screen size reaches 768px for mobile phones, I am experiencing an issue with stacking radio buttons. I have a local @media override that sets the radio-inline display to block, but it causes the first Radio Button "0" to be slightly offset and n ...

cssasp.netbootstrap-4

The problem with "em" in CSS: preventing it from scaling based on the font-size of a particular element

My website predominantly utilizes "em" for design over "px," which is meant to be more compatible with modern browsers. Most of the text is set at font-size:1em, where 1em equals 16px as a default without specific specification. However, there are sectio ...

cssfont-size

Is it possible to use JavaScript to make a CSS animation mimic the behavior of a :hover effect?

My CSS animation looks like this: HTML: <div class="container" id="cont"> <div class="box show"></div> </div> CSS: .container { width: 100vw; height: 100vh; } .box { position: absolute ...

javascripthtmlcss

Modify the role attribute on elements in real-time to enhance accessibility

On a German website, we have implemented a textfield with autocomplete functionality in a form. As the user types into the input field, a dropdown menu of suggestions appears for them to select from. It is crucial that this feature is fully accessible with ...

htmlaccessibilitywai-arianvda

Aligning a div within another div with an image

My current setup looks like this: HTML: <div class="wrapper"> <img src="image.jpg" /> <div class="circle"> X </div> </div> CSS: .circle { width:50px; height:50px; border-radius:50%; background: #FF0000; } ...

jqueryhtmlcss

Reorganize elements using CSS styling

I have a trio of child divs with the classes span2, span7, and span3. When my browser width drops below 763px, I want them to display in the order span2, span3, and span7. How can I achieve this using CSS? Here is the code snippet I started with: <div ...

htmlcss

Troubleshooting: CSS3 transform issue unresolved

I'm attempting to add a 10-degree rotation to my menu items. While this CSS effect works in Firefox, I can't seem to get it to work in Chrome and Safari. I already know that IE doesn't support this particular CSS3 property, so that's no ...

htmlcss

Tips for toggling password visibility by clicking outside a password field

As I work on creating a password field that allows users to toggle the visibility of their password by clicking an eye icon, I am facing a challenge. I want the password to be hidden automatically when the user clicks outside the field, which requires a co ...

javascripthtmljquery

Tips for getting the setInterval function to work with a progress bar even when a tab is not in focus

After browsing through similar questions, I couldn't find the answer I was looking for. As a newbie in programming experimenting with JavaScript Progress Bar, I encountered an issue where the progress bar would pause and the counter wouldn't coun ...

javascriptjqueryhtml

Encountering issues with calling a custom directive within another custom directive in AngularJS

I need to implement a custom directive within the template of another custom directive. Here are the code snippets for reference: Issue with Scenario 1 angular.module('myApp') .directive('customOnChange', function () { return { r ...

htmlangularjsangularjs-directive

carousel/slider must be accessible

I have been searching for hours and still cannot find the perfect carousel/slider that I need. The one at this link is close to what I want, but it becomes inaccessible when JavaScript is disabled in the browser. I am looking for a jquery infinite carous ...

jquerycssjquery-uixhtml

Troubleshooting Problem with CSS Background-Image in Safari

These questions have been popping up all over the web with little response. I've added some CSS in jQuery like this: $('#object').css('background-image', 'url(../../Content/Images/green-tick.png)'); This works in all b ...

javascriptjquerycsssafari

When the button is clicked, populate a new form with information from the model

As a newcomer to stackoverflow and django, please excuse me if my description is lacking in detail. This is the models.py file: from django.db import models # Create your models here. SPORTS_CHOICES = ( ('nfl', 'NFL'), (&apos ...

jqueryhtmldjangodjango-modelsdjango-forms

Move the items downwards to occupy any empty space vertically

Just a quick overview of the code I'm working with (I am using Material UI in React). This container is meant to hold chat messages exclusively. const ChatContainer = ({ chatMessages }) => { const classes = useStyles(); return ( <Paper ...

javascriptcssreactjsmaterial-ui

Distinguish between datalist selection and text input in BootstrapVue Autocomplete

When looking at the code snippet provided below, I'm trying to figure out the appropriate event/method to determine whether the value entered in the input field was manually typed or selected from the <datalist>. SAMPLE CODE: <div> &l ...

javascripthtmlvue.jsvuejs2bootstrap-vue