/    Sign up×
Community /Pin to ProfileBookmark

JQuery: Div background image scale

Copy linkTweet thisAlerts:
Feb 08.2012

,

I am using Jquery to add background image to a div which keeps changing on elements click.

The image is adding correctly but it is not occupying the whole div space due to smaller dimension. I would like the image to fit the div width height.

Could someone please help which property should I use to achieve this which should work on all browsers

This is the code I am using

[QUOTE]

var image_url = “url(“+_xmlUnitObj.img+”) no-repeat left top”;
$(‘#rightMenu’).css(“background”, image_url);

[/QUOTE]

where _xmlUnitObj.img contains the image path
and rightMenu is the div id.

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@nap0leonFeb 08.2012 — Try adding the "background-size" attribute to the #rightMenu declaration in the CSS.

http://www.w3schools.com/cssref/css3_pr_background-size.asp
Copy linkTweet thisAlerts:
@nitinmukeshauthorFeb 09.2012 — Thank you nap0leon. It worked.
Copy linkTweet thisAlerts:
@aj_nscFeb 09.2012 — Just be wary that this fix won't work in IE<9 or Firefox 3.x - browsers that, combined have a close to 1/3 market share.
Copy linkTweet thisAlerts:
@nitinmukeshauthorFeb 09.2012 — Thanks aj_nsc. Is there any other solution that will work on IE7.
Copy linkTweet thisAlerts:
@aj_nscFeb 09.2012 — Yes, but it's adds markup and CSS to your page and really depends on the HTML you are dealing with. This is an example:

<i>
</i>#rightmenu { position: relative; }
#rightmenu&gt;img { position: absolute; top:0;lefT:0;width: 100&amp;#37;; height: 100%; z-index: 1; display: block;}
#rightmenu&gt;div { position: relative; z-index: 2; }


&lt;div id="rightmenu"&gt;
&lt;img src="your/stretched/image.jpg"&gt;
&lt;div&gt;
&lt;!-- the rest of your content --&gt;
&lt;/div&gt;
&lt;/div&gt;


Basically, you have to put an img tag into an element that has been given a position. Position the img tag absolutely to the top left and give it 100% width and height (e.g. stretch it over the entire size of the parent element).

Then, any other content needs to be put in a positioned container with a z-index of 2 (or higher than the img).

That's the idea anyway, good luck.
Copy linkTweet thisAlerts:
@nitinmukeshauthorFeb 20.2012 — Thanks aj_nsc. It worked fine on older version of browsers.
×

Success!

Help @nitinmukesh spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...