Minify your Angular code and include background images through URLs specifically for production mode

Trying to create a gradient image background in CSS using Angular 6 with the CLI template. Everything looks great in dev mode, but when I switch to the production version (ng build "--prod"), the CSS code becomes invalid.

Here is the SCSS file:

.home-content {
  .mountain-header {
    margin: 0 auto;
    color: #fff;
    padding: 30px 10px;
    min-height: 110px;
    background: linear-gradient(180deg, rgba(0, 174, 199, .8) 0%, rgba(35,97,146,.8) 100%), url("https://cdnsite/background2.jpg") no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
}

But after minification, the background property changes to:

background: linear-gradient(180deg,rgba(0,174,199,.8) 0,rgba(35,97,146,.8) 100%) center!important/cover!important,url(https://cdnsite/background2.jpg) center!important/cover!important no-repeat!important!important!important

If I remove the URL from the background property, everything works fine in production mode (I see the correct background-size and background-position). It seems like the properties are getting merged when the URL is included in the background property.

cssangularangular-cli-v6

Answer №1

After making the background property adjustment, the issue appears to be resolved without using !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

Adjusting the Size of Slideshow Pictures in a JavaScript Array to Match the Viewport

Welcome to my first post! Please excuse any formatting issues. I am currently working on a project where I am trying to create a slideshow using Javascript. I have successfully added images into an array and have the slideshow up and running. However, I ...

javascripthtmlcss

firefox is experiencing lag issues with react-spring and framer-motion

Encountering an issue with two animation libraries, react-spring and framer-motion. Attempting to create a basic animation that triggers upon the component's initial visibility (simplified version). <motion.div initial={{x: -25, opacity: 0}} anima ...

cssreactjsanimationreact-springframer-motion

Error message: "An undefined core module service in Angular 5 feature module"

Currently, I am adhering to the style guide within an Angular 5 project and tackling the challenging task of implementing the core/shared modules. Specifically, I aim to have my Core Module provide a singleton service that will be utilized throughout my en ...

angularsingletonangular2-styleguide

Is there a way to ensure that the JSON data and the image appear on the same row with some spacing between them?

Trying to display JSON data with images and text side by side but facing issues where the text wraps below the image instead. How can I fix this layout to show text next to the image? Flex-wrap property doesn't seem to work as expected. function for ...

htmlcss

The element is not occupying the full width within the div container

I'm working with a div that contains some elements. My goal is to have these elements span the entire width of the container div. .container { height: 100px; width: 100px; display: flex; flex-direction: column; overflow: scroll; borde ...

htmlcss

Adjustable div element and percentage-based height are not functioning correctly

I am facing a minor issue while attempting to create a responsive div with an image background. The div does not match the size of the image: 540px-290px When I resize the browser, the two divs do not resize together. In each div, there is a background ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best method to integrate NestJS into an existing Angular project without having separate node_modules folders?

Currently, I have an Angular project that is successfully retrieving data from Google Firestore. Everything is running smoothly. Now, I am looking to make the transition from Firestore to my own MySQL database, utilizing NestJS and TypeORM. After creating ...

angularnestjs

Chrome failing to import images, but Firefox has no issues with image importing

I'm not very familiar with JavaScript or jQuery, but I was attempting to troubleshoot a functionality that was previously created. The issue is that it works fine on Firefox, but it fails on Chrome. I am importing an image and then cropping the necess ...

javascripthtmlcsscanvas

Creating a receipt program in Python and protecting previous data from being overwritten

I am currently learning Python and attempting to create a program that generates an invoice listing all items, along with their prices and quantities. Each item should be displayed on a separate line. While I have managed to print each item in a line, I a ...

pythoncsspython-3.xwhile-loop

Is it possible to utilize CSS to generate a full-width slider while maintaining the aspect ratio of the content?

I am currently utilizing the unslider plugin to design a full-width slider header on a webpage (). Although it functions well at the dimensions I set it up for (1920x450), issues arise when viewed on different screen resolutions. See below: The background ...

jquerycssunslider

Is there a way to determine if an npm package is compatible with a specific version of Angular

As I work on my project, I realize that I have many dependencies on libraries that support Angular2 but not Angular6. It can be challenging to determine if a library supports Angular2 from just reading their GitHub pages. One idea is to check the package ...

angulartypescript

Using TypeScript to pass the text field ID to a function for clearing the text field with a button

I am looking for a way to improve the functionality of my web page featuring several buttons that will clear different text boxes on the same line. Currently, I am using separate functions for each button, but my goal is to streamline this process by utili ...

angulartypescript

Complete guide on modifying CSS with Selenium (Includes downloadable Source Code)

I am looking to switch the css styling of a website using Python and Selenium. My initial step was to retrieve the current CSS value. Now, I aim to alter this css value. The Python code output is as follows: 0px 0px 0px 270px How can I change it from 0 ...

javascriptpythonhtmlcssselenium

I am unable to line up every item next to one another

Regarding the topic at hand, I am facing an issue with aligning multiple objects that should be enclosed in i tags side by side. Despite attempting to use li tags and float:left and right in CSS, the position remains unchanged. Can anyone provide guidanc ...

cssbootstrap-4

Why does the content spill out of the div when I add padding?

Can someone help me understand why when I add padding to the "header div," the content overflows the div? For instance, if I set it to 60%, instead of limiting to within the div, it takes up 60% of the entire page. I thought that % would be applied based o ...

htmlcssflexboxgrid

Please come back after signing up. The type 'Subscription' is lacking the specified attributes

Requesting response data from an Angular service: books: BookModel[] = []; constructor(private bookService: BookService) { } ngOnInit() { this.books = this.fetchBooks(); } fetchBooks(): BookModel[] { return this.bookService.getByCategoryId(1).s ...

angulartypescriptangular6angular7

Establishing API cookies in a Single Page Application

Scenario In the development of my single-page application (SPA), I have separated the frontend and backend components onto different domains: mywebsite.com myapi.com For simplicity, I am utilizing cookies for authentication. Upon signing in, the server ...

angularhttpasp.net-corecookiessingle-page-application

Getting the Value of a CSS Class through Form Name in Angular

I am attempting to retrieve the class name of a form control using the Form Name both in HTML and in the Class file The code snippet below functions correctly and shows the value of the control {{ModelForm.value.firstName| json}} However, when I try to d ...

angular

Verify whether the user is authenticated in Angular 2

For the past couple of days, I've been struggling with figuring out how to determine if a user is authenticated in my Angular-rc1 application and could really use some assistance or guidance. After receiving a token from the server, I want to save it ...

angular

CSS styles are not being displayed on elements that have been dynamically added using jQuery

I have searched through similar questions, but none of them addressed my issue. (they all seemed to be related to typos) This is just for fun. I am trying to create a table using jQuery based on JSON data. The problem is that the appended table rows do no ...

jqueryhtmlcss