Transparent Forum Lists + Background Image?

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Scam Warning
Locked
OBeer-WAN-Kenobi
Registered User
Posts: 38
Joined: Fri Jul 25, 2008 2:22 am

Transparent Forum Lists + Background Image?

Post by OBeer-WAN-Kenobi » Wed Aug 13, 2008 7:54 pm

Hi again guys,
I've been scouring the forums and can't find how to do this. I've seen a few different styles that have this effect but am not sure how to reproduce it with my own style.

What I want to do is make a static background behind everything and then make the forum lists semi-transparent so that the background can be seen behind them. What is the easiest and cleanest way to go about doing this?

Thanks for your help!
Image

OBeer-WAN-Kenobi
Registered User
Posts: 38
Joined: Fri Jul 25, 2008 2:22 am

Re: Transparent Forum Lists + Background Image?

Post by OBeer-WAN-Kenobi » Thu Aug 14, 2008 8:06 pm

Anybody?

Maybe I didn't explain it very well. What I want to do is something like this: http://demo.phpbb3styles.net/axeattack
The guitar in the above example stays in one place and the forum lists are transparent. As you scroll down you can see the guitar behind them.

How do I go about getting this effect?

Thanks!
Image

csp4.0
Registered User
Posts: 56
Joined: Tue Feb 26, 2008 5:32 am
Location: Holy Terra
Contact:

Re: Transparent Forum Lists + Background Image?

Post by csp4.0 » Fri Aug 15, 2008 12:43 pm

opacity settings in CSS or alph-transparent .png's should help as well...

Just elaborate more on what you want?

OBeer-WAN-Kenobi
Registered User
Posts: 38
Joined: Fri Jul 25, 2008 2:22 am

Re: Transparent Forum Lists + Background Image?

Post by OBeer-WAN-Kenobi » Fri Aug 15, 2008 4:41 pm

Basically I want a large logo to be static behind the forumlists like the guitar is in the link above. I want the forums to be transparent but a little opaque so you at least notice when you are scrolling down. On mouse-over I want them to have the look of glass. Like they have a glass lid on top of them. As you scroll down the forum lists I want the background image to stay there so it looks like the forums are moving. Does that make sense?

I'd also like to do this without a lot of huge edits of the .css files if at all possible. I have no problem changing this or that to "transparent" but would prefer to refrain from actually adding special classes and such. I do think I've got some of it figured out. But I've got a lot of work to do and any help on this to tell me if I'm doing something stupid would be much appreciated.

Here is what I've got so far. I'd be a little further but my photoshop crapped out on me last night and wouldn't allow me to make gradient images with transparent backgrounds... :evil:
http://www.test.thenutgallery.com/phpBB ... hp?style=5

Thanks for your reply!
Image

OBeer-WAN-Kenobi
Registered User
Posts: 38
Joined: Fri Jul 25, 2008 2:22 am

Re: Transparent Forum Lists + Background Image?

Post by OBeer-WAN-Kenobi » Sat Aug 16, 2008 3:43 am

OK,
I've gotten pretty far but I can't get everything to scroll past with the background image staying in the center..... It just stays at the top and then when I scroll down I get past it onto the normal background color. How do I fix this? The link above is still correct.

Also I haven't figured out how to get that transparent "glass" look when I mouse over the forum list rows.

So far I have done this as I saw it in another post today:

in colors css.
html, body {
color: #536482;
background-color: #323131;
background-image: url("{T_THEME_PATH}/images/ar.jpg");
in common css.
body {
/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #828282;
background-color: #FFFFFF;
background-repeat: no-repeat;
/*font-size: 62.5%; This sets the default font size to be equivalent to 10px */
font-size: 10px;
margin: 0;
padding: 12px 0;
The red is what I added.

Any ideas on how to get what I want?
Image

csp4.0
Registered User
Posts: 56
Joined: Tue Feb 26, 2008 5:32 am
Location: Holy Terra
Contact:

Re: Transparent Forum Lists + Background Image?

Post by csp4.0 » Sat Aug 16, 2008 7:12 am

Do something like *below* for the background image to stay attached and not move...

and you should change the bg colour similar to the colour tone of your bg image... so that people with slower internet connections won't have to see a white background suddenly turn into a dark picture...

Code: Select all

	background-image: url('{T_THEME_PATH}/images/ar.jpg');
	background-attachment:fixed;
	background-position:center;
	background-repeat:no-repeat;
	background-color: #000000;
as for opacity settings...

Code: Select all

    /* for IE */
    filter:alpha(opacity=80);
    /* CSS3 standard */
    opacity:0.8;
	/* for FF */
	-moz-opacity: 0.8;
If you have any problems, feel free to ask...

OBeer-WAN-Kenobi
Registered User
Posts: 38
Joined: Fri Jul 25, 2008 2:22 am

Re: Transparent Forum Lists + Background Image?

Post by OBeer-WAN-Kenobi » Sat Aug 16, 2008 6:34 pm

csp4.0 wrote:as for opacity settings...

Code: Select all

    /* for IE */
    filter:alpha(opacity=80);
    /* CSS3 standard */
    opacity:0.8;
	/* for FF */
	-moz-opacity: 0.8;
If you have any problems, feel free to ask...
Where would I change the above code or add it?

Thanks very much for your help!
I used the code you gave me and it put the background image right where I wanted it. :D Now just for some tweaking so my corners don't look funny.
Speaking of which........... how do I adjust the background image size via the css?
Image

csp4.0
Registered User
Posts: 56
Joined: Tue Feb 26, 2008 5:32 am
Location: Holy Terra
Contact:

Re: Transparent Forum Lists + Background Image?

Post by csp4.0 » Sun Aug 17, 2008 5:31 am

You can't change the background size... The higher your resolution, the more you can see of the background... If you want to adjust the size, you'd have to create an extra <div> behind everything and set that as a bg image and allow to image to stretch to the edges...

OBeer-WAN-Kenobi
Registered User
Posts: 38
Joined: Fri Jul 25, 2008 2:22 am

Re: Transparent Forum Lists + Background Image?

Post by OBeer-WAN-Kenobi » Thu Aug 21, 2008 2:03 pm

Thanks,
I actually want the image to be smaller though, not larger. I'd like the image to be around 600 pixels wide so that the rounded corners on my portal and board (bg_list.gif) are on background and not on background image. Does that make sense? Would I still need to create a new div or could I somehow adjust the image size like is done with the site logo and such?
Image

csp4.0
Registered User
Posts: 56
Joined: Tue Feb 26, 2008 5:32 am
Location: Holy Terra
Contact:

Re: Transparent Forum Lists + Background Image?

Post by csp4.0 » Fri Aug 22, 2008 9:33 am

With bg-image in the body OR html tag it fits the entire browser, it have it "controlled" create a div with a unique name (I'll call this div "ppq123") and put it just after the <body> tag and close it just before the </body> tag (overall_header, and overall_footer respectively)

your CSS would look something like this

Code: Select all

div.ppq123 {
   background: transparent url('{T_THEME_PATH}/images/ar.jpg');
   background-attachment:fixed;
   background-position:center;
   background-repeat:no-repeat;
   background-color: #000000;
}
and to control it's width and height, etc just add in 'width:;' and 'height:;' placing your parameters between the colon and the semicolon

Locked

Return to “[3.0.x] Styles Support & Discussion”