How to add background image to full page background

ionic-v1
#1

Hi All,

can anyone point me to the direction of adding a background image to an ionic page.

I was able to add an image to a div background with the help of @nraboy 's this tutorial , but I would prefer to add the background to ion-content or ion-view. Because they it will cover the entire page (at least I think)

I had a look at ion-content directory and seems like we dont have option to pass custom css classes.

Can anyone help me on this.

cheers

Sam

Background image in page.scss
#2

In my app I created a homescreen with icons in grid layout. Adding a background image to this page is done by adding a custom css class ‘background’:

<ion-content class="background" scroll="false">

In your CSS file add an entry for ‘.background.scroll-content’:

/* homescreen background image */
.background.scroll-content {
    background: url('../img/mybackground.png') no-repeat;
    background-size: cover;
}
4 Likes
Responsive Background Homescreen Image
#3

@tomkuipers, this works perfectly, thanks a lot. I ended up with the following

.background.scroll-content{
background: url(’…/img/logo.png’) no-repeat;
background-size: cover;
background-position: center;
margin: auto;
z-index: 2;
}

#4

Nice @sameera207, glad you got it working. I’m thinking about using media queries as a future improvement and use different background images for various screen sizes.

#5

Ionic Page Image Background

create a folder for background image ie: img
place the folder to www/assets/
add a class for your background picture in YourPageName.scss

  ion-content.signup-style {
    background-image: url('assets/img/login-bg.jpg');
    background-size: cover;
  }

<ion-content padding class="signup-style">

Ohhh ! You’re done

#6

add in .scss
.ion-slide
{
//background: #33031e!important;
background-image: url("…/img/slide4.png");
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

#7

Hi Sameera and other Friends,

My doubt is regarding that background image size. How much width and height needed ?
Please advise asap

Thanks
Anes