Have an image background with a gradient in css using Angular 6 with the CLI template. In dev mode it works fine, but when I do the prod version (ng build "--prod") the css is getting converted to an invalid syntax.
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;
}
However when it gets minified, the background property is converted to this:
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
When I take out the url, it seems to work find in prod mode (I get background-size and background-position). Its like it’s merging the 3 properties when I have the Url in the background property.
For some reason, if I remove !important in the background property, it seems to fix the issue...
Related
I have a page where i use a background-image in combination with a linear gradient, which works well on every system besides safari on iOS. On iOS it only shows the image but not the gradient.
body{
margin: 0 auto;
padding:0;
position: relative;
background-repeat: repeat-y;
background-blend-mode:multiply;
background: url(../images/struktur2.png),
linear-gradient(
#740100,
#942901 ,
#CE7800 ,
#F89300,
#F8D254,
#FFB860,
#FFE997,
#D2FFFF )
}
Anybody know why this isn't working or if there is a workaround?
In my project I'm using a "ngb-progressbar" element to draw a progress-bar.
To manually set the css for this bar I'm using this piece of code:
::ng-deep div.bg-success.progress-bar{
background: linear-gradient(90deg, rgba(54,166,5,1) 0%, rgb(219, 238, 52) 100%) !important;
background-size: 100% !important;
background-repeat: no-repeat !important;
}
In my TS code I need to set nynamically the value of background-size attribute and to do this I'm looking for a method to access to the element with "::ng-deep".
Removing "::ng-deep" changes have no effect.
Any idea to access my element style via TS code by using ::ng-deep ?
Use the following HTML
<div class="container" [class.someStyle]="yourCondition">
<ngb-progressbar></ngb-progressbar>
</div>
So that you can use the following SCSS
.container {
&.someStyle {
::ng-deep div.bg-success.progress-bar {
// Your new style
}
}
::ng-deep div.bg-success.progress-bar {
background: linear-gradient(90deg, rgba(54,166,5,1) 0%, rgb(219, 238, 52) 100%) !important;
background-size: 100% !important;
background-repeat: no-repeat !important;
}
}
This is the cleanest solution at your disposal. The other solution involves manually changing the HTML with the help of vanillaJS or maybe the Renderer2, which are kind of meh.
I am trying to achieve an effect in which the border of an element would go through every color of the rainbow. I was able to find a solution which works very well on Chrome and on Edge, but doesn't work on Firefox due to the lack of support of the conic-gradient property.
Here is the working example I described:
.rainbow-border {
border: double 7px transparent;
background-image: linear-gradient(LightSteelBlue, LightSteelBlue), conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
background-origin: border-box;
background-clip: content-box, border-box;
}
body {
background-color: LightSlateGrey;
}
#keyframes border-radius-anim {
0% { border-radius: 0px; }
100% { border-radius: 90px; }
}
.main {
width: 80px;
height: 80px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.3);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: border-radius-anim 5s infinite alternate both;
}
<div class="main rainbow-border"></div>
I am working on a project in which different elements have this border, they can have different border width and I should animate it on hover. This solution works perfectly fine for my problem, however not in Firefox and support is required for this browser.
One easy working solution is to replace the conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) by some url(url_to_conic_gradient_image), however I am wondering if a purely CSS solution exists, and if so what it looks like.
Using a JS library as a polyfill
As yunzen pointed out, it exists a polyfill for conic-gradient, it works really well from my tests, and it was able to cover this edge case.
Famous Lea Verou made a polyfill: leaverou.github.io/conic-gradient – yunzen
You will have to include 2 javascript files in your project for it to work. What it will do is look for all the conic-gradient css properties in your document and replace those with
a background-image generated based on the conic-gradient property values. So if your css property is loaded at the same time as the DOM, you can use this library and use conic-gradient as if it was supported by all the browsers.
However, if your css is generated after the DOM has loaded, you will have to use another approach which works by generating an image using the library, and then assign it instead of the conic-gradient css function:
var gradient = new ConicGradient({
stops: "gold 40%, #f06 0", // required
repeating: true, // Default: false
size: 400 // Default: Math.max(innerWidth, innerHeight)
});
console.log(gradient.svg); // SVG markup
console.log(gradient.png); // PNG image (fixed dimensions) as a data URL
console.log(gradient.dataURL); // data URL
console.log(gradient.blobURL); // blog URL
Pure css work-around (linear-gradient fallback)
If you are looking for a css-only approach (the main concern being that this library uses some computational power of the javascript thread to generate the images, which can become a big overheat depending on your use case), I will leave here a solution which proposes a pure-css fallback to the lack of support of conic-gradient, but you will lose the conic gradient effect, which may or may not be suited to your use case:
border: double 4px transparent;
background-image: linear-gradient(white, white), linear-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
background-image: linear-gradient(white, white), conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
background-origin: border-box;
background-clip: content-box, border-box;
The line with the conic-gradient will be ignored in the browser in which it isn't supported, leaving the linear gradient as a fallback. So you will lose the conic effect but have a decent visual fallback.
The advantages of the second solution is to free your Javascript thread from generating images to replace the conic-gradient, and as time goes you won't have to update your code if conic-gradient gets supported.
Is there a way to have an image as background on IONIC4? I can't find anywhere on the documentation and any CSS class I apply doesn't work. There is a host property that always takes over the background.
I tried setting the ion-content to a transparent background by creating a property called "trans" on the theme/variables.scss
.ion-color-trans {
--ion-color-base: transparent;
}
and on the html file I called <ion-content color="trans"> the issue is that the application gets ridiculously slow. There are delays on the taping and the background blinks on page transition.
UPDATE:
After researching like there is no tomorrow I found a way to fix that. On the SCSS file of that specific page/component, add the following line:
:host {
ion-content {
--background: url('../../assets/images/main-bg#2x.png');
}
}
Ionic 4 solution:
Please apply below css to your .scss page for perfect background page:
.page-background-image {
background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(./../assets/images/mybg.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center bottom;
height: 50vh;
}
where 0.5 is opacity in linear-gradient of background.
Ionic 4 solution, shorthand:
:host {
ion-content {
--background: url('../../../assets/imgs/splash.png') no-repeat center center / cover;
}
}
For ionic version 4 it uses so-called Shadow DOM technique which prevents you from doing so,
Run your app and inspect the body or ion-content i mean , you will find some inspected elements wrapped into <shadow-root> which indicates that all of my inside elements are private, The only way to editing them by provided variables, So for your issue try the following:
ion-content {
--ion-background-color: transparent !important;
}
Put this into your components or pages scss.
ion-content{
--background: #fff url('../../assets/images/cover.jpg') no-repeat center center / cover;
}
I am using background: url('../img/icon_drop.svg') no-repeat 25px 30px / 17px; in one of my websites and it works very well in all browsers. Except Safari, unfortunately in Safari so written css is not recognised. I've already tried to find compatibility but i could not find any. Does anyone know is this supported by Safari?
Update your code like below.
body{
background: url('http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg') no-repeat 25px 30px;
background-size:17px;
}
DEMO
As far as I know, Safari doesn't understand the background size, so you have to do something like:
background: url('../img/icon_drop.svg') no-repeat;
background-size: 25px 30px / 17px