Setting backgroundcolor - Post ID 267442

User 2088758 Photo


Senior Advisor
3,121 posts

I would remove the text from the image then add an text element with a negative margin to it.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 187934 Photo


Senior Advisor
20,271 posts
Online Now

If your column has the background image.
Add a container to your column. Place your text element inside the container. Set the containers background color and opacity.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2857094 Photo


Registered User
3 posts

I am having the same problem as Izzi. When I add a background image to, say, a column and then adjust the opacity, everything inside the column is affected. So the letters fade. If I add a container, it doesn't help. The opacity applies to everything you put in the column, including the container and everything in it. I think I've tried applying the background image and the opacity to a column, a hero unit, and a container but the opacity always applies to everything inside, and so the text fades. There doesn't seem to be any way to put the text on top of the image and not have it fade. I would somehow have to put the image on top of the text. Or do the transparency in Photoshop I guess?
User 122279 Photo


Senior Advisor
14,652 posts
Online Now

There are, AFAIK, two ways of setting the opacity:
1.
background-color:white;
-moz-opacity: 0.80;
opacity:.80;
filter: alpha(opacity=80);

This leads to everything inside the element to inherit the same opacity.

2.
background: rgba(255, 255, 255, 0.6);

With this one, the opacity is not inherited.

In RSD the css for opacity set on a colour is #2, whereas on images it's #1.

According to my experience, you can add a background image to a row, colum, container etc, but don't touch the opacity settings!
Then you put a layer on top of it (I used the bg pic on a column, so added a container to it) and give it a bg colour where you adjust the opacity.
Then place some text in the container. If you use one of the headings, you may have to adjust the text colour a bit, then the default is somewhat greyish.

This is basically the same as Eric said about a year ago.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.