I've created a custom sub-theme for Omega and I want to change the background of the body to a specific image. I've edited the global.css file in the css folder of my subtheme.

body {
    background-image:url("images/starbkg.png") repeat;

I've also made sure that global.css was enabled. If I add background-color:black to the code the background does change color but I haven't been able to change the background image. I figured just by editing the global.css file I should be able to change the background image. No matter how many times I've flushed the cache and reloaded the page, the background image still won't show up. I've even tried creating a preprocess file. In the preprocess folder of my theme.

* Preprocess HTML.
* Implements hook_alpha_preprocess_html().
function myth_preprocess_html(&$variables) {

  $variables['classes_array'][] = 'body';

(myth is the name of my theme)

I don't need the background to re-size or change, I just want something that sits behind all the other areas on the page and is persistent across all the content. When I inspect the page I find that

<body class="html front not-logged-in page-node omega-mediaqueries-processed alpha-  debug-processed responsive-layout-wide">

hasn't changed to indicate a background. I've looked into various modules that I would like to avoid and I was hoping to find something relatively simple. I have managed to change the background on non-Omega based themes so I suspect there is something that Omega does that I'm missing.

Thanks in advance for your assistance.

  • Is the image really available and loaded fromt the given url? You can check this in fire fox by looking at the media tab of the page informations. If the image is loaded you must find it there. If it's not loaded, the url is listed but no image is shown. – BetaRide Jun 24 '12 at 5:15

You shouldn't need to do any of the preprocess stuff. We recently had some problems getting things to apply via the global.css file - but we figured them out.

Here is the trick of it. Even though you apply X in the global.css file, if Y is applied in one of the stock css files, and you don't turn off Y (via css in your global.css) - and Y in some way impacts X - X won't be active.

I recommend either Firefox and Firebug - or Chrome and "right click -> inspect" - and really scrutinize the DOM.

Also - regarding your image file - you might try specifying a full path. We have had issues with relative paths.

I hope this helps.

| improve this answer | |

It's likely as simple as fixing your css declaration, and doesn't have anything to do with your Drupal theme:

body {
  background-image: url('images/starbkg.png');
  background-repeat: repeat; /* not necessary as it's the default */

You can only specify the image with background-image See here

Are you using any dev tools such as Firebug for Firefox or Chrome Developer Tools? Chrome DevTools will actually warn you in the CSS panel when your declarations are invalid.

As others have pointed out, you need to verify your path. If you have not changed anything from the default Omega sub-theme structure, your images folder will not be in the same directory as your css, it's likely you'll need something like url(../images/stargbkg.png)

| improve this answer | |

I'm using Omega 3 subtheme and here is the code that worked for me.

background-image: url('your site/sites/default/files/wallpaper.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center; 
background-size: 100%;
| improve this answer | |

Try this:

body {
  background-image:url("images/starbkg.png") !important; 
| improve this answer | |
  • 1
    you can add some explanation? – Adrian Cid Almaguer Sep 29 '16 at 13:10
  • Did you try to see if it work? – Dennis Sørensen Oct 3 '16 at 16:05
  • 1
    No, but this is not the point, here is better if you can show to the user why this will work. – Adrian Cid Almaguer Oct 3 '16 at 16:18

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