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;
}
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.
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...
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; }
I'm pulling my hair out on this and I've been going over the CSS for the last few hours. I can not figure out how to get the background color on the slider at the top of this website to have the same transparent effect that I have on all the other parts of the page. Any help from someone smarter than me would be greatly appreciated. Here is the page:
http://rattletree.com/wordpress2/
I have put this CSS in just about every div that I can tell is associated with the slider and still no luck. Any help would be greatly appreciated.
Here's what I have tried so far:
.et_pb_fullwidth_code.et_pb_module{
background:transparent!important;
background: rgba(0,90,100,0.4)!important;
}
.recent-post-slider.design-4 .post-image-bg{
background:transparent!important;
background: rgba(0,90,100,0.4)!important;
}
.slick-slider{
background:transparent!important;
background-color: rgba(0,90,100,0.4)!important
}
.et_pb_section_0{
background:transparent!important;
background-color: rgba(0,90,100,0.4)!important
}
I check you code and find some answers to your problem.
1) You set the background color to several elements so it overlap and finish with full opacity. So first thing keep only one background-color
2) The background-image is not the background of all the article but only the content, So we need fix that too.
this code may fix your problem :
/* FIX BACKGROUNDS */
.et_pb_fullwidth_code.et_pb_module{
background:transparent!important;
background: rgba(0,90,100,0.4)!important;
}
/* FIX BACKGROUND_IMAGE */
.et_parallax_bg et_pb_parallax_css {
background-image: none;
}
.et_pb_section.et_pb_section_parallax.et_pb_section_1.et_pb_with_background.et_section_regular {
background-color: transparent;
}
article#post-37 {
background-image: url(http://rattletree.com/wordpress2/wp-content/uploads/2015/09/91815-JoelLavioletteandRattletree-Rattletree-027.jpg);
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
background-attachement: fixed;
}
Have a nice day, you should really use IDs in your html.
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.