Applying a dual background effect with one background repeating from the center using CSS3

I am trying to achieve a unique effect with CSS3 backgrounds. I want the second background image to start repeating from the middle of the screen down, rather than from the top.

Below is my CSS code:

body {
  background: url('../img/carbon_fibre.png'), url('../img/carbon_fibre_blue.png');
  background-repeat: repeat, repeat;
  background-position: center left, left top;
}

If anyone has any suggestions on how to resolve this issue, it would be greatly appreciated!

Thanks in advance, Christian

htmlcss

Answer №1

You won't be able to achieve this using just 2 backgrounds, as pointed out by @Aliassse.

To create that effect, you'll need to utilize a pseudo element.

Here's the CSS code:

body {
  background: url(http://placekitten.com/50/50);
  background-repeat: repeat;
  background-position: left top;
    position: relative;
    height: 100%;
}

body:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0px;
    right: 0px;
    bottom: 0px;
  background: url(http://placekitten.com/40/40);
  background-repeat: repeat;
  background-position: left top;
}

Check out the fiddle here

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

Executing JavaScript Code Through Links Created Dynamically

I am currently developing a website with a blog-style layout that retrieves information from a database to generate each post dynamically. After all posts are created, the header of each post will trigger an overlaid div displaying the full article for tha ...

javascriptphpjqueryhtmlcss

Step-by-step guide on implementing a fade effect to a specific JavaScript element ID

When I click a button, the image on the screen disappears. I am looking to add a fade effect to this action. Can someone help me achieve this using CSS? #hide{-webkit-transition: all 1s ease-in-out;} For reference, here is a demo showcasing the current b ...

javascriptcsscss-transitionsfadeout

Adjust the position of elements based on their individual size and current position

I am faced with a challenge regarding an element inside a DIV. Here is the current setup... <div id="parent"> <div id="child"></div> </div> Typically, in order to center the child within the parent while dynamically changing i ...

javascriptjqueryhtmlcss

Side-menu elevates slider

Struggling to keep my slider fixed when the side-menu slides in from the left? I've scoured for solutions without luck. Any expert out there willing to lend a hand? Code Snippet: https://jsfiddle.net/nekgunru/2/ ...

javascriptcsssliderposition

Creating a vertical scrollbar with CSS flexbox for columns set at 100% height in a row for FF, IE, and

I am currently working on an HTML application that needs to fit perfectly within a designated space without causing any page level scrollbars. I have utilized flexbox styles extensively to achieve this, but unfortunately, I am facing compatibility issues w ...

htmlcssflexbox

Combining both inline and block positioning for div content

My goal with applying CSS styles is to create a visually appealing composition of content: https://i.sstatic.net/CpVXb.png After applying my styles, I received the following result: https://i.sstatic.net/Bfh5q.jpg li { position: relative; list-styl ...

htmlcsscss-positioncss-content

The incessant ascent of the div to the page's peak leaves me perplexed as to the cause

While trying to set up my website template from , I noticed that the main div, which includes circles and a call to action at the bottom, keeps aligning with the top of the page and under the navigation bar. Any ideas on what could be causing this issue? ...

html

Load the data from amp-list after triggering an event

I am currently exploring ways to load data on my second amp-list only after the first one has a selected value. Additionally, I am struggling to display a placeholder for the second amp-list. <div class="row"> <div class="col-sm-4 position-in ...

htmlamp-html

Creating a cascading layout with React Material-UI GridList

Can the React Material-UI library's GridList component be used in a layout similar to Pinterest's cascading style? I have utilized Material-UI Card components as children for the GridList: const cards = props.items.map((item) => <Card ...

javascriptcssreactjsmaterial-ui

Variations in the implementation of responsive web design on laptops versus mobile devices

Looking at the css code below: @media only screen and (min-width: 0px) and (max-width: 768px) { ... } I'm curious about why, on my laptop, when I resize the browser window to exactly 768px, the css properties inside this media query are applied. ...

androidhtmlcss

Integrate a button following the first paragraph exclusively when there are two or more paragraphs present

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> jQuery(document).ready(function($) { if ( $('p').length < 1 ) { $('p:last-child').after('<div id="toggle" class="btn"> ...

javascriptjqueryhtml

Ensuring WCAG Accessibility Compliance - mandate the inclusion of at least one input in a fieldset

I'm working on a form where users need to provide at least one contact method from a group of fields, such as home, work, or mobile phone number. How can I ensure this meets the latest WCAG 2.2 standards? <!-- Other fields above and below --> ...

htmlaccessibilitywcag2.0

Using a .NET Web-API controller variable as a parameter in a JavaScript function

I am looking to send a "variable" from the controller to a JavaScript function. The code I have implemented is as below: <div ng-controller="faqController"> <div ng-repeat="c in categories"> <h2 onclick="toggle_visibility(&apos ...

javascripthtml.netangularjsasp.net-web-api

Instructions for making a vertical line using HTML

Currently, I am working on a design for a card that is similar to this one. What I'm trying to figure out is how to add a vertical line right underneath the circle just like in the image. ...

htmlcssbootstrap-4

The validation of radio input signals results in an error being returned

For a while now, I've been trying to solve the issue with radio button validation in my current project. Surprisingly, it works fine when there are no other functions in the form besides the radio buttons themselves. I suspect that the problem lies wi ...

javascripthtmlvalidation

Altering the color of a div based on a specified value condition

I am in need of assistance with a div structure similar to this: <div id="namacoc" tabindex="1" class="filled-text" placeholder="Input your name" contenteditable ></div> <div id="position" tabindex="1" class="filled-text" placeholder="Input ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to adjust the size of a table display to ensure that both vertical and horizontal scroll bars are constantly visible?

[edits added below per the request to see code. Edits also added to the original post to clarify the ask - marked in bold] My application features a broad table with the potential for many rows, generated by django-tables2 using the bootstrap5-responsive ...

htmlcssbootstrap-5css-tablesdjango-tables2

Ways to navigate by percentage in react

I'm working on a flexbox that scrolls horizontally with boxes set to 25% width. Currently, I have it scrolling by 420px which is causing responsive issues. Is there a way to implement the scroll using percentages instead of fixed pixel values in React ...

javascripthtmlreactjsreact-nativescroll

Split a column into two at the md breakpoint with Bootstrap

I am looking to rearrange the cards in a specific order on breakpoint -md. Please refer to the image below for reference. https://i.sstatic.net/UXABN.png The goal is clarified in the image above. I would prefer if this can be achieved using bootstrap and ...

htmlcssbreakpointsbootstrap-5card

"X-Requested-With" header not being included in XMLHttpRequest request

After successfully using jQuery.ajax() to make an ajax call to an MVC action, I decided to switch to using the XMLHttpRequest along with the HTML5 File API due to some forms containing file controls. However, since making this change, the MVC action no lon ...

javascriptjqueryajaxhtml