In subtheming Commerce Kickstart, how to load my own background image?

Question

I followed the instructions in this drupal.org article to subtheme Commerce Kickstart theme, but one thing I didn't get. I have changed the background logo bg.png to my own. Create directory my_theme/images, and put the new bg.png there. There is a line in MyTheme_style.css, in section 1. Global:

body {
  background: #ececec url("../images/bg.png") left top; }

I've supposed then that the bg.png charged woul'd be my own, but it doesn't happen.

By the way, I first subthemed Commerce Kickstart theme with drush, and followed the other steps to make changes in MyTheme.info file.

I tried provide full path in url("../images.bg.png"), but still not working.

Am I missing something?

Edit: I will explain in details.

First I made a sub-theme of commerce kickstart with drush.

$ drush dl omega_tools
$ drush en omega_tools
$ drush omega-subtheme "The New Theme Name Here" --base=commerce_kickstart_theme --enable

To change some css attributes I create the file livraria-acervo-theme-alpha-default.css, where livraria-acervo-theme is my theme name. That file overrides the attributes changed from commerce-kickstart-alpha-default.css. Ok, works well.

But I need to change some global attributes that are in global.css. Then, from the drupal.org article cited, I follow some parts, as other was already done by drush. File livraria_acervo_theme.info was created by drush. But the code block

; OPTIONAL STYLESHEETS

css[livraria_acervo_style.css][name] = Livraria Acervo theme global style.
css[livraria_acervo_style.css][description] = This file holds all the globally active custom CSS of Livraria Acervo theme.
css[livraria_acervo_style.css][options][weight] = 12
settings[alpha_css][livraria_acervo_style.css] = 'livraria_acervo_style.css'

except the last line, was added in livraria_acervo_theme.info file

I think including this code block in livraria_acervo_theme.info file and create livraria_acervo_style.css and put it in path livrariaacervo/sites/all/themes/livraria_acervo_theme/ would cause my changed attributes in livraria_acrevo_style.css to take effect. But it doesn't.

I also created livrariaacervo/sites/all/themes/livraria_acervo_theme/images/ directory and put my background image bg.png there, and in

body {
  background: #ececec url("../images/bg.png") left top; }

I change "../images/bg.png" by "livrariaacervo/sites/all/themes/livraria_acervo_theme/images/bg.png", but didn't take effect.

The fact is that the livraria_acervo_style.css isn't used, as inspecting the chanted attribute in DOM, the file that is used is commerce_kickstart_style.css

It's my first time with sub-theme a Drupal theme, so I think is something I'm missing.

Answer 1

It's necessary to go in /admin/appearance/settings for your custom sub-theme and in vertical menu on the left, click "Toogle Styles", uncheck the box for "Commerce kickstart theme global style" and click "Save configuration". Now click again in "Toogle Styles" and there is a new option: "MY THEME NAME theme global style. (all) - MYTHEMENAME_style.css".

Check this option and again click in "Save configuration". Now changes in attributes in mysite/sites/all/themes/MYTHEMENAME/css/MYTHEMENAME_style.css does work.

Answer 2

First provide the absolute path like abc.com/sites/all.. to your image and see if it loads or not if it loads then there is something missing your relative path then check your relative path..