Best way to programmatically CSS background?

css, jquery, php

Solution

Since you're adding a script to the document you could probably just add a `<style>` block with the CSS you need.

Problem

I want to grab an image from my DB, and use that as the background. This is trivial, but is there a better/faster way than my current approach. Currently, I use Javascript (in the `<head>`) to load my background image, since my CSS is linked and not internal: ``` <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type='text/javascript'> $(document).ready(function(){ $('body').css('background', 'url(/_images/galleries/lg_<?php echo getBackgroundImage(); ?>) no-repeat top center white'); }); </script> ``` Upon loading the page, it takes about a half second to load the background. I assume the delay can be attributed to loading the external JS, etc. Also, the above code is included as a component, such that I don't have to copy/paste that code in each page of the website. The `<body>` is not encompassed in this included component. Is there a FASTER and preferable approach?

Original source