Align the radial gradient in a vertical orientation

Check out this jsfiddle I've created: https://jsfiddle.net/gfxjwuao/

.skeleton-yqjgac1o2g6:empty {
  height: 133px; 
  background-color: red; 
  border-radius: 0px 0px 0px 0px; 
  background-image: radial-gradient( circle 20px at 20px 20px, #F5F7F9 19px, transparent 20px );
  background-repeat: repeat-y;
  background-size: 40px 133px;
  background-position: center center;
}
<div class="skeleton-yqjgac1o2g6"></div>

I have successfully centered the circle horizontally, but struggling with vertical alignment. How can I achieve that?

The code 

background-position: center center
doesn't seem to work for vertical alignment.

css

Answer №1

I attempted it in a different way by adjusting the radial-gradient coordinates to be "center":

.skeleton-yqjgac1o2g6:empty {
  height: 133px; 
  background-color: red; 
  border-radius: 0px 0px 0px 0px; 
  background-image: radial-gradient( circle 20px at center, #F5F7F9 19px, transparent 20px );
  background-repeat: repeat-y;
  background-size: 40px 133px;
  background-position: center center;
}
<div class="skeleton-yqjgac1o2g6"></div>

Just starting out, though. I can't really provide a detailed explanation for it.

Answer №2

To easily change the background-image radial gradient, adjust the y value to 50%. Alternatively, you can simply use the provided code snippet below and explore the reasoning behind it. :)

.skeleton-yqjgac1o2g6:empty {height: 133px; background-color: red; border-radius: 0px 0px 0px 0px; background-image: radial-gradient( circle 20px at 20px 50%, #F5F7F9 19px, transparent 20px );background-repeat: repeat-y;background-size: 40px 133px;background-position: 50% 50%;vertical-align: center;}

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

JavaScript drop-down menu malfunctioning

I am currently in the process of learning web development languages, and I'm attempting to create a dropdown list using JavaScript (I previously tried in CSS without success). I would greatly appreciate it if you could review my code and let me know ...

javascriptcss

Ensure that a tiny image measuring 1*1 pixel just before the closing </body> tag does not generate unwanted margin

Take a look at this demonstration Even though I have set the <body> to have no margins whatsoever, a 1*1 image at the bottom of the page is causing a significant margin. Adding or removing the current CSS reset does not resolve the issue. What cou ...

htmlcss

The alignment of labels and text inputs using CSS flexbox is not correct

I am attempting to create a responsive layout for the labels and text inputs in my HTML code. I want them to align in a single row, with one label and one text input per row when the screen width is below a certain threshold. Once the screen width exceeds ...

htmlcss

Modifying the appearance of the search box

I'm looking to customize the appearance of my search box. On Stack Overflow, you'll notice the search box is a perfect rectangle. I want mine to have rounded edges, like an ellipse, rather than being rectangular. How can I achieve this look? Than ...

htmlcss

Having issues with Bootstrap affix functionality malfunctioning

I recently put together documentation using the CSS and JavaScript from Bootstrap docs. Here is a snippet of the sidebar code in my documentation: <div class="col-md-3 docs"> <div class="bs-docs-sidebar"> <ul class="nav docs-sid ...

javascriptjqueryhtmlcsstwitter-bootstrap

The styles are not being rendered on the Angular application

I have successfully implemented a Modal service with working HTML/CSS (Check it out on StackBlitz) div.cover { align-items: center; background-color: rgba(0, 0, 0, 0.4); bottom: 0; display: flex; justify-content: center; left: 0; ...

htmlcssangularangular8

Steps to set a default selection from a list of components in Angular 7

Currently, I am in the process of developing a messages page layout where users can select a message from a list on the left side and view its content on the right side, similar to how it is done in Outlook. Additionally, users should be able to reply or c ...

htmlcssangular2-routingangular7angular-components

Creating a personalized error page with the .htaccess file

I want to create personalized error pages for different errors This is the layout of my directory: .htaccess error_pages: error_400.html error_401.html error_404.html ...

phphtmlcss.htaccess

Creating a sleek navigation menu using Bootstrap 4

Currently tackling the Vertical Navigation bar which can be found at this location: Codeply This is my code snippet: <html> <body> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" > ...

cssbootstrap-4

CSS position: sticky not keeping search bar at the top of the page

I'm having trouble getting a search bar to stick at the top of a div using position: sticky. I've checked for common issues like overflow: hidden on parent elements without specified height, but that's not the problem in this case. Here&apos ...

cssreactjscss-position

The HTML element update event was not triggered due to the excessive load of a JavaScript function

I am currently running a JavaScript function that is quite CPU intensive. To provide visual feedback to users when it starts and stops, I am attempting to display a badge on the webpage. Below is the code snippet: function updateView() { console.log(1 ...

javascripthtmlcssbootstrap-4

Adjust the header image as you scroll

Currently, I have a static image in the header of the page. I'm looking to have the image change to a different one when half the page has been scrolled. Do I need to utilize JavaScript for this functionality or is it achievable with CSS alone? bo ...

javascripthtmljquerycss

Swap out the current image for a different one

When a user clicks on different image or color options, I want to change the main image displayed. Below are the links to the alternative images: https://i.sstatic.net/DxJEb.jpg This is the HTML code: <div class="container"> <p class="img-main" ...

javascriptjqueryhtmlcss

Is it possible to navigate to an anchor within an HTML element that has relative positioning?

Check out the HTML code below: <li name="services"> <h1>Services</h1> <p>text</p> </li> <li name="about"> <h1>About</h1> <p> ...

javascriptjqueryhtmlcss

Visible element specifically for a predefined height

As someone who is just starting to learn about HTML, CSS, and JavaScript, I have encountered a specific issue. I want to display navigation dots on my webpage for only a certain section, while keeping them hidden for the rest of the time. To achieve this, ...

htmlcssvisibility

Issues with responsive design

Frontend mentor projects have been a tricky challenge for me lately, especially when it comes to serving images of different viewport sizes on desktop. I've tried using the picture element and specifying at what width the image should be served, but f ...

htmlcsssassfrontend

Is there a way to show an incorrect username and password message directly above the sign-in form?

Is there a way to have an error message display just above the sign-in form if the username and password are incorrect? I don't want it to redirect to another page, but simply show the error right above the form in my code. <!Doctype html> < ...

javascriptphphtmlcss

Vertical tab design in Bootstrap does not automatically switch tabs

I'm managing two separate tab boxes that switch content when clicked or over a 5-second period. https://i.sstatic.net/Ujz9H.jpg https://i.sstatic.net/sFc1K.jpg The left box is functioning correctly, but the right box is changing the active state wit ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the process for displaying a floating menu when you reach a specific point while scrolling?

I'm looking to implement a feature where four menu tabs will slide in from left to right when the user scrolls past a specified point on the page, such as 1000px. I want them to smoothly appear just like this example, but positioned on the left side o ...

jqueryhtmlcssheaderfloating

CSS Stylelint rule to detect the 'missing selector' issue

My current process involves using stylelint to identify any CSS errors before building and deploying our site. However, a recent commit includes code that fails the CSS parser/minifier but passes stylelint validation. .example-class , /*.example-class-two ...

cssstylelint