Wordpress Ninja Forum
September 10, 2010, 07:04:52 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Wordpress Ninja Forum goes live!  Please make sure you register, even if you were previously registered with the blog.  Apologies for any inconvenience.
 
  FORUM HOME WPNINJA HOME Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Header image customization - overlay a transparent image on top of photos?  (Read 581 times)
0 Members and 1 Guest are viewing this topic.
coopdog
Shodan
*

Ninja Rank: 0
Offline Offline

Posts: 1


View Profile
« on: January 05, 2009, 08:09:14 PM »

Hi Paul
Just read your post about replacing the WP header text with an image. I am new to CSS and not sure if I am on the right track here. Right now I am using a random image generator code from:
http://ma.tt/scripts/randomimage/

It works well, as you can see at my site - www.frontierservicedesign.com.

Now what I want to do is replace the standard overlay text (set up in WP admin settings) with a graphic file that includes my company logo and a tagline that will transparently OVERLAY the background images that are now being randomly selected. Right now, the header section of my style.css looks like this:

/* begin Header */
div.Header
{
  margin: 0 auto;
  position: relative;
  width: 888px;
  height: 175px;
}

* html div.Header
{
  font-size: 1px;
}

div.Header  div
{
  width: 100%;
  height: 100%;
  background-image: url('images/header-images/random.php');
  background-repeat: no-repeat;
  background-position: center center;
  text-align: left;
}
/* end Header */

In reading your post, it looks like I am already using the "background-image" for my randomized background photos. How or where do I insert my "overlay" graphic that will show my logo/tagline on top of these images. I want to be able to "see thru" the top image's transparent sections to see the photos beneath.

Thanks - this is a very useful site!
Coopdog
Logged
WPNinja
Wordpress Ninja
Administrator
Grandmaster
*****

Ninja Rank: 10000
Offline Offline

Posts: 5035


Ninja Paul


View Profile WWW Email
« Reply #1 on: February 17, 2009, 11:10:44 PM »

Hi there,

well, it's easy, but when you look at compatibility it gets a bit complex, as IE6 and under don't like transparent PNGs.  The best thing i could do is point you to this article which is excellent in describing exactly what you need.

cheers,

WPNinja
Logged

"Looking for the meaning of life, one man can discover the order of the universe. To discover the truth, to achieve a higher spiritual state - that is the true meaning of Ninja" - Hatsumi Soke
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.5 | SMF © 2006-2007, Simple Machines LLC Valid XHTML 1.0! Valid CSS!