I'm trying to set background-image to my specific Angular component using code below:
body {
background-image: url(...);
background-size: cover;
background-repeat: no-repeat; }
This piece of code is placed in .css file which belongs to Angular component.
However, in browser console I have noticed that _reboot.scss class (which probably comes from Bootstrap) is overwriting my above code snippet to default background-color.
I have already tried almost all of things and the only way to change background-image is to modify _reboot.scss class in browser using F12 mode.
you can set your code to:
._reboot.scss {
background-image: url(...);
background-size: cover;
background-repeat: no-repeat; }
to override Bootstrap.
or, give !important to your css :
body {
background-image: url(...)!important;
background-size: cover;
background-repeat: no-repeat; }
Related
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.
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;
}
So I'm working on my new rails app, and within one of my stylesheets I have the pg-parlex class which specifies a background-image link:
.bg-parlex {
padding-top: 0px;
background-image: url('assets/banner-bg.gif'); /* << THIS URL LINK! */
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
Could someone just quickly explain how we link to the assets/images folder an items within...I was sure it was assets/item1.png or assets/item2.png, but perhaps as the link is inside a stylesheet maybe this is wrong...?
You can use:
background-image: image-url("rails.png")
#=> background-image: url(/assets/rails.png)
If you are using sass-rails gem:
background-image: asset-url("rails.png", image)
#=> background-image: url(/assets/rails.png)
So, your code would be:
.bg-parlex {
...
background-image: asset-url("banner-bg.gif", image);
...
}
body {
background-position: right;
color: #FF7F27;
background-color: transparent;
background-image url('../cityage_background3.png');
background-size: 1386px 861px;
background-repeat: no-repeat;
background-attachment: fixed;
}
The link is just n example. i know the real link works because it show up in cchrome and firefox. Why isnt the background image showing up in internet explorer.
Your error is here:
background-image url('../cityage_background3.png');
It should be:
background-image: url('../cityage_background3.png');
You were missing :
Edit* IE does not like errors.
you forget your : between background-image and url
if it doesn't work, it's because your path is not correct. Make sure your image is in the right place.
In my server logs, I get many errors such as this:
File does not exist: /my/path/-moz-linear-gradient(top,white,
This is apparently due to the following piece of Bootstrap CSS, where some browsers must interpret -moz-linear-gradient as a background image to be downloaded:
.btn{
/* some code... */
background-color: whiteSmoke;
background-image: -webkit-gradient(linear,0 0,0 100%,from(white),to(#E6E6E6));
background-image: -webkit-linear-gradient(top,white,#E6E6E6);
background-image: -o-linear-gradient(top,white,#E6E6E6);
background-image: linear-gradient(to bottom,white,#E6E6E6);
background-image: -moz-linear-gradient(top,white,#E6E6E6);
background-repeat: repeat-x;
/* more code...*/
}
How can I prevent such errors from happening?
Thank you!
You should use background: instead of background-image: because with background-image you need to set the path of the image and you are not using an image.. but a gradient as background.
This is a Tool that you can use http://www.colorzilla.com/gradient-editor/ to make the gradient and copy the code if you want, all to make it easier and fault free.
Update after all the comments:
You could use a fallback image of the gradient. Like here:
/* fallback image */
background-image: url(images/fallback-gradient.png);
And that should fix your problem to.