Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,154,125 members, 7,821,862 topics. Date: Wednesday, 08 May 2024 at 08:17 PM

Using Opacity On Background Image - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Using Opacity On Background Image (1067 Views)

Yahoomail Background Image Advert / Help!!! Please Who Knows How To Add A Clickable Background Image On .com / How Do I Randomly Change Background Image Of My Pages (2) (3) (4)

(1) (Reply) (Go Down)

Using Opacity On Background Image by Nobody: 6:57am On Jun 24, 2012
Hi Guys,

I have an issue with something am working on. I have used an image as a background on a page with opacity on it, but the content in the container doesn't show fine.

What can i do? See codes below:

#home_form {
width:730px;
height:300px;
float:right;
background-image:url(images/form_bg.jpg);
margin-top:90px;
margin-bottom:40px;
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
opacity:0.5;
-moz-opacity: 0.50;
}
#box_text {
width:333px;
height:210px;
float:left;
margin-left:20px;
padding-top:25px;
}
Re: Using Opacity On Background Image by Nobody: 9:29am On Jun 24, 2012
Mierda! Why can you not put a test page up somewhere so that we can see it and possibly work on it? I can read and write, but i cant process codes in my head nao?
Re: Using Opacity On Background Image by Nobody: 1:08pm On Jun 24, 2012
Work is still in progress, so i cant put anything up online yet.
Re: Using Opacity On Background Image by yawatide(f): 1:31pm On Jun 24, 2012
^^^Come one man!

Why did you bother posting your question if you aren't done. A suggestion: You can still post a partial page, even if it is dummy content with that background. Based on your description, we can't help without seeing something.

Finally, you should seriously look at the concept of progressive enhancement. Websites don't have to look 100% the same across the board. I mention this cos i notice you have some webkit- and ie-specific css code above.

good luck!
Re: Using Opacity On Background Image by Nobody: 2:01pm On Jun 24, 2012
I wish i can post the temp site, inline with the terms with the client i cant. i hope you understand.
Re: Using Opacity On Background Image by Nobody: 5:13pm On Jun 24, 2012
Bros! I dont like insulting people, but cant you just get an image, any image - does not need to be related to what you are doing.

Add the stylesheet to it and give us a graphical represenation of what you are talking about so that we can look into it. . . . . am outa here!!!!!!
Re: Using Opacity On Background Image by Nobody: 6:35pm On Jun 24, 2012
Re: Using Opacity On Background Image by Nobody: 6:54pm On Jun 24, 2012
CArAmBa!!!! Iz tHiS pOsTeR fOr rEaL
Re: Using Opacity On Background Image by Nobody: 8:45pm On Jun 24, 2012
Sup with you guys? Is the question not straight forward enough?

*dhtml:
CArAmBa!!!! Iz tHiS pOsTeR fOr rEaL

Are you for real? What sort of dumb-ass question is that?
Re: Using Opacity On Background Image by Nobody: 8:58pm On Jun 24, 2012
Here you go:

The food is the main background, the container with the opacity is the black one and the content is the "recipe".

See image attached.
Re: Using Opacity On Background Image by yawatide(f): 9:42pm On Jun 24, 2012
I have an issue with something am working on. I have used an image as a background on a page with opacity on it, but the content in the container doesn't show fine.

The content in the container shows fine for me there, based on the screenshot
Re: Using Opacity On Background Image by Nobody: 9:56pm On Jun 24, 2012
@Yawa, its inheriting the opacity of the parent container.
Re: Using Opacity On Background Image by Nobody: 8:17am On Jun 25, 2012
Re: Using Opacity On Background Image by doncigalo: 8:42am On Jun 25, 2012
@dhtml Are you surprised..guess the truth hurts mate

@adeniyi83 Without seeing full source code I really cant comment (what browser are you even using ?) but IF there's nothing wrong with your code then I've got a couple of suggestions for you

1. Try to force IE7 and IE8 emulation and see what happens :
<meta http-equiv="X-UA-Compatible" content="IE=7" /> ----------IE7
<meta http-equiv="X-UA-Compatible" content="IE=8" /> ----------IE8

2. Specify your page as a HTML5 webpage :
<!DOCTYPE html>

3.Use CSS cross browser opacity code that covers all browsers:

/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* IE 5-7 */
filter: alpha(opacity=50);

/* Netscape */
-moz-opacity: 0.5;

/* Safari 1.x */
-khtml-opacity: 0.5;

/* Good browsers */
opacity: 0.5;


Hope this helps ..
Re: Using Opacity On Background Image by Nobody: 8:56am On Jun 25, 2012

(1) (Reply)

Start up company Needs A Low Budget Website / Please Help Me Review This Blog... / .

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 18
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.