current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.
up vote 0 down vote favorite

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.

share|improve this question
    
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 May 3 '14 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♦ May 3 '14 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 May 4 '14 at 16:12

2 Answers 2

up vote 1 down vote accepted

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');
?>
share|improve this answer
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 May 4 '14 at 16:15
up vote 0 down vote

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.

share|improve this answer
    
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. –  kiamlaluno♦ May 3 '14 at 17:42
    
@kiamlaluno then he must build a module for this thing. I guess it is not very hard to implement –  Drupalist May 4 '14 at 12:32
    
That should be in the answer. :) –  kiamlaluno♦ May 4 '14 at 13:25

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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