Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,680
    Thanks
    28
    Thanked 4 Times in 4 Posts

    Trouble with opacity

    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.


    Here is my page:

    http://professional-world.com/

    And this is the HTML:

    Code:
    <!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.


    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #3
    Senior Coder
    Join Date
    May 2006
    Posts
    1,680
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Hi,

    Thanks for your suggestion.

    I tried it ...

    Code:
    <!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


    Did I do something wrong ?


    Thanks.

    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 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/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Jeddi, the actual issue looks like it's wtih your css. This:

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

    Code:
    #bk_image {
    		position: absolute;
                    top:0px; 
                    right:0px;
    		height:100%;
    		width:100%;
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •