[Solved] How to define a transparent background

[jamesburden]

Hi everyone – hope that someone can help me with this!

Having started to get my hands dirty with CSS I’m now needing a bit of help. The staging site of my website is here: http://perfdigi.staging.wpengine.com/.

There are two things I’m trying to solve.

Firstly, on the home page in the top section (.home-top) I need to make the white text a bit clearer.

At the moment I’m using the following css to help the white text stand out a bit:

.home-top {
background: rgba(0,0,0,0.2);
text-shadow: 1px 1px 2px #000, 2px 2px 4px #000, 3px 3px 8px #000, 4px 4px 32px #000;
}

But what I’d really like to do is drop the text-shadow, increase the opacity of the background, and have the semi-transparent background as the same width as .home-middle and .home-bottom (c.1150 px?). So the semi-transparent background would not be full width and would align with the lower sections. The knock-on of this is that I would need to have the content text in .home-top inset by about 55px within the semi-transparent background. How do I achieve this?

Secondly, if you take a look at one of the internal pages (e.g. http://perfdigi.staging.wpengine.com/photography/) you’ll see that because I’ve incorporated breadcrumbs I’ve now got my main content misaligned with the sign-up form to the right. How do I lower the position of the Don’t Miss Out box so that it is level with the main content box?

Thanks so much for any help that you can give. James

[connorblikre]

What I like to do is put a container around the text that is as wide as my main page container, and then put another div inside that container after the text.

The container is relatively positioned while that second div is absolutely positioned with a top, bottom, left, and right value of 0, and given a black background with an opacity of whatever you need it to be. The inner div will fill up the outer container and will shrink and expand to fit the text.

This way you can adjust the opacity on an element behind your text without affecting the text itself.

Example on codepen

Also, could you put a margin-top on your sidebar to make it line up with the container below the breadcrumbs? If the breadcrumbs will sometimes push down the rest of the content, I would put the breadcrumbs in one container and then your main content with sidebar in the next container below that.

[wahhabb]

Good suggestions from #connorblikre.

You can probably simplify his approach by removing the separate, following div. That also eliminates the need for using z-index. Here’s a modified example on codepen.

As for the breadcrumbs, if you add to class breadcrumb a margin-top: -42px; that aligns the content with the sidebar. Since they are both now too high, you will need to increase the padding-top on site-inner (which is now 5%) to give the breadcrumbs a bit more breathing room. This approach means that if some page does not have breadcrumbs, the content and sidebar will still align.

[connorblikre]

Didn’t think of using an RGBA background, that’s pretty neat.

[jamesburden]

Thank you both so much! Really appreciate that. Just what I needed and I’ve learnt loads as well.

Thanks again :-)

[Author]

Posts