Background Image how to...

http://www.boonex.com/forums/topic/7-1-Latest-Updates-Before-Beta.htm#177154

I'm getting pummeled by PM's on how to make the background, and the top menus have opacity.

your going to add this to your /templates/_header.html at the end..

Please change the image link to yours and your good to go.

<style>body{background: url("http://www.mynewbeetle.net/photos/bkg1.jpg") Top Center no-repeat;background-attachment:fixed; background-color:#ffffff;}
.page_block_container{filter:alpha(opacity=99); -moz-opacity:0.990; -khtml-opacity: 0.990; opacity: 0.990;}
div.sys_top_menu{filter:alpha(opacity=90); -moz-opacity:0.90; -khtml-opacity: 0.90; opacity: 0.90;} 
div.sys_main_logo {background: rgba(255, 255, 255, 0.7)}
.page_block_container {background-color:#fff;background: rgba(255, 255, 255, 0.99)}
div.dbContent{background-color:#fff;background: rgba(255, 255, 255, 0.99)}
</style>Clean your cache and you should be good....

Have fun!

Hey Newton, I've noticed something that happens when applying this though, after adding this code, when you go to view any photo and click on the photo - the whole page blacks out including the photo itself whereas before, just the background would black out and leave the photo to view...

 I'm so glad you noticed that!

That I have wondered why it was happening on some sites! Thank YOU!

I have stopped using it on most sites and only if they ask.

Perhaps a better CSS or template creator will chime in and enlighten us on the solution.

I just found that was the cause of it also!

I had this code from you a while back, and was using it on one of my first 7.1 sites... couldn't work out why the photo black out was happening, thought it was down to the update process! Cant tell you the hours I spent trying to figure the cause...

only picked up on it as I had a site that I know was displaying the photos fine, then put this code in and then didnt!... 

Would be great to find a fix for it as its a nice touch having the background display this way.

This line is causing it. So try removing it.

.page_block_container{filter:alpha(opacity=99); -moz-opacity:0.990; -khtml-opacity: 0.990; opacity: 0.990;}

That line should not be needed anyway. The transparency is being handled by this one.

.page_block_container {background-color:#fff;background: rgba(255, 255, 255, 0.99)}

And even that should be able to be written as this.

.page_block_container {background: rgba(255, 255, 255, 0.99)}

Try those changes and see what happens.

 Thanks so much Deano, will try now... 

 Actually Newton, That was my first thought- "I imaginge it could be done with CSS as well."

Then I thought- "Which is easier for folks? Doing it via CSS or HTML?"

It all depends on what people are most comfortable with- CSS or HTML.

I do nearly all my changes like that with CSS.

If I'm not mistaken-

Default.CSS-

body {
    background: url("http:www.YOUR-SITE.com/templates/YOUR-TEMPLATE-NAME_tmpl/images/BackgroundImage.jpg") no-repeat scroll center top #FFFFFF !important;
}

Image ineeds to be uploaded to your template's images directory

.page_block_container {

    background: rgba(255, 255, 255, 0.99) !important;

}

(I put !important to override anything that may be in any other .CSS files)

PS- I wasn't sure if your post was also aimed at being able to set different backgrounds to different pages or modules

adjustment works great Deano, thanks :-)

Underdog, are you suggesting a way to change this so different images can be placed for different modules/pages?

 Is there a way?

100%- YES!

Do I have specific instructions for doing so?

Not at this time, not at my skill level.....

That being said-

MasterTheme are absolute Pros at doing this, and their HyperNova Template has this built-in....You can have specific or random backgrounds displayed for each different module....Same goes for a header image up top. It's way cool!

ALSO-

Boonexpert too "Masters" this- And he can hook you up with a modified version of Master Background Switcher.....Just ask him for: Master Background Switcher Version- KickAss.0

It enables you to set different backgrounds based on URL and can also set backgrounds based on module....

For Module- Basically, when you tell MBS what page(s) you want the background set for, you'd tell it something like this:

http://www.YOUR-SITE.com/m/photos*

and everything that prefixes with that web address will have the background you selected.

Pretty cool eh?

Answered on the other one, please don't do a lot of cross posting in the forum for the same topic.