Reputation: 2107
How do you set a background image in Ionic 4? I've tried several ways to no avail.
I'm following this tutorial: https://javebratt.com/ionic-firebase-tutorial-auth/
I've also tried
--background: #fff url('../../assets/images/cover.jpg') no-repeat center center / cover; }
Any help would be greatly appreciated. I'm using Ionic 4
ion-content {
.background{
background-image: url('../../../assets/img/login-image.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
form {
margin-bottom: 32px;
button {
margin-top: 20px !important;
}
}
p {
font-size: 0.8em;
color: #d2d2d2;
}
ion-label {
margin-left: 5px;
}
ion-input {
padding: 5px;
}
.invalid {
border-bottom: 1px solid #ff6153;
}
.error-message {
min-height: 2.2rem;
ion-label {
margin: 2px 0;
}
}
}
<ion-content class="background">
<form [formGroup]="loginForm">
<ion-item>
<ion-label position="stacked">Email</ion-label>
<ion-input
formControlName="email"
type="email"
placeholder="Your email address"
[class.invalid]="!loginForm.controls['email'].valid &&
loginForm.controls['email'].touched"
>
</ion-input>
</ion-item>
<ion-item
class="error-message"
*ngIf="!loginForm.controls['email'].valid &&
loginForm.controls['email'].touched"
>
<ion-label>Please enter a valid email address.</ion-label>
</ion-item>
<ion-item>
<ion-label position="stacked">Password</ion-label>
<ion-input
formControlName="password"
type="password"
placeholder="Your password"
[class.invalid]="!loginForm.controls['password'].valid&& loginForm.controls['password'].touched"
>
</ion-input>
</ion-item>
<ion-item
class="error-message"
*ngIf="!loginForm.controls['password'].valid
&& loginForm.controls['password'].touched"
>
<ion-label>Your password needs more than 6 characters.</ion-label>
</ion-item>
<ion-button (click)="loginUser(loginForm)" expand="block" [disabled]="!loginForm.valid">
Log In
</ion-button>
</form>
<ion-button expand="block" fill="clear" routerLink="/signup">
Create a new account
</ion-button>
<ion-button expand="block" fill="clear" routerLink="/reset-password">
I forgot my password 🙁
</ion-button>
<ion-footer no-shadow>
<div>
<button ion-button icon-left block>
Login with Google
</button>
</div>
<div>
<button ion-button icon-left block>
Login with Facebook
</button>
</div>
</ion-footer>
</ion-content>
Upvotes: 1
Views: 20455
Reputation: 21
Let's try these steps and see how it goes:
You can select ion-content directly in your CSS instead of creating another CSS class. I am assuming you need a background image for a page. So grab the whole page by ion-content element. Then use usual CSS properties for an element background. But when using Ionic make sure relative paths are incorrect form. For example I think your assets(image) path is not right. That's why ionic is not able to render/find it on device. The code snippet I am giving below is working for me.
page-details {
ion-content {
--background: none;
background-image: url("assets/imgs/img_bg_floral.png");
-webkit-background-image: url("../../assets/imgs/img_bg_floral.png");
background-repeat: no-repeat;
background-size: cover;
}
Upvotes: 0
Reputation: 1
I have tested in android. Its working fine for me.
SCSS:
ion-content {
--background: #34B0D2 url('../../assets/yourimage.jpeg') no-repeat center top fixed;
background-size: cover;
}
Upvotes: 0
Reputation: 204
This worked in browser and real device both:
--background: url('/assets/recover_form_bg.jpg') no-repeat center/cover fixed;
Don't use ../../../assets path for image because it's not work in real device.
Upvotes: 6
Reputation: 859
If you need more control, set the css variable --background to none first, then specify the usual css properties:
ion-content {
--background: none;
background-image: url('../../../assets/img/login-image.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
Upvotes: 10
Reputation: 2107
This worked
ion-content {
--background: #fff url("../../../assets/img/login-image.jpg") no-repeat center center / cover;
}
Upvotes: 1