Help Opacity / Div Issues

[Seahomie]

I don't know if this is even possible, but I've found that I don't want my text to be transparent along with a background image, and I know that anything inside a div specified under "opacity" will have every element inside it transparent to some capacity. My solution? Make another div and overlap it on top. Is that possible? I have no idea, but I would love some help if at all possible. I have no current education of CSS so if you reference that, it won't help much whatsoever. Thank you!

Spoiler: What it is

Why won't this bloody work?

Spoiler: The Code

[centerblock=70][div=background:url('https://hdqwalls.com/download/mount-fuji-beautiful-view-40-2560x1700.jpg') repeat center fixed;background-size: 85% 100%;border:2px white solid; padding:10px;width:800px;margin-left:50px;][div=background:url('https://data.whicdn.com/images/255018599/original.gif'); border:white solid 2px; margin:20px;height:360px;opacity: .6;][/div][div=border:white solid 1px;height:360px;overflow-y:scroll;opacity:1;]
Why won't this bloody work?










[/div][/div][/centerblock]

 

[fluticasone]

Yup! That's basically how you'd do it. You can use negative margins or positioning to achieve the effect.
You'll need to have your text div outside of the background div, then adjust margins/positioning to get them to overlap exactly c:

 

[Seahomie]

That's the thing: How do I do the positionings? I don't really understand it much even from RpN's tutorial page. I didn't know about negative margins either, so I may play around with that a bit..

 

[Fable]

On the note of having a opacity BG with non opacity text without the need or another div inside. Use rgba background color, example: background-color: rgba(0,0,0, 0.8);
That 0.8 is the opacity of the bg color. The text color will remain 100%. You can find out what a color's rgba is at color-hex.com

 

[fluticasone]

As an fyi, rgba is color-based. if you plan on using an image, you'll need two divs.

dump a margin-top: -## on the text div of your code and adjust as necessary

 

[Seahomie]

It hasn't exactly worked yet. I have two separate DIVs but I can't seem to figure out how to overlap them. The text DIV always comes beneath the background DIV

 

[fluticasone]

type in position: relative; z-index: 2; on the lower (text) div c:

 

[Seahomie]

That hasn't seemed to help either
What do those commands mean, anyway?

 

[fluticasone]

Why won't this bloody work?

the position lets you dictate positioning, while the z-index dictates which element you want on top/in front

[centerblock=70][div=background:url('https://hdqwalls.com/download/mount-fuji-beautiful-view-40-2560x1700.jpg') repeat center fixed;background-size: 85% 100%;border:2px white solid; padding:10px;width:800px;margin-left:50px;][div=background:url('https://data.whicdn.com/images/255018599/original.gif'); border:white solid 2px; margin:20px;height:360px;opacity: .6;][/div][div=margin: auto; margin-top: -383px; border:white solid 1px;height:360px;overflow-y:scroll; position: relative; left: 0px; z-index: 2; width: 757px ; color: white;]
Why won't this bloody work?










[/div][/div][/centerblock]

 

[Seahomie]

Thank you so much! Could you tell me why that worked? What exactly did you do to align the two pieces together? Thank you so so much again!

 

[Fable]

As an fyi, rgba is color-based. if you plan on using an image, you'll need two divs.

dump a margin-top: -## on the text div of your code and adjust as necessary

I get that, thought they were going to do two divs for opacity, one for "opacity" and the other for "text" rather than just do one with rgba bg. Basically misunderstood what they were trying to achieve.

 

[fluticasone]

i positioned this specifically for your image; there's a better more adaptive version but im too lazy to code that

but for future reference, this is what i did
margin-top: -383px; /* adjusts it so that it's on the same spot as the first div */
position: relative; /* allows us to set positioning values such as top or left, as well as z-index */
z-index: 2; /* allows us to dictate which element is on top. think of it as a sandwich. whichever has the highest z-index is the topmost layer */


everything else i added was more for aesthetics than anything else