0

I am working on a website which has a background on the full browser-size. I did this with CSS, and the CSS background-size property.

But in IE8 this won't work. So I searched for a solution, and I thought I'd found 1. A jQuery plugin which adds the background-size 'cover' property.

Anyway, I'm not a pro at this... and it won't work. The background is loaded with a php script (plugin for joomla) which a programmer made to load the background image, if there is a image with the same name as the article alias that image is loaded as background image.

Could do some IE css fix, but if this jQuery could work. I wonder how. And what I'm doing wrong.

Source to the plugin: http://louisremi.github.com/jquery.backgroundSize.js/demo/
Github of the plugin: github.com/louisremi/jquery.backgroundSize.js

Website I'm working on: http://u-spa.netserver11.net/

Techie
  • 44,706
  • 42
  • 157
  • 243
user1774403
  • 15
  • 2

2 Answers2

1

If you download jquery.backgroundSize.js and put it on your server. Link to it in the head of your joomla page <script src="jquery.backgroundSize.js" type="text/javascript"></script> and jQuery <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> (this is the one used on the plugins page).

Then, you should just need to add:

$(function() {
    $(document.body).css({backgroundSize: "cover"});
});

to the header of your page and the plugin should be called and applied to the body of the page. Try that.

chrisbradbury
  • 327
  • 1
  • 5
  • Thanks but that causes a conflict, and this time I don't know how to fix this. Could you check what's going wrong? – user1774403 Jan 14 '13 at 15:39
  • You need to use `$('body').css("background-image","url('http://u-spa.netserver11.net//images/backgrounds/siematic-s3.jpg')");` instead of `$(document.body).setStyle('background-image', 'url("http://u-spa.netserver11.net//images/backgrounds/siematic-s3.jpg")');});` at the top of the page. Then it might work... – chrisbradbury Jan 14 '13 at 15:46
  • But my background is loaded with a plugin. If a image has the same name as an article alias it loads that image. `$document->addScriptDeclaration("window.addEvent('domready', function() { $(document.body).setStyle('background-image', 'url(\"" . $site_url . $filepath . "\")');});");` But the jQuery rewrites this, and only puts `` So the jQuery should add that to the rest of my body style but it doesn't.... – user1774403 Jan 14 '13 at 17:35
0

Instead of the body tag, I loaded my bg on the html tag and also changed the jQuery add css to html. Now it works in every browser!

user1774403
  • 15
  • 2