Setting background-image with javascript

Question

In chrome, safari, and opera setting the background image to an absolute reference such as: "/images/image.png" changes it to "http://sitepath/images/image.png".

It does not do this in firefox.

Is there any way to avoid this behavior, or is it written into the browser's javascript engine? Using jquery to set the background-image also does this problem.

The problem is that I am posting the HTML to a php script that needs the urls in this specific format. I know that setting the image path relative fixes this, but I can't do that.

The only other alternative would be to use a regexp. to convert the urls.

Thanks.

Test this in firefox, and chrome / webkit browser:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div style="height:400px;width:400px;background-image:url(/images/images/logo.gif);">
</div>
<br />
<br />
<div id="test" style="height:400px;width:400px;">
</div>
<script type="text/javascript" src="/javascripts/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#test").css('background-image',"url(/images/images/logo.gif)");
        alert(document.getElementById('test').style.backgroundImage);
    });
</script>
</body>
</html>

Personally, I wouldn't try to rely on something like this in the first place. I tried 4 browsers, and all of them give a slightly different result. — goat
– goat, Commented May 1, 2010 at 16:46

Ahmad · Accepted Answer · 2012-11-24 14:12:02Z

3

Not sure exacly how you're putting that location into the document, but you can use window.location.hostname to get the domain and prepend that.

var bgImg = window.location.hostname + '/images/images/logo.gif';
$("#test").css('background-image', 'url('+bgImg+')');

You would replace /images/images/logo.gif with however you generate the image (server-side, I guess?)

edited Nov 24, 2012 at 14:12

Ahmad

73k18 gold badges116 silver badges139 bronze badges

answered May 1, 2010 at 16:46

DisgruntledGoat

73k70 gold badges214 silver badges295 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sohtimsso1970 · Accepted Answer · 2013-06-04 12:54:47Z

2

A better approach would be to change classes on the item such that the new class changed the image to whatever you wanted. Something like:

$("#test").addClass("newClass");

This is a much cleaner approach that will degrade better and allow proper separation of concerns.

If you have to stick with changing inline CSS, you'll have to use an absolute reference to keep it the same in all browsers.

$("#test").css("background", "url(" + window.location.hostname + "/logo.gif)");

edited Jun 4, 2013 at 12:54

answered May 1, 2010 at 17:01

sohtimsso1970

3,3075 gold badges31 silver badges39 bronze badges

1 Comment

lanoxx Over a year ago

This is really the better solution, as it not only avoids issues with relative and absolute paths but also gives a better separation of concerns.

Dally S · Accepted Answer · 2014-07-11 15:20:50Z

-1

$('#divID').css("background-image", "url(/myimage.jpg)");

answered Jul 11, 2014 at 15:20

Dally S

70310 silver badges11 bronze badges

Collectives™ on Stack Overflow

Setting background-image with javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related