White Transparency over Blue Background is too Blue!

I know this is not strictly a DW question but hey, I'm going to ask it anyway!
Here's an image of what I want to achieve in a Fireworks screenshot:
The content panel is a white fill with transparency but because it's over Blue, it's still Blue!  I know that's how it works but, I want it to be White or possibly, Manilla.  I'll get the transparent panel by using a .png and the vanishing point words will be a background .png as well.  I'm not sure if I will be better off using a gradient image for <body> and another <div> for the words image but perhaps someone can give me a few clues about how to tackle this?
Here's my Photoshop image:
I have asked the question in the PS forum in the hope there might be some color theory trickery to apply but I'm not if that's a runner.
So, any ideas from a coding perspective?  The only thing I can think of (but haven't tried yet) is to add the words image to the body and the content panel?
Martin

Try this:  Borders added to show divisions. You can remove them.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled </title>
<style type="text/css">
body {
width: 643px;
margin:0 auto;
padding:0;
background:navy;
font:1em/1.5 Verdana, Arial, Helvetica, sans-serif;
color: #FFF;
text-align:center;
#Header {
color: #CCC;
min-height: 100px;
margin:0;
padding: 0;
border: 1px dotted yellow; /**remove this**/
#background {
background:#FFF url(connections02.jpg) no-repeat center top;
text-align:left;
width: 643px;
margin: 0 auto;
border: 1px dotted red; /**remove this**/
#blueLayer {
background:navy;
opacity:0.6;
filter:alpha(opacity=60);
border: 1px dotted silver; /**remove this**/
#mainContent {
width: 350px;
margin:0 auto;
background: #FFF;
color:#000;
padding:0 20px;
border: 1px solid green; /**remove this**/
</style>
</head>
<body>
<div id="Header">
<p>Header</p>
<!--end header -->
</div>
<div id="background">
<div id="blueLayer">
<div id="mainContent">
<p>Your content goes here. Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes delenit ut mazim. Amet iusto cum ex veniam me, anteposuerit commodo et at. Facit sollemnes saepius non lectores litterarum. Insitam eu quod te volutpat tincidunt eua nobis lius per. Iriure molestie dynamicus, erat decima.</p>
<h2>Heading 2</h2>
<p>Your content goes here. Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes delenit ut mazim. Amet iusto cum ex veniam me, anteposuerit commodo et at. Facit sollemnes saepius non lectores litterarum. Insitam eu quod te volutpat tincidunt eua nobis lius per. Iriure molestie dynamicus, erat decima.</p>
<!--end MainContent --></div>
<!--end blueLayer --></div>
<!--end Background --></div> 
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

  • Block white images over colour background

    Possibly a simple question, but I can't find referance about it anywhere.
    I'm trying to place a block white image of hand-drawn text (saved as a psd or/and tiff file with layers so that the surround is transparent) into indesign CS4. Placed over the top of a solid red colour. However when I do this, the image becomes transparent and invisible on the page.
    I've also attempted to do this by importing a greyscale black version (in tiff format), and then converting the colour to either paper, or a white. But with no luck. This could be because indesign treats paper colour or white as transparent, but is there any way to get around this short of changing the image to bitmap and losing quality?

    Should work fine with a psd file, strange... Try this:
    Check if you have a clipping path into your file
    if not:
    - open you image in Photoshop
    - select all you image (Ctrl+A or Cmd+A)
    - Create a new document with transparent background (it should have the size of what you just copied)
    - go back to your first image and with the magic wand select what will be white
    - go back to the new doc,and paste
    - Save to PSD file, do not forget to tick the add layers feature, eventually remove the profile if there is one
    IN Indesign, import you file. you shouldn't have to modify your image to get what you want
    Other idea (kind of old-fashionned but good trick)
    -make your image negative with Ctrl or Cmd + I (black text, white background), you can then flatten the whole thing
    -Convert your grey image to bitmap (1bit) with Threshold 50%
    -save to tiff
    In indesign, import the file, select you image unelect you rimage select it again with the white arrow then change the color to "paper" of whatever color you want.

  • 7th generation ipod nano only displaying white screen with blue horizontal lines

    Hi,
    My 7th generation ipod nano is now only displaying a white screen with blue horizontal lines along the bottom. It still plays music and is recognised in itunes with I connect it to my PC.
    I have reset is and restored it and it is charged.
    Please advise.
    Thanks,
    Jess

    Hi jkjuarez2012,
    Thank you for visiting Apple Support Communities.
    It sounds like your iPod nano is only showing the Apple logo with a white background, and you've tried many good steps including resetting and restoring the device. I know I'd miss my music in this situation.
    Make sure that you followed the steps in this article when restoring your iPod:
    Restoring iPod to factory settings - Apple Support
    If the issue continues after restoring, your iPod nano may need to be serviced. You can use this link to find out more about iPod service:
    If the issue is still not resolved, please read this information on servicing your iPod.
    From:
    iPod nano (7th generation): Hardware troubleshooting - Apple Support
    Best Regards,
    Jeremy

  • In Safari, the top of of the screen is no longer white; it's a dark gray, and everything is in shades of gray. The line that shows a page is loading is now  white instead of blue. Any ideas why it's so dark and in black/white?

    All of a sudden, in Safari, the top of the page is no longer white; instead it's a dark gray, and the bar where you type in a web address is a slightly lighter shade of gray. The rest of the page is in color like always. Also, the line that shows a page is loading is white against the gray background, isntead of the usual blue. Any thoughts?

    Tap "Private" on Safari Screen to disable Private Browsing. When top of screen is white, Private Browsing is off.

  • On my MacBook Pro when I am connected to the internet via an Ethernet cable, Facebook pictures do not load. They show up as white boxes with blue question marks.

    On my new MacBook Pro when I am connected to the internet via an Ethernet cable, Facebook pictures do not load. They show up as white boxes with blue question marks. This also happens on a website editor. But, when I am connected to the internet via Wifi, everything load properly. This is my work computer, so I have to be able to connect through the Ethernet cable to access everything. Please help me!

    I mostly use Safari. But I also tried it on Firefox, Mozilla, and Camino. Mac OS X. It's my work computer, so I've only tried it at the office. I have to be connected through the Ethernet cable to access my files and email on the server.

  • I have signed in to my account and am able to brouse media but not download or purchase anything. The "buy" button is also white instead of blue and nothing happens when I click to buy. I am able to make purchaces on the same account on my I phone as well

    I have signed in to my account and am able to brouse media but not download or purchase anything. The "buy" button is also white instead of blue and nothing happens when I click to buy. I am able to make purchaces on the same account on my iphone as well. What might be causing this issue?

    Having the same problem and i just thought it was me ? So frustrating went to my local Apple store and they told me to re-load Itunes again,Done that but still can not buy songs???????????

  • Photos from the Internet will not load correctly. I get white boxes with blue question marks inside. This has only been happening for the past 3 weeks so I'm not sure why it is happening.

    Photos from the Internet will not load correctly. I get white boxes with blue question marks inside. This has only been happening for the past 3 weeks so I'm not sure why it is happening.

    Yes - email &amp; text work fine but when I use something like Google Images or search a blog with imbedded photos I get the empty white boxes with question marks.  If I click the question mark it opens the photo but I can't possibly do that for EVERY image on EVERY page I search!?!?!  I've rebooted the iPad &amp; my wireless card several times but neither action helped.  Have any clue what I should do now?

  • I get a white screen with blue streaks?  Keep turning on and off until it disappears.

    I get a white screen with blue streaks?  Keep turning on and off until it disappears.

    Try:
    - iOS: Not responding or does not turn on
    - Also try DFU mode after try recovery mode
    How to put iPod touch / iPhone into DFU mode « Karthik's scribblings
    - If not successful and you can't fully turn the iOS device fully off, let the battery fully drain. After charging for an least an hour try the above again.
    - If still not successful that usually indicates a hardware problem and an appointment at the Genius Bar of an Apple store is in order.
    Apple Retail Store - Genius Bar       

  • White sceen with blue dots and an apple logo

    Hi. I have a iMac and when starting it up I get a white sceen with blue dots and an apple logo. Is my computer totally broken?

    Sournds that way however you should take it to your local Apple Store or AASP to be professionaly diagnosed.

  • Brand New IPAD 2 Colours all wrong on camera eg white skin is blue etc

    Brand new IPAD 2. Camera does not appear to be working properly ie poor picture quality and all Colours are wrong on eg White Skin is Blue etc etc

    Any protective plastic film still on the iPad?

  • Well my ipod 4th gen was updated it shut off and now when i try to turn it on it stays on the apple logo for abit then gets stuck on a white screen od blue or mixed colores i really need help fixing this plzz help :(

    Well my ipod 4th gen was updated it shut off and now when i try to turn it on it stays on the apple logo for abit then gets stuck on a white screen od blue or mixed colores i really need help fixing this plzz help

    Try:
    - iOS: Not responding or does not turn on
    - Also try DFU mode after try recovery mode
    How to put iPod touch / iPhone into DFU mode « Karthik's scribblings
    - If not successful and you can't fully turn the iOS device fully off, let the battery fully drain. After charging for an least an hour try the above again.
    - Try on another computer
    - If still not successful that usually indicates a hardware problem and an appointment at the Genius Bar of an Apple store is in order.
    Apple Retail Store - Genius Bar       

  • Screen get a little White-ish and Blue-ish due to After Effects.

    I just downloaded the after effects cs6 from adobe, wanted to play around with it.
    whenever I start the application as usual the application shows up their logo in a square shap and loads all the plugins etc.
    while it loads and starts my screen gets white-ish and blue-ish.
    it's only when I run after effects for the rest of the applications the screen is normal.
    so far i can conclude that there is no problem in my display and it's only a problem when i run after effects cs6.
    it never happened in after effects cs5 but happens in cs6 version.
    i am using late 2011 mbp. 2.4ghz amd radeon 6770m 1gb grahpics. intel i7.
    4gb ram. 10.8.2 osx

    HI @Skarsnik 
    Thank you for your inquiry.
    I grasp you have only had the notebook for 8 days. When you powered it on you got to the password screen but then it went to a black or blank display.  You did a restore back to 4 days ago and now you get a blue Screen instead of the black screen with the cursor.
    I  would try a Refresh your PC to resolve problems Windows 8.
    If you are unable to do the refresh here is a link to Performing an HP system recovery (Windows 8) to take it back to factory.
    If the issue should return I would recommend contacting HP support for assistance as it is  new .
    Please call our technical support at 800 474 6836. If you live outside the US/Canada Region, please click the link below to get a support number for your region.
    World Wide Phone Support
    Good Luck!
    Sparkles1
    I work on behalf of HP
    Please click “Accept as Solution ” if you feel my post solved your issue, it will help others find the solution.
    Click the “Kudos, Thumbs Up" on the bottom right to say “Thanks” for helping!

  • Creating a white gradient over a photo

    I need to create a white gradient text box over a background photo. Please take a look at this sample:
    http://www.pixentral.com/show.php?picture=13EWsrgyHCHak3Aqfn6SvNPkyvbNd
    This was created with the blend tool, but I don't like the hard dropoffs at the edges of the white. I want to create a gradient white going top to bottom, but with an opacity dropoff (with soft edge) so top and bottom are 0 percent as shown.
    The problem is, I can't figure out how to apply different opacities to different parts of the gradient. I'd like to make the center 100 percent, and grade out to zero top and bottom. Any way to do this? Or is there another tool I should be using?
    Thanks,
    Eugene

    It's a dodle.
    Let me introduce you to the wonderfull world of opacity masks.
    Click on the layer (the white box in this case) that you want to fade at the edges, make sure the transparancy window is open (if not: Window>Transparancy) and left click the little arrow in the top right hand corner and click "Make opacity mask".
    Now left click once in the little black box that's just appeared in the Transparancy window.
    Now draw a box exactly over the white box (you can over the side edges with no problems in this instance, but it's best to do best practices).
    Now with this new box selected create a gradient that goes from 100% black to white (in the middle) to 100% black again. You need to make sure it's pure black, I don't work in CMYK normally, but I know that if I am working in RGB I need to make sure I am using black and white RGB values and not CMYK (that could be "fixed" in CS4).
    Make sure the gradient rotation is going the right way and your pretty much done.
    You can alter the colour saturation levels to tweak the transparancy level.
    Once your done click the left box in the Transparancy window.
    Now your done, the Opacity Mask will remain attatched to your artwork until you de-tatch it.
    Hope that helps and is actually what your asking for.
    Regards
    Paul

  • Gif/png with mask/clipping path over a background

    I'm fluent in Photoshop, Illustrator and am decent in Flash
    (but it's been a while).
    What I'm trying to do is to have multiple masked objects
    (images - not vector) fade in and out over a background that is
    also in motion. My client has provided me with a psd with all the
    images, text etc. on layers.
    I've made gifs w/transparency but no matter what I do,
    there's a white line around the edge of the graphic. Image was made
    in PShop by erasing everything except what was desired and saved as
    gif/trans. White edge appears due to being on a dark background...I
    edit the gif in PShop and erase the whole outer edge, save, update
    and it's still there!
    I've messed a bit with the mask feature in Flash and am
    stumbling thru Fireworks editing, but just cant seem to make this
    work right!
    I can't find a source of info that is in-depth enough to help
    me out.
    If you have any suggestions, I (not to mention my client!)
    will very much appreciate your wisdom!

    You were absolutely right! It wasn't that hard...thanks to
    you!
    (Hope you like beer, btw!)
    Now all I have to do is fix the walls where I was banging my
    head against 'em!
    Thanks again!

  • Problem with PDF 1.3-Export: Photoshop-Files with transparency over InDesign colored objects

    Hello!
    I'm using InDesign CS6.
    I'v finished now a layout for a folder, and I put a photoshop-image with transparency over a InDesign-rectangle which I have filled with a cmyk-color in yellow.
    When I export a PDF with the Settings "PDF X-3:2002" (with PDF-Standard 1.3) the Photoshop-image shows uggley jagged edges at the border to the InDesign-colored background. However, the Photoshop-images which are over another bitmap-image (as background), this images don't show this annoying edges.
    When I export to PDF-Standard 1.4 the problem doesn't occor, however my printing-service requests PDF 1.3.
    I know, the workaround for this problem is, to replace the yellow background-color with an bitmap-file with the same color, but is there any other option to get a correct result without this more time-consuming image trick?
    I think it has to do with the transparency reduction which is necessary if using PDF 1.3. When I examine the PDF-File in Illustrator, this edges occurs mostly at the borders from the tiles in which the image is cut during the transparency reduction process. Although, if I open the rendered PDF in Photoshop this jagged edeges are visible, so it is definitly a render error.
    I would be glad if someone of you has a solution for this problem, in the attachment is an image which illustrate the problem.
    Best wishes

    Find another printer.
    End of problem. It really saddens me to think that these Luddites are
    still in business making no effort to move into the 21st century.
    Bob

Maybe you are looking for