Wordpress Themes - WP Forum at BFA - [SOLVED] Transparency blend with background image

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)

- - [SOLVED] Transparency blend with background image (http://forum.bytesforall.com/showthread.php?t=677)

[SOLVED] Transparency blend with background image

I am currently using Atahualpa 3.2 and WordPress 2.7. Trying to determine if there is anyway to get the Blog title text to utilize transparency settings in a way that will allow it to blend with the random header image instead of being place in a separate <div> on top of the image?

I can set the alpha settings for the text and not use a background color, but this causes the text to be jagged when it is overlaid on top of the background image. You can smooth the text by giving the box a background color (which I don’t want to do, not even white) or by actually setting the background to the url of the header image. The problem with the second option is that you lose the random background image benefit (which I want to keep).

Does anyone know some way to work around this?

It seems you already accomplished that but the opcity is a bit low with 0.2

If you want to have a huge smooth font you'd need to use graphics or Flash.

Create a transparent PNG and in bfa_header_config.php change

PHP Code:


		
			
        // END: If Header Opacity 
        if ( $bfa_ata_overlay_blog_title' == "Yes" OR $bfa_ata_overlay_blog_tagline == "Yes" ) {
        $header_image .= '<div class="titleoverlay">' . 
            ( $bfa_ata_overlay_blog_title == "Yes" ? '<h1 class="blogtitle"><a href="' . get_option('home') . '/">' . get_bloginfo('name') . '</a></h1>' : '' ) . 
            ( $bfa_ata_overlay_blog_tagline == "Yes" ? '<p class="tagline">' . get_bloginfo( 'description' ) . '</p>' : '' ) . 
            '</div>';
        }

PHP Code:


		
			
        // END: If Header Opacity 
        if ( $bfa_ata_overlay_blog_title' == "Yes" OR $bfa_ata_overlay_blog_tagline == "Yes" ) {
        $header_image .= '<div class="titleoverlay">' . 
            ( $bfa_ata_overlay_blog_title == "Yes" ? '<a href="' . get_option('home') . '/"><img src="/path/to/logo.gif" alt="'.get_bloginfo('name').'" /></a></h1>' : '' ) . 
            ( $bfa_ata_overlay_blog_tagline == "Yes" ? '<p class="tagline">' . get_bloginfo( 'description' ) . '</p>' : '' ) . 
            '</div>';
        }

For IE6, you'll also need to integrate a PNG transparency fix into the theme http://www.twinhelix.com/css/iepngfix/

Flynn - actually the code I inserted makes no difference. I have pulled it out now and you will see that the result is the same, the light color of the text just makes it seem like there is some transparency going on. Here is a good page that explains what I am trying to do: http://www.mandarindesign.com/opacityblending.html

Maybe your code will achieve this, but essentially I need the alpha effect to occur as a process of using the random header image in creating the blend with the text, but the setup creates the new <div> with a box and its own background - if the background in that process could match the random one that is chosen I could get it to work.

The div containing the blog title doesn't need to have a background, it can be transparent, then it would always "blend" with the background image. Your problem seems to be that the borders of the text aren't smooth, but they aren't smooth at the URL you posted either. Actually I didn't see anything there that you couldn't achieve with Atahualpa right now, without any file edits. You may have applied the opacity in a wrong way.

HTML Code:

.xxxxxx {

    opacity: .4;

    -moz-opacity: .4;

    filter: alpha(opacity=40);

    }

Flynn,

I did a change that achieved what I wanted by using the following for the <h1>

<h1 class="blogtitle" style="width:1000px;height:130px;background: url(' . $selected_header_image . ') no-repeat;">

Thanks for your help though, knowing where to make the change I was able to think through that fix.