I am trying to set an image as the background for ion-content element, but always got on error:
./src/pages/public/home/home.style.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/pages/public/home/home.style.css)
Error: Can't resolve '/assets/images/logo.png' in 'd:\CityInfo\development\mobileUI\src\pages\public\home'
My css class:
ion-content
{
--background: none;
background-image: url("/assets/images/logo.png");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;;
}
Yes, you can play with the path and the dots, my guess is this one, because the assets folder is nested three folders behind, I guess:
background-image: url("../../../assets/images/logo.png");
Related
i have tried in global.scss as
ion-content{
background-image: url('assets/images/cover.jpg');
-webkit-background-image: url('assets/images/cover.jpg');
background-repeat: no-repeat;
background-size:cover;
}
but this does not render the image. tried path as ./assets/images/cover.jpg as well.
if i put the same image as img tag on the page that shows up ruling out invalid image possibility.
I also tried to put in the homeage.scss as
.myview {
background-image: url('../../assets/images/cover.jpg');
background-repeat: no-repeat;
background-size:cover;
}
and using class="myview" in home.html no luck
You can use the CSS-Variable --background to change the background of ion-content.
Example:
ion-content{
--background: #fff url('../../assets/images/cover.jpg') no-repeat center center / cover;
}
Put this into your components, pages or global scss.
For reference see: https://beta.ionicframework.com/docs/api/content#css-custom-properties
I solved the problem doing the following:
ion-content {
--background: none;
background-image: url('/assets/imgs/page_bg.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}
This will disabled background and then set the correct one.
I have encountered the similar situation, having ionic background css property leads to flickering issues on IOS
try the following if you have encountered flickering issue
:host {
ion-content {
--background:none;
background:url(''../../assets/images/cover.jpg');
background-size: cover;
background-position: center center;
}
}
for anyone having keyboard issues (background resizes on keyboard show) install Keyboard plugin
https://ionicframework.com/docs/native/keyboard/
and add the following code on your config.json
<preference name="keyboardResize" value="false" />
<preference name="keyboardResizeMode" value="native" />
Note: this may hide item beneath the keyboard when its shown (I have tested only on iOS)
I tried answer from #rchau, but it did not work in my case. Instead, I put this code in my project and it has done the right thing:
ion-content{
--background:url('../../assets/images/cover.jpg') 0 0/100% 100% no-repeat;
}
This is the working solution for me.
global.scss
ion-content {
--background: url('../assets/img/background/background.png') no-repeat 100% 100%;
}
I have images stored in images folder inside assets folder
app
-app.component.css
assets
-images
-some-image.png
I'm trying to get the image in css inside background-image, but I think I have path related issues, since I can't seem to bring the image.
background-image: url(../../../assets/images/some-image.png) no-repeat center top;
Help would be appreciated.
Try adding the style as following with a width and height. Also, isolate the background-repeat and background-position. It'd work.
background-image: url(../assets/images/some-image.png);
background-repeat: no-repeat;
background-position: center-top;
width: 100%; // any width
height: 230px; // any height
To make it look better you can add,
background-size: contain;
UPDATE:
The reason that the image doesn't show up without width and height,
As default div is given a height of 0 since there are no inner elements.
But, it has a default width of 100% already.
Therefore, when we add an image using CSS background image property, we've to add the height attribute.
It should be just,
background-image: url(../assets/images/some-image.png) no-repeat center top;
I just this should work just fine
background-image: url("../src/assets/images/some-image.png");
Relative paths (in general) in CSS and HTML
CSS
background-image: url(/assets/images/some-image.png) no-repeat center top;
HTML:
<img src="assets/images/some-image.png">
you could not set no-repeat to background-image
It should be like code below:
background: url(../assets/images/some-image.png) no-repeat center top;
I have to set background image for my home page and I have used this css code:
<style type="text/css">
body {
background-image: url('/Images/emma-maersk.jpg');
}
</style>
However, it is not working. Can anyone help me.
Try setting its background-position and background-size:
body {
background-image: url('/Images/emma-maersk.jpg');
background-size: cover;
background-position: center center;
}
Check if the image exists. You can open Network tab in your browser's developer tools and check if this image is loaded properly.
Note that /Images/emma-maersk.jpg is not a relative path and means yourdomain.com/Images/emma-maersk.jpg. For relative path, you should use url('./Images/emma-maersk.jpg').
Also Add below lines in body{}
body{
background-size:cover;
background-position: 0 0 ;
}
And also Check Folder Spell and Case Sensitive.
For your addition, please make background-size: 100%
The shorthand method for setting background is
<style>
body{
background: url('Images/emma-maersk.jpg') no-repeat center center;
}
</style>
use it in CSS3
.backgroungImage {
background: url('../imageS/background.jpg') no-repeat;
background-size: 32px 32px;
}
also add ".." before giving url if it exist in folder hierarchy.
I am new to CSS and am tinkering with a few options. I want a pic called 'toplayer.jpg' to be repeated horizontally at the bottom of my webpage. I have used this code in an external style sheet. The pattern repeats horizontally...however it floats to the top of the page.
body {
background-image: url("../Images/toplayer.jpg");
background-position: bottom;
background-repeat: repeat-x;
}
Any suggestions for this noob would be appreciated. Thank you.
Your background declarations should work, I guess the issue is that the body tag has no height :
html,body {
height: 100%;
}
body {
background-image: url("https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg");
background-position: bottom;
background-repeat: repeat-x;
}
I am new to the Ionic framework and I am trying to start the app with a full screen background image like this:
I did manage to remove the statusbar it was shown in the tutorial. But how do I add a full screen image? When I added this to the style.css it didn't react:
html, body{
background-image: black;
}
In your css, try:
.scroll-content {
background: url(image) [add image position info here];
[add any more properties here]
}
This will set the background for the full content area.
in
ion-view class="pane"
all the stuff is rendered ... i did not try it out but i think you can manage this with
.pane {
background: url(image) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
Make sure the start of your image path has "../" this will point it to the correct image path in your resource folder once the app is built for a device. Using the pane method only seemed to cause problems this was the best solution for me when the image was appearing when served but not on my android device.
.scroll-content{
background: url("../media/images/background.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
Very similar to answer from Helmut, which worked using 'ionic serve' but gave me a white background when I pushed to Android (4.2.2 on a Nexus 7 in my case).
The pane class selector is correct if you wish to make the background fullscreen, however android just seemed to make the background white if I set the "background" value at all. Using "background-image" put things right.
I found the following worked on Android, and in Chrome (while web testing).
.pane {
background-image: url(image);
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
In Ioinc-5:
Create a in class home-page.scss.
.class-name {
--background: url("/assets/icon/background.jpg") 0 0/100% 100% no-repeat
}
Open home-page.html and add class in ion-content.
<ion-content class="class-name">
Since the folder structures have changed recently in Ionic 2 beta...
Your image should be at a path similar to www/img/backgrounds/lake.png, and the accompanying CSS should read:
.myClassName {
background: url(../../img/backgrounds/lake.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
Note: you need to jump up 2 directories, ../../
Ionic 4 Change Background color of Ion Content
Explained here Source Link
ion-content{
--background: url(./assets/images/bg1.jpg);
--background-repeat: no-repeat;
--background-size: cover;
}
Try below code to change your image url with full background with different device.
ion-content {
--background: none;
background-image: url('https://cdn.wallpapersafari.com/19/81/zOUft6.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}
below code works for me
--background: none;
background-image: url('../../../assets/imgs/splash.png') ;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;