What is the css to create transparent background color for divs.

Hello CSS experts,  

It's been awhile since I did css on my own, and for some reason I can't wrap my mind around this very simple formatting for a div...

My html is  <div temprop="articleBody">

and I want to use my external  css stylesheet to create a transparent body color for that div.

And while I'm at it,I also want to create a transparent body color for the following div:

<class="home_fir col-md-12">

So my question is, what is the CSS to make the above happen -- compatible with most modern browsers.

Thanks
Rowby
LVL 9
Rowby GorenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ryan ChongCommented:
try refer to

How To Apply CSS Opacity To Background Color Only?
https://www.designcise.com/web/tutorial/how-to-apply-css-opacity-to-background-color-only
0
Rowby GorenAuthor Commented:
Hi Ryan,

Thanks for the link.  I will check it out.

In the meantime please show me the external css style sheet example if it was just a solid color.  For example "red" for the following html

 <div temprop="articleBody">

Open in new window

and
<class="home_fir col-md-12">

Open in new window


Thanks
...Rowby.
0
Snarf0001Commented:
I think all you're looking for is background:transparent?
And just to verify, you do actually have a property called "tempprop", not a class that you're assigning to "articleBody"?
Would be curious on why that's not a class, but regardless:

[tempprop='articleBody'] { background: transparent; }

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Rowby GorenAuthor Commented:
Thanks, Snarf

And if I want the background color to be solid red (not transparent) for this html

<class="home_fir col-md-12">

What exactly would thecss look like.

Rowby
0
Snarf0001Commented:
Well need to confirm first, "<class>" isn't valid, no such element exists, which was part of the confusion.
Do you mean "<div class='xxx'>"?

in which case was the first one also supposed to be "<div class="articleBody">"?
0
Snarf0001Commented:
If it is supposed to be <div class="home_fir col-md-12">, then to match that ONLY if both classes are present, then use:

.home_fir.col-md-12 { background:#ff0000; }

Open in new window

0
Rowby GorenAuthor Commented:
Hi.  

I realize now, to help the CSS Experts I should simply have included the website that I am to add the transparent background to.  Here it is.  http://www.wacd.ucla.edu/

The main text area is difficult to read .  So I want to add a transparent grey background color to that section of the page to make it easier to read   (I realize I may also have to change the text color to black instead of blue.  But for now i just want to add that transparent grey backgrounds behind  the main article/ body area. )

The divs I provided in my initial question seem to cover that section of the page that needs to be fixed.

I would prefer not to touch the html since it was created by someone else.
0
Snarf0001Commented:
Okay, in that case it is the .home_fir.col-md-12  i mentioned that you should use, but transparent and grey are two different things.

Transparent:
.home_fir.col-md-12 { background:transparent; }

Open in new window


Grey:
.home_fir.col-md-12 { background:#cccccc; }

Open in new window


"Partially transparent grey"
.home_fir.col-md-12 { background:rgba(100, 100, 100, 0.5); }

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rowby GorenAuthor Commented:
Thanks.  

Looks good. I’ll test it later when I get home

Rownpby
0
Rowby GorenAuthor Commented:
Hi Snarff,

That worked for the "Partially transparent grey"
.home_fir.col-md-12 { background:rgba(100, 100, 100, 0.5); }

But can you get it to work spedifically for the div called   <div temprop="articleBody"> which (according to firebug)  covers more of the home page main column, almost down to the footer area.

Thanks
Rowby
0
Snarf0001Commented:
I think it's "itemprop" you're looking for, that's all I see in the page.
In either case, would be:

[itemprop='articleBody'] { background:rgba(100, 100, 100, 0.5); }

Open in new window

0
Rowby GorenAuthor Commented:
Got it.

Final question (hopefully)

On another page I have this html

<div id="body-left-only" class="main_body_class col-md-7 col-sm-8">

How would I write the css for the above to have  { background:rgba(100, 100, 100, 0.5); }

Thanks
Rowby
0
Snarf0001Commented:
Easiest would be

#body-left-only { xxx }

Open in new window


But looks like you're using that in most of the other pages as well.  If you put that code in the stylesheet it of course will apply to every page.
0
Rowby GorenAuthor Commented:
Hi Snarf,

#body-left-only { xxx }   seems to solve all my problems.

Let me run the results past the people who run the site and then I'll award the points.

Thanks so much!

Rowby
0
Rowby GorenAuthor Commented:
Hello   Sorry for the huge delay in awarding the points.  I want give 450 Points to Snarf for Best and 50 to Ryan Chong  

But I don't see a way to do this in what looks like an apparent new closing interface.

Can the Moderator do that for me?  Or is their a way to do that that I right now can't figure out.

Thanks
Rowby
0
Ryan ChongCommented:
i guess you can simply click more than 1 comment and the wizard will tell you if you want to manually adjust the point allocation in the next step.

check this out:

How do I accept multiple comments as my solution?
http://support.experts-exchange.com/customer/portal/articles/608596
0
Rowby GorenAuthor Commented:
I think the Moderator has somehow locked this question.  At the moment I see no way to select anything, including "Best Solution" or "Assisted Solution".  

I've had no problems selecting "Best Solution" and "Assisted Solutions" in the past.  But it seems to disappeared from this question - which is why I think it is locked for some reason.

I'll request an assist from the Moderator on this one.

Rowby
0
Ryan ChongCommented:
not too sure if there's a locked feature available...

but to get a moderator  to handle this, you can also click the "report question" option
0
Rowby GorenAuthor Commented:
Hi

I clicked the "report question" and requested clarification.

Rowby
0
Ryan ChongCommented:
sure, but weird, seems no one replied after your last comment, since 5 days ago
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.