Endless Paradigm

Hi guys, as you may know, thanks to Sensei Seito wee members of DreamArts have gotten our own Coppermine Image Galleries.
I'm working on a custom theme right now and need a bit help with the CSS stuff....

first I wanted to have a non repeating background that has the other things scrolling over it, hard to explain... load EPs Love Hina Blue Theme, you can see it there. I tried it with:

        background-image: url(images/bg.gif);

background-repeat: no-repeat;      

background-attachment: scroll;

but it don't works, the background image is only drawn once but when I scroll down the background goes up and I only see white...

EDIT: got it working^^

the second thing, how do I make pictures translucent? The original image was a .jpg so I saved it as a .png, added a bit translucency and pointed the CSS to the .png. If I load the theme the picture is still solid.....  Do I need to add something to the CSS to get it translucent?

Thanks for help in advance ;)

Nicked it off http://webdesign.about.com/od/css3/a/aa121306.htm

webdesign.about.com Wrote:The opacity property takes a value of the amount of transparency from 0.0 to 1.0. 0.0 is 100% transparent - anything below that element will show completely through. 1.0 is 100% opaque - nothing below the element will show through.

So to set an element to 50% transparent, you would write:

    opacity:0.5;

See some examples of opacity in action
But It Doesn't Work in Internet Explorer and Some Mozilla Versions

Neither IE 6 nor 7 support the CSS 3 opacity property. But you're not out of luck. Instead, IE supports a Microsoft-only property "alpha filter". Alpha filters in IE accept values from 0 (completely transparent) to 100 (completely opaque). So, to get your transparency in IE, you should multiply your opacity by 100 and add an alpha filter to your styles:

    filter: alpha(opacity=50);

See the alpha filter in action (IE only)

For some older Mozilla browsers you need to use the property "-moz-opacity" to change the transparency. It works the same as the CSS 3 property.

    -moz-opacity:0.5;

See the -moz-opacity in action (Mozilla only)
You Can Make Images Transparent Too

Set the opacity on the image itself and it will fade into the background. This is really useful for background images.

    <img src="http://z.about.com/d/webdesign/1/0/Y/B/1/shasta.jpg" alt="Shasta" style="opacity:0.5;filter: alpha(opacity=50) ;" />

And if you add in an anchor tag you can create hover effects just by changing the opacity of the image.

    #imghover a:hover img { filter: alpha(opacity=50);filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);-moz-opacity: .5;opacity:0.5; }

Affects this HTML:

    <div id="imghover">
    <a href="#"><img src="http://z.about.com/d/webdesign/1/0/N/9/1/24-arrow-next.png" alt="next" style="width:24px;height:24px;border:none;" /></a>
    </div>

See the images made transparent
Put Text on Your Images

I found this on CSSPlay. With opacity, you can place text over an image and have the image appear to fade out where that text is.

This technique is a little tricky, because you can't simply fade the image, as that will fade the entire image. And you can't fade the text box, because the text will fade there as well.

First you create a container div and place your image inside:

    <div id="image">
    <img src="http://z.about.com/d/webdesign/1/0/Y/B/1/shasta.jpg" alt="Shasta" />
    </div>

Follow the image with an empty div - this is what you'll make transparent.

    <div id="image">
    <img src="http://z.about.com/d/webdesign/1/0/Y/B/1/shasta.jpg" alt="Shasta" />
    <div id="text"></div>
    </div>

The last thing you add in your HTML is the div with your text in it:

    <div id="image">
    <img src="http://z.about.com/d/webdesign/1/0/Y/B/1/shasta.jpg" alt="Shasta" />
    <div id="text"></div>
    <div id="words">This is my dog Shasta. Isn't he cute!</div>
    </div>

You style it with CSS positioning, to place the text above the image. I placed my text on the left side, but you can put it on the right by changing the two "left:0;" properties to "right:0;".

    #image {
      position:relative;
      width:170px;
      height:128px;
      margin:0;
    }
    #text {
      position:absolute;
      top:0;
      left:0;
      width:60px;
      height:118px;
      background:#fff;
      padding:5px;
    }
    #text {
      filter: alpha(opacity=70);
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
      -moz-opacity: 0.70;
      opacity:0.7;
    }
    #words {
    position:absolute;
      top:0;
      left:0;
      width:60px;
      height:118px;
      background:transparent;
      padding:5px;
    }

Thanks Amzter, I wasn't able to find the right part in the CSS where to put it but oh well....

No problemo mate, glad to help.

I think you should put
<img src="http://z.about.com/d/webdesign/1/0/Y/B/1/shasta.jpg" alt="Shasta" style="opacity:0.5;filter: alpha(opacity=50) ;" /> try that cause that's what it says there. so bascily where u have your image link you should ad that code with the image link.

you should PM ZiNgA quickly and ask him

I generally Google: http://www.google.com.au/search?q=backgr...=firefox-a

SkyDX Wrote:the second thing, how do I make pictures translucent? The original image was a .jpg so I saved it as a .png, added a bit translucency and pointed the CSS to the .png. If I load the theme the picture is still solid.....  Do I need to add something to the CSS to get it translucent?

Just use Photoshop to reduce the opacity.
CSS opacity is difficult with background images, as opacity applies to both text and image.

It's just that IE6 doesn't support PNG transparency.

Well the problem is, I thought it was a picture but it's a CSS object....

I want these parts to be partially translucent:


As far as I noticed, that part isn't a picture but a CSS object and I simply don't know where to put the translucency line....

If anyone wants to take a look for me I uploaded the Theme.

[attachment=1206]

The white background?  I set the background to transparent (ie no colour) then used a semi-transparent PNG image as the background.

Not the white background Zinga, the whole blue thing next to it... ^.^

SkyDX Wrote:Not the white background Zinga, the whole blue thing next to it... ^.^

Same thing - just replace the word "white" in my previous post with "blue".