How to change background from colors to image

Hello ludzik,

This brief guide will demonstrate how to setup Corporate Clean theme to support a local.css file where custom CSS rules and modifications could be placed. Following this practise, there is no worry if the next theme update will override all your custom changes and you should follow this practise in any theme if you use.
This can be done in 3 simple steps:

1. Create an empty .css file under the /sites/all/themes/corporateclean path and name it as you wish. local.css is always a good choice.
2. Edit the corporateclean.info file and add a line like stylesheets[all][] = local.css after stylesheets[all][] = color/colors.css
3. Clear all cached data.
   This step is important in order to force your template to be informed for the changes you have made in the template files. To do this go to Administer » Site configuration » Performance » Clear cached data

Finally, your corporateclean.info file will contain the following code

name = CorporateClean
description = CorporateClean: A flexible, recolorable theme with many regions.
version = VERSION
core = 7.x

stylesheets[all][] = style.css
stylesheets[all][] = color/colors.css
stylesheets[all][] = local.css

regions[search_area] = Search area
regions[highlighted] = Highlighted
regions[content] = Content
regions[sidebar_first] = First sidebar
regions[banner] = Banner
regions[footer_first] = Footer first
regions[footer_second] = Footer second
regions[footer_third] = Footer third
regions[footer] = Footer
regions[footer_bottom_right] = Footer bottom right
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom

settings[breadcrumb_display]= 1
settings[slideshow_display]= 1
settings[slideshow_effect]='scrollHorz'
settings[slideshow_effect_time]='10'

project = "corporateclean"

Now, you can edit the local.css file and add your style rules which will override the CSS3 gradient behind the content div. In order to accomplish this, you should add the following code inside local.css and of course add the bg.png from Bluemasters theme in your images folder.

#content { background: transparent url(images/bg.png) repeat-x; }

Thanks
/George

Hello ludzik

You have done the right implementation. The local.css file should contains only the following code
#content { background: transparent url(images/bg.png) repeat-x; }

Are you sure that you have placed the right image with .png format in your sites/all/themes/corporateclean/images folder? Is your Drupal installation online in order to examine your final style through my web tools?

Thanks
/George

Hi ludzik,

If you have put the image into your images folder then the path for the image should be:

#content { background: transparent url(../images/bg.png) repeat-x; }

Hello kaushashah
thank you for your email.

The local.css file is on the same level with images folder. There is no need to declare this
#content { background: transparent url(../images/bg.png) repeat-x; }

Please , check out all background image declarations inside style.css for example. style.css and local.css are on the same level.

Thanks
/George

Hi George,

Yup sorry!! I didn't noticed that.

Hi ludzik,

From the screenshot attached, you have put your image inside the "images" folder so the css file should contain:

#content { background: transparent url(../images/bg.png) repeat-x; }

as the images and the css file are not residing at the same level.

Hello ludzik,

I just repeated my above instructions and managed to change the #content div background image. Please checkout the attachment corporateclean-content-bg.jpg

Did you clear Drupal's cached data? This step is important in order to force your template to be informed for the changes you have made in the template files and corporateclean.info. To do this go to Administer » Site configuration » Performance » Clear cached data

Finally, could you create a screenshot as the one i sent you, through Chrome browser » Tools » Developer tools and selecting the #content div from left sidebar?

Thanks
/George

This works great in every browser except IE 9
Does anyone know of a fix?

Try setting the image to an absolute path rather than a relative one and try again in IE9.

nah doesnt make a difference.
this is my code as it is now...

#banner { background: transparent url("images/bgMainEdit.png"); repeat-x; }
#content { background: transparent url("http://www.skirmishdevon.co.uk/sites/all/themes/corporateclean/images/tower_bg2.jpg"); background-repeat: repeat-x; }

i have tried...

#banner { background: transparent url("images/bgMainEdit.png"); repeat-x; }
<!--
body
#content {
	
	background-image:url("images/tower_bg2.jpg");
	background-repeat:repeat-x;

}

-->

which loads the gradient behind the content first, then the image loads over the top, which actually looks a lot nicer than the first way, which loads the image over a plain black background.

I have an image behind my scrolling banner, and an image behind the main content. They both show fine in every browser except ie9

I read on another forum somewhere that a guy was struggling with a smiliar issue, and by changing "html" to "body" he got it to work in every browser. but that doesnt seem to be the case.

I DID IT! this has been killing me all week!

all i did was add a filter for ie9, and the background images finally showed up!!

my original code in the local.css file.

#banner { background: transparent url("images/bgMainEdit.png"); repeat-x; }

and now:....

#banner { 
	background: transparent url("images/bgMainEdit.png"); repeat-x; 
		/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bgMainEdit.png",sizingMethod='scale');
 
 }

sorted!

Thank you guys,

This was much help, really appreciate all the efforts made
100% Working from 1st time trying to apply it.

Many Thanks Drupal Community