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 ChongSoftware Team Lead, ex-Business Systems Analyst , ex-Senior Application EngineerCommented:
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
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.
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

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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
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">"?
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

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.
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

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
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
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

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
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.
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
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
Ryan ChongSoftware Team Lead, ex-Business Systems Analyst , ex-Senior Application EngineerCommented:
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
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
Ryan ChongSoftware Team Lead, ex-Business Systems Analyst , ex-Senior Application EngineerCommented:
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
Rowby GorenAuthor Commented:
Hi

I clicked the "report question" and requested clarification.

Rowby
Ryan ChongSoftware Team Lead, ex-Business Systems Analyst , ex-Senior Application EngineerCommented:
sure, but weird, seems no one replied after your last comment, since 5 days ago
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.