What could be causing SimpLESS to throw a syntax error when encountering a forward-slash symbol in the background shorthand?

Can anyone explain why this specific line (line:2) is causing a syntax error on the SimpLESS compiler? When compiling in-browser using CDNs, there are no issues. However, the same code doesn't seem to work correctly on an iPad for some unknown reasons. To resolve this, I am attempting to compile the code before uploading it for use on iPads.

.box1 {
    background: #000 url("../img/2.jpg") center top / cover;
}

Interestingly, by removing the forward slash, the error disappears, but it also affects the output of the code.

cssless

Answer №1

The inclusion of background-size in the shorthand property for background is a relatively recent enhancement to the syntax of background.

It seems that the SimpLESS CSS parser may not be fully compatible with this updated version of the background syntax. To resolve this issue, try specifying background-size separately and after the background property.

.box1 {
    background: #000 url(../img/2.jpg) center top;
    background-size: cover;
}

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

When hovering over an "li" element, setting the color to "a" will create a dynamic visual effect

On the platform I'm using, users can adjust element settings with CSS. I'm attempting to make the "a" element change color when hovering over the "li" element. However, the color of the "a" element isn't changing as expected. How can I resol ...

htmlcss

the division does not span the entire width

I am faced with a dilemma involving two div elements structured as follows: <div id="left"><p>.....</p><br/> <p>.....</p> </div> <div id="right"><img ..../></div> Accompanied by CSS styling: #l ...

cssxhtmlhtml

Adjust the size of a nested div within a bootstrap container

My dilemma arises when nesting a product slider div inside a bootstrap col-lg-x div, as illustrated below: https://i.sstatic.net/9tCVA.png The issue lies in the layout distortion that occurs within a div.row > div.col-lg-8 structure, where images are ...

htmlcsstwitter-bootstrapmedia-queries

Avoid loading external scripts from third-party sources such as JavaScript libraries, Bing Maps API, and Lighthouse performance tool

Issue: The Bing maps API I incorporated into my assignment is loading unnecessary CSS and scripts, causing a noticeable decrease in my lighthouse scores. Is there a way to prevent third-party code (such as Bing Ads) from loading when fetching the maps for ...

javascriptcssrequestbing-mapslighthouse

JS Plugin Loading Problem

What combination of libraries/frameworks would work best for optimizing performance in an HTML5/CSS3/JS app with moving elements? I have done some research, but I am venturing into unfamiliar territory when it comes to performance. Are there key principles ...

javascriptangularjscsscordovawebgl

Reduce the size of the profile picture in the Facebook like box

I have a Facebook like box on my site but in some resolutions the profile pictures goes to next line after 2 pictures instead of 3 so I want to make the profile pictures width and height 49 instead of 50 because that would fix the problem. Here's how ...

javascripthtmlcssfacebookfacebook-like

Internet Explorer versions 9 and 10 do not support the CSS property "pointer-events: none"

In Firefox, the CSS property pointer-events: none; functions properly. However, it does not work in Internet Explorer 9-10. Are there any alternative approaches to replicate the functionality of this property in IE? Any suggestions? ...

javascripthtmlcssinternet-explorer

Using CSS to automatically convert a table into one column layout with labels from the thead section

Is it possible to automatically create the labels for data when converting a multi-columns table into one column using CSS and taking the information from the thead section? This resource discusses how to convert a multi-column table into a single column ...

htmlcss

Could columns in flexbox be stretched? It's up for debate

When using the "old" flexbox implementation, I would typically employ -webkit-box-align: start; to prevent side by side columns from being the same length. However, I am struggling to achieve the same result with the new specification. More information ca ...

cssflexbox

Display an "add to cart" button and a discount image when hovering over

Currently, I am in the process of developing an Online Shopping website using PHP. To enhance the design of my website, I have implemented bootstrap. One specific query I have is how to display an 'add to cart' button and a discount image when a ...

javascriptphpcss

Creating a sleek and modern design using Bootstrap 3 that maximizes both width and height, featuring a 3

I've hit a roadblock with this basic webpage (I know it's not the most exciting project, but bear with me). I've been using Bootstrap for years, but now my manager wants it to be mobile-friendly. No matter what I try, I can't seem to ge ...

htmlcsstwitter-bootstrap

The usage of the bootstrapTable() function creates a gap below the displayed table information

Currently, I am working on incorporating a table into my webpage that will load data from an API. After some research, I found a Bootstrap table library to assist with this task. However, I have encountered an issue with setting the table height dynamicall ...

javascripthtmlcsstwitter-bootstrapbootstrap-table

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

Ways to display dynamic information in a vertical list using HTML (MEAN stack)

I am receiving an array of data from the backend and looking for a way to display them in a vertical list using HTML. Can anyone help me with this? Below is my current code snippet. TS: this.sub = this.route.params.subscribe(params => { this.http.g ...

htmlcssangular

Placing a static navigation bar at the top of the form

Currently, I am utilizing Bootstrap 4 and have a div set up as a container for three rows. The first and third row are meant to be fixed, while the middle section (content) consists of a large form that should scroll. The goal is to keep the first and thi ...

cssbootstrap-4

Make sure to include the !important declaration when setting the fill property for

When attempting to apply !important to the fill property of an SVG file, I'm encountering issues with the syntax. Despite my efforts, the !important directive is not being correctly applied to the fill property, resulting in the circle element renderi ...

cssreactjssvg

Encountered an issue with CSS rendering for PDF files on Gitbook

I was able to use my CSS to customize the design of my Gitbook website. However, I struggled with implementing CSS for the PDF version. When I applied the same CSS used for the website to the PDF, the results were not consistent. It seemed like the CS ...

htmlcssgitpdfgitbook

Created a CSS sliding menu, but suddenly unable to activate links on it

Recently, I created a slide out menu for the mobile version of my website. The menu is hidden beneath the page and is designed to slide out to the right when the label for a checkbox is clicked. It functions smoothly and is very responsive on mobile devi ...

htmlcsswordpress

CSS animation using a series of linked elements

Is there a way to make my buttons animate sequentially? For example, the second button should start animating only after the first one has finished. Any assistance would be greatly appreciated! a { padding: 6px; display: block; width: 50px ...

htmlcssanimation

Reversing the order of input-group-addon and input in bootstrap on mobile devices

I attempted to adjust the layout of a bootstrap input-group-addon on mobile devices by using two input elements and manipulating their display and visibility properties. From a design standpoint, I achieved the desired result as the input is now positione ...

javascriptjqueryhtmlcsstwitter-bootstrap-3