Need some advise with coding Opacity in my background

Question

I have this code

<h2 style="background-color: #c0c0c0; padding: 1em; max-width: 15em; opacity: 0.2; ;margin: 1em 10px; text-align: right;"><strong>HANDMADE TIES
</strong>DISCOVER NOW</h2>
&nbsp;

But I cannot figure out how to make the background opacity only, while text remains of its own color. Also I would like the text Handmade ties to be H2 while Discover now to be a paragraph.

Please show your code. – Daniel Murphy Dec 25 '18 at 03:32 — Daniel Murphy, Dec 25 '18 at 03:32
Daniel Murphy the code is in my post – Boundless Dec 25 '18 at 18:44 — Boundless, Dec 25 '18 at 18:44

score 1 · Answer 1 · answered Dec 25 '18 at 06:22

1

Opacity will the effect all styles of the element. Try to Use

background: rgba(192,192,192, 0.2);

Hope it helps.

answered Dec 25 '18 at 06:22

Anji

689
1
5
24

hello Anji, thanks a lot. I have tried with this code but the background is totally transparent and not sure why it changed the position of the text from right to left. Not sure why. :( – Boundless Dec 25 '18 at 18:51

Falguni Prajapati · Answer 2 · 2018-12-27T10:40:27.133

1

<h2 style="background-color: rgba(192, 192, 192, 0.5); padding: 1em; max-width: 15em;  ;margin: 1em 10px; text-align: left;"><strong>HANDMADE TIES
</strong>DISCOVER NOW</h2>
&nbsp;

edited Dec 27 '18 at 10:40

answered Dec 25 '18 at 06:29

Falguni Prajapati

129
7

Hey Falguni thank you so much but it doesn't work, it changed the location from right to left and I can't see the box. it's totally transparent. – Boundless Dec 25 '18 at 18:44
Now you can check my answer .You can see left align text and box with transparent gray color – Falguni Prajapati Dec 27 '18 at 10:41

Varun Setia · Answer 3 · 2018-12-25T07:29:21.030

0

Seems like you are trying to make a background colour transparent and want the font content to remain untouched from background. The possible solution is you can add a transparent background in separate div and the content in separate div. Both div shall have different z-index.

So it's code is like this:

<html>
<head>
<style>
#background{
position:fixed;
background:#c0c0c0;
opacity:0.2;
width:100%;
height:100%;
top:0;
left:0;
z-index:1;
}


#content-wrapper{
position:absolute;
z-index:2;
padding: 1em; 
max-width: 15em;
margin: 1em 10px; 
text-align: right;
}
</style>
</head>
<body>

<div id="background">
</div>
<div id="content-wrapper">

<h2>HANDMADE TIES</h2>
<p>DISCOVER NOW</p>


</div>


</body>
</html>

edited Dec 25 '18 at 07:29

answered Dec 25 '18 at 07:20

Varun Setia

165
1
11

@ Varun Setia thank you so much for your input, but I have tried this code and it made everything disappear. – Boundless Dec 25 '18 at 18:37
That's so unfortunate, had you tried adjusting max-width with respect to content. Also would it be possible for you to share the screenshot? I can have a look at the issue. – Varun Setia Dec 26 '18 at 03:20
thank you all. All sorted. cheers – Boundless Dec 28 '18 at 14:08

Need some advise with coding Opacity in my background

3 Answers3