CODEWITHSUNDEEP
csshtmljquery-mobile
Shahar
Shahar

Reputation: 541

background-image shows correctly on desktop browsers, not shown on mobile browsers

I have a system based on jquery mobile. I added a symbol on the search text box which resets the search text box value.

.ui-input-search .ui-icon-delete {
    border-radius: 0px;
    background-image: url(images/close-disable.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    box-shadow: none;
    background-color: transparent;
    z-index: 90000;
}

I checked through Chrome inspect tool on the mobile (network tab), and the image is loaded.

When accessing through the desktop, its showing correctly. Only on mobile it doesn't work (I tried on multiple browsers, doesn't work on any)

Upvotes: 0

Views: 2457

Answers (5)

Luiz Vasconcelos
Luiz Vasconcelos

Reputation: 11

For me workes this:

.ui-input-search .ui-icon-delete { 
   background-image: url(images/close-disable.png)!important;
   background-size: 100% 100%;
}

Upvotes: 1

Thusitha Deepal
Thusitha Deepal

Reputation: 1546

..ui-input-search .ui-icon-delete{
  background: url("../assets/lotus.png") no-repeat center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  background-attachment: scroll;
  background-size: 100% 100%;
}

Use background-size 100% 100% to adjust full screen width height in mobile

Upvotes: 1

user3130064
user3130064

Reputation: 1071

I had this problem before and I noticed that it was just a file permission problem. I corrected this by accessing my server via FTP, right click on the image file, going to "file permission" option and setting the "777" permission :D

Upvotes: 0

Shahar
Shahar

Reputation: 541

I managed to find an answer. For some reason, on mobile, you need to add background-size: 100%;

Upvotes: 2

SW4
SW4

Reputation: 71160

It may be a conflict caused by the input using the OS's native display setup for the control, try explicitly setting the appearance property to none (see here)

.ui-input-search .ui-icon-delete {
    border-radius: 0px;
    background-image: url(images/close-disable.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    box-shadow: none;
    background-color: transparent;
    z-index: 90000;
    -moz-appearace:none;
    -webkit-appearace:none;
    appearace:none;
}

Alternatively, try:

background-image: url(images/close-disable.png)!important;

Upvotes: 2

Related Questions