CODEWITHSUNDEEP
jquerycsslistviewjquery-mobile
gsamaras
gsamaras

Reputation: 73366

Set background image for list

I am happy with the lists I have so far. However I feel that I could do something groundbreaking. I would like to set a background image (that's the only way I thought), so that every li gets displayed in the corresponding line of the image. Here is my jsFiddle which doesn't seem to be good.

The CSS is:

ol {
    display: inline-block;
    background-image: url("http://pixelbrush.ru/uploads/posts/2013-01/1359314378_0001-2.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

Is this possible? If yes, how?

Notice that the image can be changed if it helps.

Upvotes: 1

Views: 79

Answers (1)

Harry
Harry

Reputation: 89750

Suggestion: Give a thought to moving away from jQuery-UI. I am not saying the library is bad but it has a lot of such built-in behavior which you are wanting to override. Hence writing custom styles from scratch would be far more easier for you than overriding multiple such jQuery UI styles.

The way you had added the background-image was not incorrect but more specific selectors within the library were applying background & border colors to the li elements above the ol. Because of this they end up hiding the image that you had added. To overcome it, apply the following settings:

  • Set the background of the li and a elements inside the ol to transparent using a more specific selector than the one used by the library. Also, since the background image you are trying to use is not straight, the borders would look like they are flowing outside the pad and hence nullify them also.

    .ui-page-theme-a .ui-block-a ol li.ui-bar-inherit, .ui-page-theme-a .ui-block-a ol li a.ui-btn{
  background: transparent; /* set background of the lis to transparent */
  border-color: transparent; /* set border color to transparent */
}

  • Set the padding-top of the ol element such that there is a gap between the small gap after which the contents start. This prevents the header (Europe) coming on top of the clip.

    .ui-page-theme-a .ui-block-a ol.ui-listview-inset{
  padding-top: 3em; /* adding some padding-top to ol to make header come where we want it to */
}

  • Finally, set the background-size as cover for the parent ol instead of contain Cover means take up the entire width and height of the container.

    ol {
  display: inline-block;
  background-image: url("http://pixelbrush.ru/uploads/posts/2013-01/1359314378_0001-2.jpg");
  background-size: cover ;
  background-repeat: no-repeat;
}

Demo Fiddle

Upvotes: 3

Related Questions