Title: How to resize non-child image with js or jquery?
Tags: javascript;jquery;html;image;css
Question: I am helping a non-profit clean their current website and have used javascript to dynamically change the background picture of the body to one from one of their web app items. I can't however figure out how to force the image to have a width/max-width of 100%. I have read several other posts on similar questions but they all refer to images that are children of a parent tag. In this case, the image is on the body tag itself.
Feel free to check it out at http://www.fomelc.com/fsdg/franks-test-item
Thank you so much for any insights and/or comments.
EDIT: This is the code i am trying to implement:
<html&gt;
<head&gt;
</head&gt;
<body onload="changeback()"&gt;
<script&gt;
function changeback(){
var img = "url('{tag_core image_value}')";
var w = window.innerWidth;
var h = window.innerHeight;
img.width = w;
document.body.style.backgroundImage= img;
</script&gt;
<table&gt;
<tbody&gt;
<tr&gt;
<td valign="top"&gt;{tag_counter}. {tag_name}</td&gt;
</tr&gt;
</tbody&gt;
</table&gt;
</body&gt;
</html&gt;
Comment: http://css-tricks.com/perfect-full-page-background-image/

Comment: you could use `background-size: 100%` but it doesnt work in all browsers

Comment: Here there's no problem as well.

Comment: Thank you. It would be 100% of the body, which is as wide as the window.

Comment: @TimotheusTriebl that's weird, I have tried it in pretty much all browsers and the background image overflows the window. Just to be precise, the background image I'm referring to is a picture of mailboxes.

Comment: Ok i think you guys are actually seeing my issue. The image seems to be full-width, but there are supposed to be 5 mailboxes accross the screen. The weird thing is that the image is not "overflowing" per se in the sense that no scroll bar is appearing at the bottom, but the image that is loading is definitely bigger than the window.

Comment: @TimotheusTriebl, I am trying to force the width of the image to be the width of the window, and the height to be auto. Ideally, what i would want is to add a class name or id name to the background image as i plan to give it other styling attributes.

Comment: I've tried the following code but didn't work
document.body.backgroundImage.className="backgroundpicture";

Comment: 'on the body tag' how? And you want it to be 100% width of what? The body? The window? Another element?

Comment: on my system everything looks like its working how it should.. the bgimg is as wide as the window.width. (firefox)

Comment: yep, i also see that picture. on "franks test item" side. it just overflows the height because of the navigation but otherwise at the point of width everything is alright. maybe i'm a bit confused and don't really get the problem, because in chrome also everything works as i think it should ;). (also on my other system) wait a minute. you want to get your background image responsive or what?

Here is the accepted answer: Checking out your code, I would recommend you to only change the background image through JS and have the styles to make it wide applied from a stylesheet.
In your JavaScript, you're assigning a string to a variable and then setting properties of that String object. In other words when you're doing img.width, you're actually doing "url('some/url')".width instead of affecting any element. This doesn't raise any error because JavaScript is a really tolerant soul.
width and max-width are for element sizing. In your case the body element by definition takes up the whole width.
What you need to change is the size of the background image of the element.
For having the background cover the whole image horizontally and vertically, use background-size: cover.
Here's what you could do:
Le HTML:
<html&gt;
<head&gt;
<!-- jQuery is really not necessary, but handy --&gt;
<script type='text/javascript' src='http://code.jquery.com/jquery-2.0.3.min.js'&gt;</script&gt;
<!-- Put your JS in a file and load it --&gt;
<script type='text/javascript' src='route_to_your_javascript_file.js'&gt;</script&gt;
<!-- Put your CSS in a file and load it --&gt;
<link type='text/css' href='route_to_your_stylesheet.css' /&gt;
</head&gt;
<body&gt;
<h1&gt;Your Page</h1&gt;
<!-- This is generally placed at the bottom --&gt;
<!-- to ensure that the DOM is loaded when --&gt;
<!-- it gets here. --&gt;
<script type='text/javascript'&gt;
$(document).ready(function() {
// This will be called similarly like the inline onload attribute
changeBackground({tag_core image_value});
});
</script&gt;
</body&gt;
</html&gt;
In Your JavaScript File:
function changeBodyBackground(url) {
$('body').css('background-image', url);
In Your CSS File:
body {
background: url(default-bg-should-you-need-it.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* Some IE Love */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
Chris Coyier has a really good article about it.
Note: This is NOT tested. If there's anything that isn't clear, please let me know.
Hope it helps!
Comment for this answer: Thank you for your insights my friend. I ended up having to do something else but this was very helpful.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 11, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2013:00:09/30/13', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><html><image><css>', 'Title': 'How to resize non-child image with js or jquery?', 'ViewCount': 86, 'id': 19103546, 'user_AboutMe': '', 'user_AccountId': 2116357.0, 'user_DisplayName': 'nvncbl', 'user_Reputation': 179.0, 'user_Views': 62.0, 'user_id': 1880580.0}}