I would like to add a background image to Xero while keeping my main site clear, do I have to set each individual module position to white to retain content area clear or is there a better and easier way?

Hi Zoldar,

It depends on which bits you want to have a background but adding this:

.zen-spotlight {background:#fff} will add a white background to the areas that have content.

Thanks

Thanks Anthony, that will prob be handy also, but basically I want to put a colour or image in the area that does not have content. Found the following on here and put in custom.css but it only appears at the very bottom atm.

html {
background: url(../images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

As an example to better explain what I want to do, look at a website I did a little while ago with a competing template company, but we have decided to support local and so Zen Framework will be our choice all the time, but we need time to work it all out. With the Framework, would it be possible to add an option that allows for this in the template layout section in the future maybe also. Anyway the website is angelichealingandwisdom.com.au/ and it is the starfield I am talking about as the background.

Cheers
Jeff

Hi Jeff,

Trying this locally on Xero try something along the lines of -

body {background: transparent url(../images/mountain.jpg) center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

#zen-wrap {background-color: transparent;}

Cheers
Paul

You would need to add a background colour to divs like Anthony suggested

Cheers

Thankyou guys, all looking the way I want now, just finished this website and will move on to the next. I will post the final code from custom.css for anyone else reading this thread. Had to add some padding, but all good now

body {background: transparent url(../images/bg.jpg) center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

#zen-wrap {background-color: transparent;}

.zen-spotlight {background:#fff; padding: 15px;}

Thanks for info

Cheers
Paul

Just when I thought all was flying sweetly with two Xero sites down and on to the third. For some reason my custom.css does not seem to be working. The difference with this one is that I have changed to this theme from the original, but would not think that should make any difference at all, the old template and associated bits are uninstalled. Could it be a conflict with something that I have third party in there maybe?
With that in mind, I will submit a ticket as well with my site details for you to have a look.

Site in question is 181.224.158.69/~petfood/

Thankyou guys, pointing out the obvious that I had let HTML code get into my css code
This was caused by using an editor that thought it knew better and not looking at the output correctly.
I knew it would be simple but could not see the forest for the trees and think nothing of seeing html

Cheers
Jeff

Hi Jeff,

Can you clarify what the issue is?

I can see the css file is being picked up

Cheers
Paul

ah sorry I somehow missed your reply from 4 hours ago

No worries and thanks as always for the response...

Cheers
Jeff

Cheers

Paul