Encountering a Parse Error with Less CSS triggers an error message for unrecognized input specifically related to background properties

I am struggling to identify the issue with my CSS while using the LESS CSS library.

After running my site with LESS, I encountered an error. However, upon examination, the CSS appears to be valid. Can someone please point out what could be wrong with my CSS or if there are limitations when using LESS?

background: url(css/img/home-bg3.jpg) no-repeat;
    background-clip: ( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
    background: -webkit-linear-gradient( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
    background: -moz-linear-gradient( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
    background: -o-linear-gradient( transparent, transparent ) , url(css/img/home-bg3.jpg) no-repeat;
    background-size: 100% cover;
cssless

Answer №1

It appears that there is an issue with the value you are using for the background-clip property, which is causing the compiler to throw an error.

The valid values for background-clip are limited to border-box, content-box, padding-box, or inherit.

Here is an example of code that compiles without issues:

.sample{
    background: url(css/img/home-bg3.jpg) no-repeat;
    background-clip: content-box;
    background: -webkit-linear-gradient( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
    background: -moz-linear-gradient( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
    background: -o-linear-gradient( transparent, transparent ) , url(css/img/home-bg3.jpg) no-repeat;
    background-size: 100% cover;
}

For more information on background-clip, refer to the MDN Specification.

Additional Note:

The error is likely due to a missing value in this part of your code:

background-clip: ( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
/*--------------^*/

The code below may compile without errors, but it will not have any effect as the value is not supported by the background-clip property according to specifications:

background-clip: linear-gradient( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;

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

The scrollbar on the side of my page seems to be malfunctioning

I'm having an issue with the collapsible sidebar and tabs on my angularjs page. The scroll bar is not appearing when there is overflow in the sidebar. I've tried setting the scrollbar height to auto and overflow-y to scroll, but it's not wor ...

htmlcssangularjs

Creating a card design that responds to user interactions using CSS and HTML

I attempted to create a responsive queue of playing cards that adjusts based on the display width. I want this queue to perfectly fit the display width so that no card is cut off. It should be optimized for phones, tablets, and desktop screens. Additiona ...

htmlcssresponsive-design

Tips for changing the style ID depending on the variable value

Currently, I am exploring the possibility of switching CSS styles using jQuery through a simple if condition. Is there an easy method to switch styles based on IDs? In my case, I have two CSS blocks each with different IDs. Here is an example: <style ...

jquerycss

Tips for employing Flex-grow alongside the behavior of "justify-content: start"

I am working with a flex container setup like this: .container { display: flex; flex-flow: row wrap; justify-content: start; width: 100%; } .item { border: 1px solid red; flex: 1 1 33%; height: 100px; } <div class="container"> <d ...

cssflexbox

What is causing my anchor tags not to reflow properly?

I've been working on my new website and I'm facing a challenge that I just can't seem to solve. Here's the link: When I resize my browser to "mobile width", making it narrower than the row of oval "Tags" below my site menu, I want the ...

htmlcss

Tips for customizing the color of mat-select placeholder text?

I've been attempting to modify the color of a mat-select placeholder. It functions properly when using 'background-color' but not when using 'color'. Below is my CSS code: /deep/ .mat-select-placeholder { color: red; } .mat-s ...

cssangularangular-material-5

Fixing the Jquery animation glitch triggered by mouseover and mouseout

In my project, I have implemented a small mouseover and mouseout functionality. The challenge I am facing is that I need to keep the mouseout function using animate() instead of css() for specific reasons. The issue arises when I quickly do a mouseover fo ...

javascriptjqueryhtmlcssanimation

CSS background: seeking a fresh background for the rest of my pages

When I use CSS background: url(stuffhere.jpeg) for the background, it remains unchanged when clicking on other videos categorized as "projects," not pages. I have attempted using <body id="home"> and <body id="projects">, creating two backgrou ...

cssbackground

Does the CSS overflow property affect the borders of an element?

Consider a situation where a "div" element has a border applied to it. When the overflow rule is set to 'hidden', any content that falls directly on the border will vanish. Is there a solution for this issue? It is crucial in my case to ensure t ...

htmlcss

The Vue design is not being reflected as expected

Encountering a peculiar issue where the style in my Vue component is not being compiled and applied alongside the template and script. Here's the code snippet: To achieve an animated slide fade effect on hidden text upon clicking a button, I've ...

javascriptcssvue.js

Is there a way to circumvent the mouse up event?

I want to create a feature where when a user clicks down, something specific occurs. The sequence of events includes: An action taking place (which is not the focus here). Triggering a mouse up event. Implemented with: angular, html, css. Excludes: jQue ...

javascriptcssangularjshtmlmouseevent

What specific CSS selector should be targeted in order to modify the appearance of this button?

I'm attempting to alter the appearance of a button within my Wordpress site, but I've hit a roadblock in identifying the correct element to modify. So far, I've tried targeting: .input#chained-quiz-action-1, however, the button stubbornly re ...

jqueryhtmlcsswordpress

What is the best way to set up a side-opening feature in the UI design?

I am having trouble with the Amoclan shape transitioning to the next side. I need the transition to occur exactly as specified in the documentation, but for some reason it is still moving on to the next side. <html> <head> <script src=" ...

jquerycsssemantic-ui

Issue with Angular 9 Json pipe not showing decimal values

My JSON data looks like this: this.data = {"eoiStatistics": [ { "dateRange": { "explicitStartDate": "1997-01-01T00:00:00", "explicitEndDate": "2019-07-01T00:00:00" }, "outstandingApplicationCount": 0.0, "pendingApplicationCount": 24.0, " ...

htmlcssangularpipeless

What is the best way to show my results in a single line?

$(document).ready(function() { $("#submitForecast").click(function() { return getForecast(); }); }); function getForecast() { var city = $("#city").val(); var days = $("#days").val(); if (city != '' && days != '' ...

javascripthtmlcssajaxapi

CSS: Struggling to Keep Footer at the Bottom of the Page

I've been struggling to get my footer to stick to the bottom of the page, but I just can't seem to make it work. I've searched online for solutions with no success, so I thought I would ask for help here. http://jsfiddle.net/f54eq3w8/ Here ...

css

Creating multiple versions of a website based on the user's location can be achieved by implementing geotargeting techniques

It may be a bit challenging to convey this idea clearly. I am interested in creating distinct home pages based on the source from which visitors arrive. For instance, if they come from FaceBook, I envision a tailored home page for FaceBook users. If they ...

javascripthtmlcssfacebook

position the table next to the graph

I'm having trouble moving/placing items in HTML. Can we experiment with rearranging the tables as demonstrated at the bottom (expected output)? Is it feasible to achieve a layout like the one below? Shifting the bottom section up next to the plots. ...

htmlcss

Is the spacing of the indicators on the bootstrap carousel uneven?

I'm stuck here and trying to figure out why the distance between the bootstrap carousel indicators is not equal. https://i.sstatic.net/n2MQm.jpg If you look at the image, you can see the uneven spacing between the 1st and 2nd indicators. #carou ...

csstwitter-bootstrap

Using the position property of relative on a DIV element causes a gap to appear between the DIV and the next

Two div elements are placed consecutively. When I move the first div using position: relative and top: -60px, it creates a gap between them. Take a look at this example here: https://codepen.io/dusannis/pen/oNgBpoK If you notice, there is a noticeable ga ...

css