[Help] Adding Transparent Background Image [Help]

[Sad_Angel]

Hi!!
How can i place a transparent image in background.Most of that i've seen on VB forums and here 1 theme was released too, but i forgot its name.
Please can anyone help me to place a custom image in body background, so it appears a bit transparent, like that.

[ARG01]

It can be tricky but here is an easy way. Look for this in index.css:

Code Select Expand

body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 15px 0;
}

And change to:

Code Select Expand

body
{
background: #E9EEF2 url(../images/theme/backdrop.png) no-repeat;
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 15px 0;
}

Then you need to create a larger backdrop.png image. Seeing that it will be a larger file it may be best to change it to a .jpg file to save loading time on your server as .png files are somewhat larger than .jpg's.

Example:

Code Select Expand

body
{
background: #E9EEF2 url(../images/theme/backdrop.jpg) no-repeat;
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 15px 0;
}

Now if you have photoshop or Gimp simply open your larger image and then create a new layer. Move the new layer under the original image and give it a color overlay of your background color. In this case #E9EEF2. The reduce the opacity of the top layer (original image) to your desired transparency. Save the file in .jpg format (backdrop.jpg)

Simple.

If you don't have any graphics software program to create the image let me know and I can do it for you. 

[Sad_Angel]

Hi! Thanks for reply..
I am using inferno theme, is it possible with that..?
By the way how to create a larger backdrop.png image.?

[ARG01]

Lol, I just posted this on a different site. 

"Anything is possible. Here are a few designs I have done using Inferno as a base. http://omniwebz.com/design/index.php/page,page3866.html "

[Hj Ahmad Rasyid Hj Ismail]

A very nicely designed website. I just noted that the last box just before the copyright is not well aligned.

[Sad_Angel]

Nice themes..
a noobish question...how to convert png to jpg..?
and is this path default (../images/theme/backdrop.jpg)..
Thanks

[Hj Ahmad Rasyid Hj Ismail]

If that is from index.css it refers to your respective theme. Yes you can use jpg or png. To convert you can use photoshop or gimp or you can use several other free online services. Google it.

[ARG01]

Nice themes..
a noobish question...how to convert png to jpg..?
and is this path default (../images/theme/backdrop.jpg)..
Thanks

Right, the path needs to be changed from .png to .jpg but the image itself needs to be a .jpg as well. The conversion is not really a necessity but the .jpg will load faster than a large .png file. If you need an image converted let me know and I will do it for you.

A very nicely designed website. I just noted that the last box just before the copyright is not well aligned.

Yes, I have been working on fixing that for a week now but just cant seem to make the proper adjustments. I did however post in the support boards a while back for help but received no replies. But, thanx for noticing. 

[Hj Ahmad Rasyid Hj Ismail]

Oh... Sorry. I was rarely around lately. I'll take a look. I am thinking that it is mostly css but I would check it out first. I'll post in that thread, if I find anything useful to help.

[Sad_Angel]

Hi!

I found this in index.css
main_body
{
background: #dedede url(../images/custom/main_body.jpg) 0 0 repeat-x;
}

main_body .wrapper {
    background: #ffffff url(../images/custom/main_body_wrap.png) 0 0 repeat-x;
    padding: 10px 0;
}

Now where to add image url..?
I have attached the image, but is it possible with that..?

Thanks...

[Sad_Angel]

Can anyone tell me where to place image..
which line to edit..
Thanks

[Sad_Angel]

Hey any1 please tell, where paste image location

Thanks

[Hj Ahmad Rasyid Hj Ismail]

Try to replace it here:

Code Select Expand

/* Set a fontsize that will look the same in all browsers. */
body
{
background: #FFFFFF url(../images/theme/backdrop.png) repeat-x;


[Sad_Angel]

Thanks for reply...

is this to be done with default curve theme..?
or it will work with any customized theme..
I came across 1 such theme, over here..but didn't know where i've seen..
in that theme backg. was one man on mountain..something like that..
if anyone come across that, please let me know..

Thanks

[Hj Ahmad Rasyid Hj Ismail]

It should be the same with any theme.