Using Drupal variables in CSS?

Question

I'm using CSS to implement a banner image in my theme:

#banner {
    background: url("../images/banner.jpg") no-repeat fixed 
}

Site users would like to be able to change the image within Drupal. I'm thinking of adding a file upload field to the Site Information admin form, and insisting that only a file with the same name (banner.jpg) is uploaded.

I wonder if it would be possible to use a Drupal variable in my CSS instead? Then a file name change wouldn't matter. I've used CSS in .php files before (setting the content type back to CSS in the header), but never tried this in a Drupal theme.

Answer 1

You can apply css styles from php. Use the drupal_add_css() function

<?php
drupal_add_css('#banner { background: url("../images/banner.jpg") no-repeat fixed }',$option['type'] = 'inline');
?>

Answer 2

Well, simply create a content type called banner which contains images and then create a view of it called banner-view; you should create a block display of it. In this view display only the last image. Now instead of creating background, simply use this code:

<div id='your-banner-wrapper'>
    <?php print views_embed_view("banner-view","block"); ?>
</div>

Now the last image that is uploaded to the content type will be the banner.

Answer 3

Coming a bit late to the party but from project page of the Style (CSS) Settings module:

Configure CSS values from the UI for any module, theme or custom CSS just by wrapping CSS values in a code comment. The CSS is functional even without the module being installed (soft-dependency). Form API elements are provided to have a color picker or a slider (e.g. for opacity).

Apart from the form API elements offered by the module, to have predefined field values you can use the Drupal core form API fields select or checkboxes.

For a site's custom CSS, rename the existing dedicated file 'sites/all/modules/style_settings/css/example.custom.css' to 'custom.css'. This file gets scanned for CSS values wrapped in comments and will be rewritten if so. In any case, it gets loaded as last stylesheet so you can be sure your custom CSS will not get overridden by module or theme CSS. Neither it will be overwritten when you upgrade the module.

You still have to define the form yourself by writing some code but the module takes care of rewriting the desired values in your CSS. Furthermore it offers form API elements especially for CSS property values (including validation) so that task is made as easy as possible.

The module has a demo and documentation.