How to set image in page background in ionic 4?

Hello, I want set background image in my page, anyone know how to do?
Please help if possible…!

You can set that using the CSS in the global.scss file. Here is a sample

ion-content {
    --background: #fff url("assets/bg.jpg") no-repeat center center / cover;
}

this way we can set for all pages, but i want show background image in only login page and when i put this code in login scss coming error…
Error:

client:162 [WDS] Errors while compiling. Reload prevented.
errors @ client:162
onmessage @ socket.js:41
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
wrapFn @ zone.js:1332
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
client:168 ./src/app/login/login.page.scss
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: E:\project\ZoroAndroid\src\app\login\login.page.scss:26:16: Can't resolve 'assets/imgs/login-bg.png' in 'E:\project\ZoroAndroid\src\app\login'

  24 | 
  25 | ion-content {
> 26 |     --background: #fff url("assets/imgs/login-bg.png") no-repeat center center / cover;
     |                ^
  27 | }

When setting a background image at the individual page level, you will need to adjust the image path. For example:

ion-content {
    --background: #ccc url("../../assets/bg.jpg") no-repeat center center / cover;
}

I suspect that is the issue.

4 Likes

thank you, working perfect :slight_smile:

1 Like

Sir but then the contents are not visible properly.


also the image is not uploading its full contnet.

Depending on the design of your image, you may need to change the CSS properties as how the image will size and position itself.

The best way is use tilde(~) operator before assets url.

ion-content {
   --background: #fff url("~/assets/img/bg.jpg") no-repeat center center / cover;
}

Or just

ion-content {
   --background: #fff url("/assets/img/bg.jpg") no-repeat center center / cover;
}
1 Like

It could be set to top with:

--background: #ccc url("../../assets/bg.jpg") no-repeat top center / cover;

Sir, i tried the way you told, but my content is not much visible in image.