CODEWITHSUNDEEP
htmlcssmobile
John Moore
John Moore

Reputation: 519

My background isn't appearing on some mobile browsers

I know there are a few other similar posts to my question so apologies for that. I've tried out all the solutions that were offered in those posts before posting.

I have a table on my page that has a background image using css.

html
{
width:100%
height: 100%;
margin: 0px;
padding: 0px;
border: none;
}

table.homemain
{       
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url('../images/home-bg.jpg') no-repeat;
background-position: 50% 50%;
background-size: cover;
height: 100%;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

<table class="homemain">

enter image description here

I've reduced the size of the image from 90k to 9k, still no different. I've also stripped the css down to just the background image

background-image:url(../images/home-bg.jpg);

and it still doesn't show.

Sorry I can't show a live site, it's still being hosted locally on my pc.

Any advice will be really appreciated.

Cheers

John

Upvotes: 0

Views: 41

Answers (1)

RoyceCraft
RoyceCraft

Reputation: 36

If you are looking to show you bg image for the whole page , put it in a <style> </style> for example.

<style>
  body {
    background-image: url("~/images/home-bg.jpg");
  } 
</style>

Make sure you put in your full directory because then there is no chance of miscommunication.

Upvotes: 2

Related Questions