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.

  • The reason I'm using CSS background rather than an inline image is so I can use background-size property for mobile layout etc.
    – pushka
    Commented May 3, 2014 at 9:10
  • That doesn't seem like a proper reason to use a background image - an inline image with max-width: 100%; height: auto; would be a perfectly valid way to solve that. The full sized image is going to be loaded regardless of the device or method, so there's no benefit to using a background image. Not that that answers your question, just saying...
    – Clive
    Commented May 3, 2014 at 9:12
  • Thanks - that's a valid point. The CSS is also altering background-attachment, background-size properties for different displays (using media queries). You may still be right, but it feels a lot more straightforward with a CSS background.
    – pushka
    Commented May 4, 2014 at 16:12

3 Answers 3


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

drupal_add_css('#banner { background: url("../images/banner.jpg") no-repeat fixed }',$option['type'] = 'inline');
  • 1
    Thanks for the idea. I ran with this method, calling drupal_add_css in a hook_preprocess_node call. That way, I was able to handle the image via a standard image field, and pass the file path to the css. I only added dynamic css for the background-image property, and left all the other background stuff in the CSS stylesheets.
    – pushka
    Commented May 4, 2014 at 16:15

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"); ?>

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

  • The OP is speaking about allowing to change the banner from the UI: "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." This is a rather convoluted way to achieve what the OP wants, though.
    – apaderno
    Commented May 3, 2014 at 17:42
  • @kiamlaluno then he must build a module for this thing. I guess it is not very hard to implement
    – M a m a D
    Commented May 4, 2014 at 12:32
  • That should be in the answer. :)
    – apaderno
    Commented May 4, 2014 at 13:25

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).

enter image description here

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.