...

View Full Version : Trouble with opacity



jeddi
01-19-2013, 09:43 AM
Hi,

I have managed to apply opacity,
but I really only wanted it to apply to the background image.

Instead it has applied to the whole page. :eek:


Here is my page:

http://professional-world.com/

And this is the HTML:


<!DOCTYPE HTML>
<html>
<head>
<title>Professional World</title>
<meta name="keywords" content="NA">
<meta name="description" content="The World of Professionals">
<meta name="revisit-after" content="2 days">
<meta name="robots" content="all, index, follow">
<meta name="author" content="SimplePage.net">
<meta name="Rating" content="General">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="/sys_images/favicon.png" type='image/png'>
<link rel="icon" href="/sys_images/favicon.png" type='image/png'>
<link rel='stylesheet' type='text/css' href='a_style.css' >


<style type="text/css" media="all">
html {
font-family:Helvetica,Arial,sans-serif;
background: url(http://professional-world.com/images/Spiders_004.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity:0.2;
-moz-opacity:0.2;
-webkit-opacity:0.2;
}
</style>
<style type="text/css" media="all">
#mainC {
width:100%;
margin:0px auto;
overflow: hidden;
}

#mainL {
width:100%;
float:left;
}

#mainR {
width:100%;
float:right;
}

</style>

<br>This is the Background image url: professional-world.com/images/Spiders_004.jpg<br>This is the Header image url: trees.jpg
</head>
<body>

<noscript>
<p>This site needs Javascript to work properly. PLEASE ENABLE JAVASCRIPT.</p>
</noscript>


<div id="mainC">

<div style="float:left; width:100%; height:260px; margin:20px 50px 0 50px; ">

<div style="float:left; margin:10px 0 0 100px ; ">
<span style="font:Helvetica,Arial,sans-serif; font-size:20px; color:#000000;">Professional World</span>
<span style="font:Helvetica,Arial,sans-serif; font-size:16px; color:#000000;">The World of Professionals</span>
<br><br>
<div style = "margin: 0 auto;"><img alt="Professional World" title = "Professional World" src="/images/trees.jpg" ></div></div>
<Div style="float:left; width:80%; margin:20px auto; padding: 10px; border:1px solid darkblue;" >
<div style = "margin: 10px auto;">
<span><a href="http://www.simplepage.net">SimplePage.net</a>&nbsp; &nbsp; &nbsp; &nbsp;
<a href="http://the_link.htm">Privacy Policy</a>&nbsp; &nbsp; &nbsp; &nbsp;
<a href="http://the_link.htm">Terms and Conditions</a>&nbsp; &nbsp; &nbsp; &nbsp;
<a href="http://the_link.htm">Earnings Disclaimer</a>
</span>
</div>
</div>
</div>
</div>


How do I restrict the opacity to ONLY the background image ?

Thanks.


.

SB65
01-19-2013, 10:56 AM
The simplest and most cross-browser friendly way to do what you want would be to to create your background image and change the opacity of the image.

Alternately, create a separate absolutely positioned div to act as the background for the whole page, and set the opacity on that div only.

As it stands you are setting the opacity on the html element and hence the whole page is affected.

jeddi
01-19-2013, 11:31 AM
Hi,

Thanks for your suggestion.

I tried it ...



<!DOCTYPE HTML>
<html>
<head>
<title>Professional World</title>
<meta name="keywords" content="NA">
<meta name="description" content="The World of Professionals">
<meta name="revisit-after" content="2 days">
<meta name="robots" content="all, index, follow">
<meta name="author" content="SimplePage.net">
<meta name="Rating" content="General">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="/sys_images/favicon.png" type='image/png'>
<link rel="icon" href="/sys_images/favicon.png" type='image/png'>
<link rel='stylesheet' type='text/css' href='a_style.css' >



<style type="text/css" media="all">
#bk_image {
absolute position: top:0px; right:0px;
height:100%;
width:100%;
font-family:Helvetica,Arial,sans-serif;
background: url(http://professional-world.com/images/Spiders_004.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity:0.2;
-moz-opacity:0.2;
-webkit-opacity:0.2;
}
</style>


<style type="text/css" media="all">
#mainC {
width:100%;
margin:0px auto;
overflow: hidden;
}

#mainL {
width:100%;
float:left;
}

#mainR {
width:100%;
float:right;
}

</style>

<br>This is the Background image url: professional-world.com/images/Spiders_004.jpg<br>This is the Header image url: trees.jpg
</head>
<body>

<noscript>
<p>This site needs Javascript to work properly. PLEASE ENABLE JAVASCRIPT.</p>
</noscript>


<div id="bk_image"> </div>

<div id="mainC">

<div style="float:left; width:100%; height:260px; margin:20px 50px 0 50px; ">

<div style="float:left; margin:10px 0 0 100px ; ">
<span style="font:Helvetica,Arial,sans-serif; font-size:20px; color:#000000;">Professional World</span>
<span style="font:Helvetica,Arial,sans-serif; font-size:16px; color:#000000;">The World of Professionals</span>
<br><br>
<div style = "margin: 0 auto;"><img alt="Professional World" title = "Professional World" src="/images/trees.jpg" ></div></div>
<Div style="float:left; width:80%; margin:20px auto; padding: 10px; border:1px solid darkblue;" >
<div style = "margin: 10px auto;">
<span><a href="http://www.simplepage.net">SimplePage.net</a>&nbsp; &nbsp; &nbsp; &nbsp;
<a href="http://the_link.htm">Privacy Policy</a>&nbsp; &nbsp; &nbsp; &nbsp;
<a href="http://the_link.htm">Terms and Conditions</a>&nbsp; &nbsp; &nbsp; &nbsp;
<a href="http://the_link.htm">Earnings Disclaimer</a>
</span>
</div>
</div>
</div>
</div>


But I did not get any background image displaying :confused:


Did I do something wrong ?


Thanks.

.

Excavator
01-19-2013, 06:19 PM
Hello jeddi,
Some errors in your layout should be fixed first. See the links about validation in my signature line.

I have a demo for opacity here (http://nopeople.com/CSS%20tips/opacity/index.html) that might help you.

Something that might help instead, since it appears you want this image to fill the screen in various resolutions - http://johnpatrickgiven.com/jquery/background-resize/

SB65
01-20-2013, 09:25 AM
Jeddi, the actual issue looks like it's wtih your css. This:


#bk_image {
absolute position: top:0px; right:0px;
height:100%;
width:100%;

should be


#bk_image {
position: absolute;
top:0px;
right:0px;
height:100%;
width:100%;



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum