Chrome has confirmed that the use of multiple-backgrounds in css is not supported

I am attempting to apply multiple CSS backgrounds and I encountered an issue in Chrome where it is flagging this style as having an invalid property value.

In the developer tools, there is a yellow exclamation mark icon and a strike-through on this particular style:

Below is the code for the style:

.illyBody{
    background:transparent url(night_body.png) bottom left repeat-x, #27235b url(night_stars.png) 16px left repeat-x !important;
    background:transparent url(night_body.svg) bottom left repeat-x, rgb(39, 35, 91) url(night_stars.svg) 16px left repeat-x !important;
}

Can you identify what is causing this to be invalid?

cssgoogle-chrome

Answer №1

Two issues are present in the current situation. The background specification states:

[ <bg-layer> , ]* <final-bg-layer>

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> 
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

It's important to note that only <final-bg-layer> includes <'background-color'>. Therefore, the first background property cannot have a color, such as 'transparent', like yours does.

Furthermore, when discussing background position, it is mentioned:

A pair of keywords can be rearranged, but a combination of keyword and length or percentage cannot be. For example, 'center left' is valid while '50% left' is not.

Your usage of 16px left is incorrect according to this guideline. To address both issues, your CSS should be adjusted as follows:

.illyBody{
    background: url(night_body.png) bottom left repeat-x, #27235b url(night_stars.png) left 16px repeat-x !important;
    background: url(night_body.svg) bottom left repeat-x, rgb(39, 35, 91) url(night_stars.svg) left 16px repeat-x !important;
}

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

Discovering the offset location using touchmove

Struggling with a code for dragging/moving an element via touchscreen. The code is functional, but encounters a common issue - unable to drag from the touchpoint itself. Every movement initiates from the edge of the element, no matter where the touch begin ...

javascriptcssoffsettouchmove

What are the steps to turn off the blue hyperlinks on iOS devices?

One example of this issue can be observed in time-formatted text like (00:10 - 10:55) and a time select menu displaying (08:00 AM). I have attempted the following solutions, but none of them have resolved the problem: Mobile Safari/iPhone Mail.app HTML ...

javascriptiosiphonecssjquery-mobile

Showcasing two columns side by side in the first row and one column beneath them in the second row within a single tr

Here is the code snippet I created: <table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td& ...

javascriptjqueryhtmlcss

Angular 6 and Bootstrap 4 Collaborate for a Dynamic Multi-Level NavBar

(UPDATE: Issue Resolved - I discovered that I needed to include the JavaScript within $(document).ready(function()), which was previously missing. The example below worked perfectly for me.) I am attempting to implement a Multi-Level Navbar with Angular 6 ...

cssangularbootstrap-4navbar

Tips for locating the :before element's position with Javascript

I am currently working on an animation where I need to change the color of an element in the center once a small circle touches it. Despite trying to use the position() method, it does not work as intended because I am using a :before for animating the div ...

javascriptjqueryhtmlcss

Two interdependent select fields

I am currently working on creating two select fields where, upon selecting an option in the first field, some options in the second field should be hidden. I have almost achieved this, but my script is unable to locate certain options in the first select f ...

javascriptjqueryhtmlcssselect

Should we experiment with CSS for IE: To hack or not to hack?

I am excited about trying out some eye-catching experimental CSS features like border-radius (rounded corners) and gradients to enhance the look of my webpage. However, it's disappointing that Internet Explorer does not yet support these features. Alt ...

cssinternet-explorer

Tips for optimizing the display of a website on mobile devices

I'm facing an issue with the layout of a table and an image on mobile devices. On PC, they display correctly side by side but on mobile, the image overlaps the table or remains next to it. I built the table using Bootstrap 4 as a requirement. I attemp ...

htmlcssbootstrap-4

Is there a way to postpone CSS animations? I attempted using animation-delay but it wasn't successful

Is there a way to make my CSS slides appear one after the other? I have created an animation but no matter how much I adjust the animation-delay parameter, it doesn't seem to work. I need the second slide to show up 30 seconds after the first one. .s ...

javascriptjqueryhtmlcssanimation

Transform the X-th image using CSS nth transformation

I am currently working on developing a small game that involves using point icons, with some of them being overlaid on top of each other. My current approach is the following: .wormicon:nth-child(2) { transform: translateX(-50%); } .wormicon:nth-child ...

htmlcss

prettyPhoto popup exceeds maximum width and height limitations

I am currently using the most up-to-date version from No Margin for Errors and I have set allow_resize to true. However, the size of the display is still too large. Is there a way to set a maximum width/height? I have already configured the viewport as fo ...

javascriptjqueryhtmlcssprettyphoto

When resizing my web page, the content overlaps and the images become distorted

Although the page appears fine in normal view mode, an issue arises when the page size is reduced - the image within the body tag vanishes. Multiple attempts have been made to rectify this problem by altering the code, but unfortunately, none have proven s ...

htmlcss

What steps can I take to improve the alignment of my portfolio website?

I recently started learning HTML and CSS and am currently working on creating my very first portfolio website. While I've made some progress, I'm facing a few challenges and could use some guidance. My main goal is to have a fixed navigation bar ...

htmlcss

Aligning Content in the Middle of a Bootstrap Column

Can anyone help me with centering the content of a bootstrap column vertically? I'm facing an issue when setting width: 100% and height: 100% for the overlay div. Any solutions? Here is an example image of what I am trying to achieve: https://i.ssta ...

javascriptjqueryhtmlcsstwitter-bootstrap

Incorporating search suggestions into a div with vue 3 and boostrap: a step-by

I am currently experimenting with building a compact search box that offers suggestions using the vue 3 boostrap library. I am aiming to have the suggestions box float on top of the following div without pushing it down. Despite trying to manipulate the z- ...

cssvuejs3bootstrap-5bootstrap-vue

how to target the last child element using CSS commands

<a><div class="myDiv"></div></a> <a><div class="myDiv"></div></a> <a><div class="myDiv"></div></a> <a><div class="myDiv"></div></a> // This specific one is what ...

htmlcss

Button not displaying box-shadow or drop-shadow effects

Why isn't the filter and box-shadow working on the button? What could be causing this issue and how can it be resolved? .desktop-modal-close-btn { position: absolute; top: 1.5rem; right: 1.5rem; height: 2.8rem; width: 2.8rem; ...

htmlcss

Creating unique CSS styles for SVG <use> elements in various situations

Is there a way to style a <use> element based on its parent class that will work consistently across different browsers? CSS Code Example .column-1 { .cls-1 { fill: red; } .cls-2 { fill: green; } } .column-2 { .cls-1 { fill: ...

htmlcsssvg

Issue with Firefox hover effect not applying transform:scale

I'm experiencing some difficulties with the border colors when using transform:scale on my element. I want to find out if there is a known solution to this issue. Removing the scale animation resolves the problem and the borders return to normal. I ha ...

htmlcssfirefox

Utilize page variables to activate audio clips upon clicking

Can someone assist me with a script that activates an audio clip when five icons on a page are clicked? The image of the icons can be found below: https://i.stack.imgur.com/mBC6o.png Here is the HTML code: <div class="slide overlay-container" id="int ...

jquerycsshtml5-audio