CODEWITHSUNDEEP
htmlcssangularjsionic-framework
Sarah cartenz
Sarah cartenz

Reputation: 1313

Background image does not appear on the phone screen

I am making an app using ionic, however the background image does not appear no matter what I try. I checked previous questions but non of the solution worked for me. This is my css:

body {
    background-image: url("img/national day.png");
    display:block;
    position:absolute;
    min-height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    width: 100%;
    height: 100%;
    margin: auto;
    /*position: relative;*/
}

I know that the path is correct for sure because its there in the frames when I debug using chrome. There is an img file in my css directory.Why isn't the picture appearing though fiddle:https://jsfiddle.net/y04jpe0h/

Upvotes: 0

Views: 120

Answers (4)

Sarah cartenz
Sarah cartenz

Reputation: 1313

I couldn't know why it is not working in the end so I just added the background image to the pane and it got displayed. Remains a mystery..

Upvotes: 0

A.Tarhini
A.Tarhini

Reputation: 72

At first to access folder img you have to put :
background-image: url("../img/logo.png"); because img folder is not into css folder. Second make sure you have the image in img folder because i didn't find it into fiddle so it try logo .png and it works.

Upvotes: 1

Sasith
Sasith

Reputation: 790

Try this. I Removed the background size 100% 100% property. 

{
    background: url("img/national day.png") no-repeat center center fixed;
    display: block;
    position: absolute;
    min-height: 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: auto;
}

Hope this helps you.

Upvotes: 1

Hitesh Misro
Hitesh Misro

Reputation: 3461

Add this part of CSS in your code 

html{
  height:100%;
}

Hope that works!

Upvotes: 1

Related Questions