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%;
}
Related
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");
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;
In my jQuery mobile 1.4.0 app I have a Page which contains a list view the Problem is that when I have added a background image for this page as the list elements are becoming larger as the background stretchs with the content and this apears clearly on mobile devices more than jsFiddle ,this is my jsfiddle .
How can I make the background image to be fullscreen and fixed , not stretched with the content? Please help me ..
Here How I add a background image to my Page:
#EmPListPage{
background-image: url('http://images2.layoutsparks.com/1/218610/just-ducky-dots- pinky.gif') !important;
background-repeat: no-repeat;
background-size: 100% 100%;
}
#PageContent{
background: transparent ;
}
In my case the solution was to use contain, like this:
.ui-page {
background: #000;
background-image: url("http://bettingmasters.info/wp-content/uploads/2013/11/19757-football-stadium-1920x1200-sport-wallpaper.jpg");
background-size: contain;
}
You will want to attach the background image to the document body instead of your container div. Using your CSS in the fiddle:
body {
background-image: url('http://images2.layoutsparks.com/1/218610/just-ducky-dots-pinky.gif') !important;
background-repeat: no-repeat;
background-size: 100% 100%;
}
#EmPListPage, #PageContent{
background: transparent ;
}
Fiddle: http://jsfiddle.net/chucknelson/6zKJg/