Adobe Community: make the body transparent

jeffdogle Calculating status...

Currently Being Moderated

make the body transparent

Apr 27, 2012 8:36 AM

I am new to dreamweaver and i am having and impossible time trying to get the body of the website to be transparent. I placed an image as the background and want it to show through, but i have yet to figure out how to do so. I am using cs4 dreamweaver.

572 Views 3 Replies Latest reply: adninjastrator, Apr 27, 2012 5:52 PM

Replies

3,732 posts
Oct 15, 2010

Currently Being Moderated

1. Sudarshan Thiagarajan,

Apr 27, 2012 9:36 AM in reply to jeffdogle

Report

You could use CSS3 to achieve this. CSS2 will help you do it too but you'll experience cross-browser issues more than what you would with CSS2. CSS3 is known to work with Firefox 3.6+, Chrome & IE9+ only.

Your CSS:
@charset "UTF-8";
/* CSS Document */
.container {width:540px; padding:0 0 10px; margin:0 auto 30px;}

#text {
    z-index:1;
    padding:20px 280px 20px 20px;
    margin:0 auto;
    color:000;

}

#text h2 {margin:0 0 1em; text-align:left; font-size:22px;}

#text:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:url(1.jpg) no-repeat;
    opacity:0.2;
}

/*
#text:hover:before {
    opacity:0.5;
}
*/

Your HTML:
<!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=UTF-8" />
<title>Test</title>
<link rel="stylesheet" href="default.css" />
</head>
<body>
<div id="text">
    <h2>TEST</h2>
    <p>This is some test text</p>
</div>
</body>
</html>

In the CSS, you'd notice that the last #text:hover:before is commented out. You could uncomment it if you want your background opacity to change while you hover the mouse over it.

I've uploaded these sample files here:
No mousehover effect - http://forwardfocus.in/sandbox/transbg/index.html
Mousehover effect - http://forwardfocus.in/sandbox/transbg/index1.html

Trust this helps.

Message was edited by: Sudarshan Thiagarajan to add sample links

|
Mark as:
Currently Being Moderated

2. Nancy O.,

Apr 27, 2012 3:58 PM in reply to jeffdogle

Report

It's funny how 2 people can read the same message and interpret it differently. Not to diminish Sudarshan's answer in any way. But I think this question has less to do with transparency and more about making the background-image show up.

1) Define a local site folder in DW. Sites > Manage Sites > New...
Without this critical first step, DW cannot properly manage assets for you.

2) Open your image in your favorite graphics app and Save for Web as an optimized .jpg, .gif or .png. NOTE: web images need to be RGB; not CMYK which is used in print.

3) See CSS background tutorial below:
http://www.w3schools.com/css/css_background.asp

Hope this helps. If not, please post a link to your problem page.

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

|
Mark as:
Currently Being Moderated

3. adninjastrator,

Apr 27, 2012 5:52 PM in reply to jeffdogle

Report

get the body of the website to be transparent. I placed an image as the background and want it to show through
I agree with Nancy, this statement can certainly be taken two completely different ways.
If by body you mean <body>, then that's one thing. If by body you mean "website content", then that's a completely different issue.
Seems like you are looking for a background image... not anything to do with "image" transparency.
Check out all the info already posted.
Best wishes,
Adninjastrator

|
Mark as:

Dreamweaver

make the body transparent

Apr 27, 2012 8:36 AM

More Like This

Bookmarked By (0)

Answers + Points = Status