Hi FuzMic,

To add background for header, please do not customize the header.php file. If you did, please convert to default.

Now open your custom.css file then add the following CSS rule:

.t3-header .row {

  background: url(../images/t3-banner.png);

}

You can add more style to the rule and change image if you want.

Gardner.

G Lunar - Thank you for the pointer which is quick & sweet. Hope to get it fix ASAP and revert. Cheers!!

PS
Following your advice, revert to using original header.block and in custom.css use
.t3-header .row {
background: url(../images/pic.jpg);
}
In Non-development mode, no background image appear in header.

I am sure it is nothing to do with logo.Type setting.
Can it be related to head issue in the configuration default.php relating to lines
[head]
[jdoc:include type="head" ></jdoc:include]
[?php $this->loadBlock('head') ?[
[/head]

Someone suggested the following in header.block the extra line [div class="container"] as follows:
[header id="t3-header" class="t3-header"]
[div class="container"]
[div class="row"[ [/div]

PLUS in template.css, the following
.t3-header {
padding-top: 0px;
padding-bottom: 0px;
background: red;
}
#t3-header .container {
background: url(../images/pic.jpg);
}

What say you on this? How to make yours work, I prefer a simple/sweet change in custom.css? Please help guru.

Adding style to custom.css file is the simplest way and safe also. When you customize a file, it can affect other places in your site, so you have to make sure the customization works properly in all cases.

Gardner.

Gardner thank you again for the watch. I found the reason why! I place the pic.jpg in the wrong folder, it should be in the template\images folder because of the "...\images"; NOT the root\images folder. In short your advice is correct and fully agreed. Sorry for the fuzz.

I do a lot of background customizing. I always use background-color: blue; (or whatever ) rule to check if I have selectors and custom.css set up properly before i use url's. Relative and absolute url's can be tricky. You can also view page source to check custom.css is loaded by clicking on it. As far as I can tell, custom.css is loaded in both dev and non-dev mode it is not related to less and is not overridden in upgrades.
Hope this helps.

Hi FuzMic,

I also forgot to note you about the image path . Glad to see you figure out that.

@DavidMc: it's absolutely right.

Gardner.

David i tinker that out too abt Custom.css being read irrespective of dev or non mode. By the way i found the culprit to the path by using Chrome.Dev-Tools as you have indicated.

Now i want to use custom.css extensively, guys where can i read more & leap frog, any suggestion. Cheers!