?
Solved

header image see-thru

Posted on 2012-09-21
9
Medium Priority
?
484 Views
Last Modified: 2012-09-24
How do i make my header image (bird and logo are sitting on it) transparent so that you can see some of the leaves through it?

.twoColFixRtHdr #header {
      background: #fff;
      background-image:url(img/header_white.gif);
      height:115px;
      
}

http://plymouthwisconsin.com/chamber_fall4.css
http://plymouthwisconsin.com/fall4.html
header-white.gif
0
Comment
Question by:nsitedesigns
  • 6
  • 2
9 Comments
 
LVL 16

Assisted Solution

by:s8web
s8web earned 480 total points
ID: 38422653
I would do it as a transparent png.
header-white.png
0
 
LVL 16

Assisted Solution

by:s8web
s8web earned 480 total points
ID: 38422661
You'll have to remove where you had the background color:

Make this:
.twoColFixRtHdr #header {
      background: #fff;
      background-image:url(img/header_white.gif);
      height:115px;
}

This:
.twoColFixRtHdr #header { 
	background-image:url(img/header_white.png);
	height:115px;
} 

Open in new window

0
 
LVL 16

Expert Comment

by:s8web
ID: 38422662
The image will render as solid grey in IE6 if you care about that sort of thing. I don't.

IE6 doesn't do transparent anything without javascript or a hack.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 16

Assisted Solution

by:s8web
s8web earned 480 total points
ID: 38422672
Here's the source file if you want to adjust the opacity. If you don't have Photoshop, you can use GIMP http://www.gimp.org/
header-white.psd
0
 

Author Comment

by:nsitedesigns
ID: 38422850
I have ps.  I thought opacity was rendered in css.  I changed opacity to 66% of header image in ps and uploaded it.  Now, it doesn't even display.

http://plymouthwisconsin.com/fall4.html
0
 
LVL 16

Assisted Solution

by:s8web
s8web earned 480 total points
ID: 38422899
You need to fix your css. This is what you currently have:

/* Line 103 */
.twoColFixRtHdr #header
{
}

Make it:

.twoColFixRtHdr #header { 
	background-image:url(img/header_white.png);
	height:115px;
} 

Open in new window

0
 
LVL 16

Expert Comment

by:s8web
ID: 38422901
Opacity in CSS has limited support.
0
 

Author Comment

by:nsitedesigns
ID: 38423024
I simply forgot the ; after the background image.  I uploaded css and don't see a change.  

http://plymouthwisconsin.com/fall4.html

I attached my ps file.  can you tell me what I am doing wrong.
0
 
LVL 43

Accepted Solution

by:
David S. earned 1520 total points
ID: 38423342
The thing about the opacity property is that it affects all child nodes, including text and other elements. To get a partially transparent background without affecting child nodes, one can use a PNG and/or RGBA. I prefer using RGBA with a PNG fallback for older browsers that don't support RGBA.

http://24ways.org/2009/working-with-rgba-colour
http://dorward.me.uk/www/css/alpha-colour/
http://lea.verou.me/rgba.php/

Opacity in CSS has limited support.
Support for opacity is pretty good. You just have to remember that versions of IE before 9 need the proprietary filter property.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question