CODEWITHSUNDEEP
cssweb
user3647066
user3647066

Reputation: 1

Adding secondary "background" color with CSS - first time making website.

I'm trying to launch a website, and it is my first experience working with CSS. I purchased a custom theme from themeforest. I'm trying to make it so that I have two background colors: I want there to be a secondary and a primary background color.

Here's an example page: http://nosmokingmedia.com/testreview-aphex-twin/ - What I'm trying to do is make it so that the orange background remains, but implement a white background behind the text to make it more legible and cleaner.

There is an option in my theme to add custom CSS (which I have only done so far for the global font color), but I'm not exactly sure how I would go about adding this background. So far I have tried:

#subbackground
    {
    width: 65%;
    height: 100%;
    background-color: #D9D9D9;
    opacity: .2;
    margin-left:-32.5%;
    width:65%;
    left:50%;
    position:fixed;
    z-index: 2;
    color:#ffffff;

When I inputted this into the section for custom css codes, it had no effect.

Thanks in advance!

Upvotes: 0

Views: 2360

Answers (2)

PugsOverDrugs
PugsOverDrugs

Reputation: 535

If that is your page then adding this should work:

.post-text p
{
    background-color: #D9D9D9;
    opacity: .2;
}

This sets the background color of all paragraphs inside of all elements with class 'post-text' (which is where your text is ) to have a background color and opacity. The way you have it is overly complicated. Simpler is better :)

Upvotes: 0

Paul Roub
Paul Roub

Reputation: 36448

Unless you have an element with an id="subbackground", that won't do anything.

Based on the HTML in your page, it seems like:

.post-text {
  background-color: #FFF;
  opacity: 0.8;
}

might be something like what you're looking for.

Upvotes: 3

Related Questions