Background Image Problem

Worker Joined: Jul 20, 2008 Posts: 126 Location: Germany

I tried to add a background image to my RavenNuke site and also on my phpBB 3 forum. On both sites it showed the PNG picture with white background. But normally this PNG picture has no background, it's just a picture.
Does anyone know why?

Posted: Sun Aug 31, 2008 3:26 pm

What size is the image?
It sounds like your resolution is larger than the image.
Did you set the background to repeat?

Posted: Sun Aug 31, 2008 7:19 pm

Also its possible that your browser does not support transparency in PNG. I know this is an issue with Internet Explorer

Posted: Mon Sep 01, 2008 12:16 pm

I use Firefox 3.

Picture: [ Only registered users can see links on this board! Get registered or login! ]
1280x1024 PNG

No I didn't set the background to repeat. Just added it as BG image but it had white background PLUS it repeated vertically even though the code I used was just for a normal background image. No special effects at all.

Posted: Mon Sep 01, 2008 1:06 pm

Well you posted this in 'CSS', have you actually checked your css file(s)?

Looks to me that one of the parent elements of the element you assigned that bg image to uses a white (#ffffff) background colour and/or vertical repeat (repeat-y) somewhere.

That (partially) transparent png will just show the underlying colour, if that colour is white its white if its blue its blue, you get the idea Razz

Posted: Mon Sep 01, 2008 2:15 pm

No sign of #ffffff

Quote:

FONT {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}
TD {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}
BODY {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}
P {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}
DIV {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}¨

body,td,th {
scrollbar-3dlight-color:#2a8df2;
scrollbar-arrow-color:#2c91fb;
scrollbar-darkshadow-color:#27629e;
scrollbar-face-color:#000000;
scrollbar-highlight-color:#2c94ff;
scrollbar-shadow-color:#1d4a78;
scrollbar-track-color:#1c1c1c;
color: #9fb7c3;
}

body {background:#121212;
scrollbar-3dlight-color:#2a8df2;
scrollbar-arrow-color:#2c91fb;
scrollbar-darkshadow-color:#27629e;
scrollbar-face-color:#000000;
scrollbar-highlight-color:#2c94ff;
scrollbar-shadow-color:#1d4a78;
scrollbar-track-color:#1c1c1c;
color:#9fb7c3;
font:12px Arial}

A:link {color:#2e8ffa;FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica;text-decoration:none}
A:active {color:#2e8ffa;FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica;text-decoration:none}
A:visited {color:#2e8ffa;FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica;text-decoration:none}
A:hover {color:#1e4e84;FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica;text-decoration:none}
.title {BACKGROUND: none; COLOR: #2e8ffa; FONT-SIZE: 12px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.content {BACKGROUND: none; COLOR: #9fb7c3; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica}
.block-title {BACKGROUND: none; COLOR: #2e8ffa; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica}
.storytitle {BACKGROUND: none; COLOR: #2e8ffa; FONT-SIZE: 12px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.storycat {BACKGROUND: none; COLOR: #2e8ffa; FONT-SIZE: 12px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.boxtitle {BACKGROUND: none; COLOR: #2e8ffa; FONT-SIZE: 12px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.boxcontent {BACKGROUND: none; COLOR: #9fb7c3; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica}
.option {BACKGROUND: none; COLOR: #9fb7c3; FONT-SIZE: 10px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.tiny {BACKGROUND: none; COLOR: #9fb7c3; FONT-SIZE: 10px; FONT-WEIGHT: normal; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.small {BACKGROUND: none; COLOR: #9fb7c3; FONT-SIZE: 9px; FONT-WEIGHT: normal; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}

/* Form elements */
input,textarea,input.button, input.post, input.mainoption,input.liteoption,textarea.post, select,td.row1,td.row2,td.row3,th.row1{
background-image: url(../../../themes/XNeon/images/gradient.jpg);
background-repeat: repeat-x;
color : #2e8ffa;
background-color : #000000;
font-size: 11px;
font-weight: bold;
font:11px Arial,Helvetica,sans-serif;
BORDER-TOP: #2e8ffa 1px solid;
BORDER-BOTTOM: #9fb7c3 1px solid;
BORDER-LEFT: #2e8ffa 1px solid;
BORDER-RIGHT: #2e8ffa 1px solid;}

.code{
background:#363435;
border:1px solid #d1d7dc;
font:11px Courier,'Courier New',sans-serif
}
.quote{
background:#363435;
border:1px solid #d1d7dc;
font:11px/125% Verdana,Arial,Helvetica,sans-serif}

.heading{
color:#2e8ffa}

hr { height: 0px; border: solid #2e8ffa 0px; border-top-width: 1px;}

thats the css file, the red line is the place where i have to put my image link (the code to display a BG image)

Posted: Mon Sep 01, 2008 2:54 pm

Code:

body {background:url(/themes/XNeon/images/portalbg.png);}


scrollbar-3dlight-color:#2a8df2;


scrollbar-arrow-color:#2c91fb;


scrollbar-darkshadow-color:#27629e;


scrollbar-face-color:#000000;


scrollbar-highlight-color:#2c94ff;


scrollbar-shadow-color:#1d4a78;


scrollbar-track-color:#1c1c1c; 


color:#9fb7c3;


font:12px Arial}

[ Only registered users can see links on this board! Get registered or login! ]

also the link color gets messed up as u can see

Posted: Mon Sep 01, 2008 3:18 pm

Well the standard background of the <body> tag is white by default if im correct, so the white you see is probably just the default bg colour.

I'm not exactly sure what you want it to look like, but if you want a black background just specify a black background;

Code:

background: url(/themes/XNeon/images/portalbg.png) #000000 (or #121212) no-repeat;

As for those links, im not sure what they're supposed to look like?

An on-line example would be more helpful though Wink

Posted: Mon Sep 01, 2008 3:29 pm

Thanks man. It works now

{background: url(/themes/XNeon/images/portalbg.png) #121212 no-repeat;

Very Happy

Posted: Tue Sep 02, 2008 2:23 pm

Aah okay nice, gj Cool

But how about those link colours?

Btw, you could also throw in a 'center' at the end of that line to center the bg image in case people with a higher resolution visit your page.

Posted: Tue Sep 02, 2008 3:33 pm

Well it messed up the link colors because of the last }
I just deleted this sign and I could see that some codes

body {background: url(/themes/XNeon/images/portalbg.gif) #121212 fixed;
scrollbar-3dlight-color:#2a8df2;
scrollbar-arrow-color:#2c91fb;
scrollbar-darkshadow-color:#27629e;
scrollbar-face-color:#000000;
scrollbar-highlight-color:#2c94ff;
scrollbar-shadow-color:#1d4a78;
scrollbar-track-color:#1c1c1c;
color:#9fb7c3;
font:12px Arial}

changed from bold to not bold in the css file. Then it worked.

EDIT: I use another pic now and it repeats itself horizontally, i dont want that, i removed the "background-repeat: repeat-x;" but it still repeats the pic

tried it again with "background-repeat: no-repeat;"
still!

Posted: Tue Sep 02, 2008 4:01 pm

nvm i fixed it

there was another "repeat" line for the gradient.jpg which i let repeat-x

and then i added another repeat line for my background pic

background-repeat: no-repeat;

Posted: Sat Sep 06, 2008 2:04 pm

Here's the script to have different background images on different forums on your phpBB site.
With the help of 2 other guys I finally got it to work.

1. This script changes your board index background
2. Note that I have my background images in an extra folder in /styles/YOURTHEME/theme/images/backgrounds
3. #222222 = background color just in case you use a png file (u can use ur desired bg color)
4. fixed = image doesnt move when you scroll
when u want to add more the it looks like this "fixed; center; no-repeat;}"
for example
5. Those scripts only work for the forum itself NOT SUBFORUMS, for subforums u just have to use this script again and do the changes (name ur subforum)

Code:

<!-- IF SCRIPT_NAME == "index" -->


<style type="text/css">


html, body 


    {background: url(/forums/styles/XT-Blue/theme/images/backgrounds/YOURIMAGE.jpg) #222222 fixed;}


</style>


<!-- ENDIF -->

This is the script for a forum background image (aboves script is for index)

Code:

<!-- IF SCRIPT_NAME == "viewforum" and FORUM_NAME eq "Support" -->


<style type="text/css">


html, body 


    {background: url(/forums/styles/XT-Blue/theme/images/backgrounds/support.png) #222222 fixed;}


</style>


<!-- ENDIF -->

I havent checked it for topic but i think u just need to replace "viewforum" with "viewtopic"
FORUM_NAME = TOPIC_NAME

THE SCRIPTS BELONG IN YOUR overall_header.html file below </head>

----

EDIT: Scripts with better overview

Code:

<!-- IF SCRIPT_NAME == "index" -->


<style type="text/css">


html, body 


    {background: url(/forums/styles/XT-Blue/theme/images/backgrounds/index.jpg) #222222 fixed;


    background-position: center;


     background-repeat: repeat;}


</style>


<!-- ENDIF -->

Code:

<!-- IF SCRIPT_NAME == "viewforum" and FORUM_NAME eq "Support" -->


<style type="text/css">


html, body 


    {background: url(/forums/styles/XT-Blue/theme/images/backgrounds/support.png) #222222 fixed;


    background-position: center;


     background-repeat: no-repeat;}


</style>


<!-- ENDIF -->

If this helps you guys too then pls give some feedback Very Happy