How to define a transparent background

[jamesburden]

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

I'm using Agency Pro and having got 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

http://perfdigi.staging.wpengine.com/

[jamesburden]

Hi - no need for a reply on this now - I've figured it out. Here's the solution for anyone else who might be looking for similar solutions.

An example of the css approach can be seen here: http://codepen.io/anon/pen/uvIHL

This creates a container around the text that is as wide as the main page container, and then has 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.

As for the breadcrumbs, if you add to class breadcrumb a margin-top: -42px; that aligns the content with the sidebar. This approach means that if some page does not have breadcrumbs, the content and sidebar will still align.

[Author]

Posts