How to set background image of Kendo UI Mobile View

In this post we will take a look on how to set background image of Kendo UI Mobile view. Let us say we have a view as following,

image

This Kendo UI Mobile View is created as following,


<div data-role="view" id="tabstrip-home" data-title="Hello World!">
<h1>Welcome!</h1>
<p>
This is View
</p>
</div>

Now you have a requirement to put a background image in this view and set the colors of the texts on the view. You can do it by setting style of div in the CSS. This can be done as following


#tabstrip-home .km-content{

background-image: url('../appimages/backgroundimage.jpg');
background-size: auto 100%;
background-repeat: repeat;
color : white;

}

In above code snippet ,

  1. Tabstrip-home is id of the view. Background image of this particular view will be set to an image.
  2. Background image is inside the folder appimages. We are setting backgroundimage.jpg as the background of the view.
  3. Image will repeat itself as background of the view.
  4. Text of the view content has been set to white.

After setting style view should look like as following image,

image

In this way you can set an image as background of KendoUI Mobile View. I hope you find this post useful. Thanks for reading.

Advertisements

2 thoughts on “How to set background image of Kendo UI Mobile View

  1. Thanks for the tip! Do you know if it is possible to make the background image fixed so it does not slide with the view transition when going from one view to the next?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s