Resolution for Reflected Diagonal Backdrop Design

Encountering a bug in Firefox with my mirrored diagonal background pattern. A vertical line appearing between left and right positioned elements at certain screen widths. Seeking a CSS solution or hack, no linked image files allowed.

.stripes-background {
    width: 50%;
    margin:0 auto;
    padding: 2em;
    position: relative;
    overflow:hidden;
    border-radius:3px;
}

.stripes-diagonal-left {
    background-color: #333333;
    background-image: repeating-linear-gradient(
    25deg,
    transparent,
    transparent 20px,
    rgba(255, 255, 255, 0.05) 20px,
    rgba(255, 255, 255, 0.05) 40px
    );
    position: absolute;
    top: 0;
    width: 50%;
    height: 105%; 
    z-index: -2;
    left: 0;
}

.stripes-diagonal-right {
    background-color: #333333;
    background-image: repeating-linear-gradient(
    25deg,
    transparent,
    transparent 20px,
    rgba(255, 255, 255, 0.05) 20px,
    rgba(255, 255, 255, 0.05) 40px
    );
    position: absolute;
    top: 0;
    width: 50%;
    height: 105%; 
    z-index: -2;
    transform: rotateY(180deg);
    left: 50%;
}
<div class="stripes-background">
    <div class="stripes-diagonal-left" role="presentation"></div>
    <div class="stripes-diagonal-right" role="presentation"></div>
</div>

cssbackground-imagerepeating-linear-gradient

Answer №1

To create a single element with multiple backgrounds, combine them using gradients and adjust the overlap to close any gaps.

.stripes-background {
    width: 50%;
    margin:0 auto;
    padding: 2em;
    border-radius:3px;
    background: repeating-linear-gradient(
      25deg,
      transparent,
      transparent 20px,
      rgba(255, 255, 255, 0.05) 20px,
      rgba(255, 255, 255, 0.05) 40px
    ) left,
    repeating-linear-gradient(
      -25deg,
      transparent,
      transparent 20px,
      rgba(255, 255, 255, 0.05) 20px,
      rgba(255, 255, 255, 0.05) 40px
    ) right,
    #333333;
   background-size:50.01% 100%; /*slightly bigger than 50% */
   background-repeat:no-repeat;
    
}
<div class="stripes-background">
</div>

For better management of the gradient code, CSS variables can be utilized to avoid duplication:

.stripes-background {
    --c:transparent,
      transparent 20px,
      rgba(255, 255, 255, 0.05) 20px,
      rgba(255, 255, 255, 0.05) 40px;
      
    width: 50%;
    margin:0 auto;
    padding: 2em;
    border-radius:3px;
    background: 
     repeating-linear-gradient( 25deg,var(--c)) left,
     repeating-linear-gradient(-25deg,var(--c)) right,
     #333333;
   background-size:50.01% 100%; /*slightly bigger than 50% */
   background-repeat:no-repeat;
    
}
<div class="stripes-background">
</div>

Answer №2

In the following code snippet, I have found a solution that works seamlessly in Firefox, Edge, and Chrome without displaying any unwanted vertical lines down the middle. While @temani-afif's answer was quite ingenious for its simplicity, there were still issues with a visible vertical line in Firefox, albeit to a lesser extent. After some experimentation, I discovered that using background-size: 50% 100% instead of background-size: 50.01% 100% eliminates the problem in Firefox. Hence, I had to create a specific CSS declaration solely for Firefox compatibility. I am attributing the success of my solution to Temani's initial guidance.

.stripes-background {
  --c: transparent, transparent 20px, rgba(255, 255, 255, 0.05) 20px,
    rgba(255, 255, 255, 0.05) 40px;
  width: 50%;
  margin: 0 auto;
  padding: 2em;
  border-radius: 3px;
  background: repeating-linear-gradient(25deg, var(--c)) left,
    repeating-linear-gradient(-25deg, var(--c)) right, #333333;
  /*--non-firefox browsers need hack to remove vertical line--*/
  background-size: 50.01% 100%; /*a litte bigger than 50% */
  background-repeat: no-repeat;
}

/*--firefox needs no hack to remove vertical line--*/
_::-moz-range-track,
body:last-child .stripes-background {
  background-size: 50% 100%;
}
<div class="stripes-background">
</div>

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

Svelte components loaded with no design aspects applied

I encountered an issue while trying to integrate the "Materialify" and "Carbon Components for Svelte" libraries into my Sapper project. The components seem to be loading, but without any associated styles. I followed the installation commands provided on t ...

cssuser-interfacesveltesapper

What is the best way to design a group of radio buttons with corresponding labels at the top

I'm looking to create a structure like this in HTML: Does anyone know how I can achieve this layout so that the labels are aligned properly with the radio buttons? My main challenge is getting the horizontal labels above each radio button. I would a ...

htmlcssradio-buttonsemantic-ui-react

What are the steps for creating personalized sliders with WordPress?

Seeking guidance on how to code WP Template files to enable control from the WP dashboard for adding or removing slider images. A sample code snippet is provided below. <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indi ...

javascriptphpcssajaxwordpress

Creating a sleek CSS animation for a slot machine effect: Ensuring it stops smoothly and at a specific time limit

I'm working on creating a CSS animation that mimics a slot machine, but I'm struggling to achieve a smooth transition. .scrollable { height: 150px; width: 150px; margin: 0 auto; padding: 0; background: #000; ...

csscss-animationskeyframe

Is there a way to take a snapshot of an HTML Canvas frame and showcase it on a Bootstrap modal?

I have a page where users must grant permission for their webcam or camera. Once granted, a webmoji will move according to the user's face position. Below is a button that will turn blue and become active once a face is detected. When clicked, I want ...

javascripthtmlcsscanvasbootstrap-4

Modify the `div` content based on the selected items from the bootstrap dropdown menu

My navigation bar is built using Bootstrap and contains multiple drop-down items. Now I have another div with the class of col-md-3. Within this div, I would like to display the items of the dropdown menu when hovered over. Currently, hovering over a dro ...

javascriptjqueryhtmlcsstwitter-bootstrap

Material Design Angular2 Toolbar

I am currently working on designing a toolbar using Material and Angular2. My main challenge is formatting the toolbar in such a way that the search bar appears centered in white, while the "Create Project" button and other buttons are aligned to the right ...

htmlcssangularangular-materialangular-material2

Enhance <th> elements using CSS classes

I'm encountering some issues with HTML tables. The layout of my table is as follows: <table class="shop_table cart" cellspacing="0"> <thead> <tr> <th class="product-remove">&nbsp;</th> <th clas ...

htmlcss

Issues with IE6 hover state not properly resetting

Tutorial This particular issue has been isolated in the test case provided above. It is easily noticeable when viewed in IE6. Description of the Issue In Internet Explorer 6, when hovering over the link, all child elements that are supposed to be visibl ...

cssinternet-explorer-6

Ways to adjust the div height to match the span height

.headerDesc { width: 100% + 1px; height: 70px; background-color: #4d2765; margin: 0 -8px; } .headerDesc span { padding: 5px; position: absolute; color: white; font-family: 'Arial', sans-serif; text-al ...

htmlcss

The CSS file is not connecting properly despite being located within the same directory

I have double-checked that both of these files have the correct names and are in the exact same directory. However, for some mysterious reason, the CSS is not applying any styling to my page. I would greatly appreciate any assistance with this issue! Belo ...

htmlcssexpress

Is there a way to create an HTML select element where each option has a unique background color, and will display properly

I want to create multiple HTML select elements with unique background colors for each option: <select runat="server" id="select"> <option value="A">White</option> <option value="B">Red</option> <option value="C">Yellow& ...

javascriptjqueryhtmlcssselect

Resolving Conflicting CSS Styles

It's frustrating to constantly have to ask questions. I've been struggling to implement code on my website, but every time I try to add something new, it just doesn't work. I even tried changing the CSS names, thinking that might solve the i ...

htmlcss

Content and visual side by side

My logo and header image are giving me trouble. Whenever I attempt to center the header image, it keeps moving to the next row. How can I make sure it stays on the same row? Check out our website Thank you ...

htmlcssimagetextalignment

CSS for decorating an image with a border and transparent background

Struggling to add a border while converting a PSD to HTML? Is it possible to apply a border to an image with a transparent background? For instance, let's consider the following image: Imagine wanting to place a border around the caret in the image l ...

htmlcss

What steps can be taken to add a radio button group to a form in order to choose between the smoking and non-smoking sections of a restaurant?

I'm trying to replicate the functionality of radio buttons within a bootstrap form-group, where a line in a form contains multiple buttons ("btn btn-success" for example) that can be selected, but only one at a time. I am aiming for an output like thi ...

javascripthtmlcssbootstrap-4bootstrap-modal

When the direction is set to rtl, special characters that are supposed to be at the

When using the direction property for a label with windows style directory paths containing backslashes, I encountered an issue. The purpose of using direction:rtl; was to display the end part (file names) of the path. However, I found that I am getting th ...

csshtml

Interested in customizing the hover color of the header links in WordPress?

I'm currently working on customizing the hover color of the links in my WordPress header created with Elementor Page Builder. I tried several CSS solutions by inspecting elements and adding them to the custom CSS section in WordPress, but none seemed ...

htmlcsswordpress

Issue with jQuery incorrectly calculating height post-refresh

I am currently utilizing jQuery to vertically center various elements on a webpage. Due to lack of support in older versions of IE, I cannot use the table-cell CSS statement. Therefore, I am using jQuery to calculate half of the height and then position it ...

javascriptjqueryhtmlcssheight

Achieving the desired results through the utilization of CSS3 rather than relying on images

I am currently exploring the use of CSS3 to create a menu instead of relying on images over at . You can view my progress and code (including images and styles) here: Although I attempted to use CSS3 for the border shadow and matching the background of ...

htmlcss