Help on CSS for new background image.

[JoniW]

I believe I have the most current release.  :-\

http://joniwarden.com/JoniWardenGallery/index.php My site.

I want to change the white background to my own image. I don't know where I enter the url of my image so that it will show. I also need to know how big my image should be so it won't tile.

Also, how to I make the tables more transparent? I want to be able to see the new image I place in the background a bit more. I am sure this is an opacity problem.

[wuduheo]

To make the tables transparent, you will have to edit the theme's CSS file, instead of it having background: #000000 or w/e color, make it background: url(/yourimagehere/background.png) or where ever your file is.

Your background will have to be a transparent .png file, you can make one in photoshop. Make it small though like around 50x50 then set it to repeat.

-

To change the background picture; put the your bg picture in your theme's images folder, then change "bg.gif" in the theme CSS file to what your background image is named.

CSS is a beautiful thing ^^ hope i helped!

[wuduheo]

oh yah forgot to add, Im super this works because i did it myself: http://momiji-bb.net/index.php

[JoniW]

Tell me if anything I am saying is not right or slightly off and correct me?

So, if I want a transparent red table, I create it in ps, set the opacity lower and save that image as a png. Upload it to my server or... where ever... and then link it into my CSS sheet, inside my themes folder. What line am I looking for to change in the code?


The entire background image I want to display as background has to small? I wanted one image of my art to cover the whole entire background. I understand the tiling effect but then I'd have a thousand small pictures. Not exactly what I was looking for.

The "models" in your website background page ... that how big I wanted mine to display my image.

[Jeff Bailey]

Code Select Expand

body {
background:url("images/bg.gif") repeat scroll 0 0 #F2F5F7;
color:#000666;
font-family:"Trebuchet MS",Verdana,Geneva,Arial,sans-serif;
font-size:12px;
margin:0;
}

The background image can be large.
add your image path and name where "images/bg.gif" is. You'll have to change the rest to make it the way you want.

The small image wuduheo is talking about is for your tables.
There are many changes you'd have to make in the css file to change all the tables

Read these:
http://documentation.coppermine-gallery.net/en/theme_create.htm#theme_create
http://documentation.coppermine-gallery.net/en/dev_tools.htm#dev_tools_firebug

[phill104]

The background image can be whatever dimensions you wish, it if the background image for the tables, the transparrent one, that the above user is talking about here. I would create a 1*1 transparrent png for the main box and a darker 1*1 for the inner box. All the css is explained in the theme section of the docs as well as a little information on some tools such as the web developer toolbar or my favourite firebug for firefox plugin. With these tools you can click on any element of a live webpage and see exactly what css controls it. You can even test changes live. Using those tools and armed with the aformentioned docs it should only take a few clicks to work out what you need to change.

Wuduheo,

Be nice if you could contribute a custom theme based on yours to the community.

*edit - Jeff is on form tonight.

[wuduheo]

Wuduheo,

Be nice if you could contribute a custom theme based on yours to the community.

Mine is actually the dark velvet theme with a few mods. hehe

[phill104]

I guessed that but the mods are nice. We often have variations on themes and the transparrency is nice. Simplify it to be more generic and you have a nice variation on the theme.