CODEWITHSUNDEEP
csssencha-touch
Sri
Sri

Reputation: 1505

Styling Background-image Url

How to style background-image url height and width

I am using sencha-touch AND building a mobileApp, I have a view with a image - Xtype

    var profilePicture = {
        xtype : 'image',
        style : 'margin-top:10px;',
        id : 'profilePhoto',
        src : 'resources/images/profile.png',
        height : '104px',
        width : '84px'
    };

I added this image in the panel I dynamically set the image's src in my controller with the value of json I get from the server,

src = localStorage.httpServerPrefix + profile.imageURI; // I get the image URL Ext.getCmp("profilePicture").setSrc(src.);

When I see in the browser I get like,

<div class="x-img" id="profilePhoto" style="margin-top: 10px; height: 104px !important; width: 84px !important; background-image: url(http://127.0.0.1:8080/Milna/user/mphoto/1?version=7); "></div>

Height and width of the div are set to 104px and 84px. My image's size is 1600px × 1200px, so that it does not fit into the above div. Is it possible to style the background image url??? What can I do to style the image which is coming from the url?

Upvotes: 0

Views: 688

Answers (2)

Vivek Dragon
Vivek Dragon

Reputation: 2248

Take a look at this Refactored scope. In this article thay have explained about the styling function.

you're styling will be more consistent, and more importantly it will make you totally look good when you restyle an entire mobile app in minutes instead of days.

Style: 'background: resources/images/profile.png; width: 45%',

Upvotes: 1

Dipak
Dipak

Reputation: 12190

use CSS3 - 

div{ background-size: cover; }

As you are using large images in your web app. You should read on Adaptive Images

Upvotes: 1

Related Questions