How to set image in page background in ionic 4?

Ionic Framework
1

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

2

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;
}
3

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 | }
4

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.

5 Likes
5

thank you, working perfect :slight_smile:

1 Like
6

Sir but then the contents are not visible properly.

Untitled
Untitled1088×527 212 KB

also the image is not uploading its full contnet.

7

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

8

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
9

It could be set to top with:

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

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