Not Resolved->Two Background Solid Colors?->Background Image

[private]

Forum URL: http://N/A
Is it possible to have two background solid colors?

[Michael]

Hi private,

Yes, it is possible.

[private]

Aug 23, 2018 11:43:01 GMT -8 Michael said:

Hi private,

Yes, it is possible.

Michael:
Thank you for your reply.
Please provide details.

[Brian]

I'm not entirely sure what you mean here:

Aug 23, 2018 11:40:28 GMT -8 private said:

Is it possible to have two background solid colors?

But you can color pretty much anything on the page. If you want instructions on how you'll need to be way more specific as to what you're attempting to do.

[Beckea]

Using a background color (for the background) and putting in a wrapper

body {background-color:#000;}
#wrapper {
width: 80%;
margin:40px auto;
background-color: #fff;
border:2px solid red;

padding:10px;}

**You can also use background-images as well. Or add more wrappers.

[private]

Aug 23, 2018 13:15:54 GMT -8 Brian said:

I'm not entirely sure what you mean here:

Aug 23, 2018 11:40:28 GMT -8 private said:

Is it possible to have two background solid colors?

But you can color pretty much anything on the page. If you want instructions on how you'll need to be way more specific as to what you're attempting to do.

Brian:
Thank you for your reply
The visual editor allows one forum background color.
I want to try using two different forum background colors.
I was thinking of: 
light blue->#e6eeff
light purple->#e6e6ff
Light blue and light purple for forum background colors.

[private]

Aug 23, 2018 13:22:47 GMT -8 Beckea said:

Using a background color (for the background) and putting in a wrapper

body {background-color:#000;}
#wrapper {
width: 80%;
margin:40px auto;
background-color: #fff;
border:2px solid red;

padding:10px;}

**You can also use background-images as well. Or add more wrappers.

Beckea:
Thank you for your reply.
Is there an easier way to accomplish my goal?

[Michael]

Hi private,

You still have not provided any details about what exactly you're looking to accomplish. Do you want the background split horizontally? Vertically? Where should these two solid backgrounds be? What should it look like?

You told us about the two colors, but not what to do with them. You need to help us first understand what you are trying to accomplish before we can help you achieve that.

[Beckea]

body {background-color:#e6eeff;}
#wrapper {
width: 85%;
margin:40px auto;
background-color: #e6e6ff;
border:2px solid black;
padding:10px;}



Second what Michael mentioned, it would be helpful to know more information to best help you. But if you want copy and paste what I have above for now and go from there.

[private]

Aug 23, 2018 16:19:05 GMT -8 Michael said:

Hi private ,

You still have not provided any details about what exactly you're looking to accomplish. Do you want the background split horizontally? Vertically? Where should these two solid backgrounds be? What should it look like?

You told us about the two colors, but not what to do with them. You need to help us first understand what you are trying to accomplish before we can help you achieve that.

Michael:
I apologize.

Is it possible for both colors to blend in with each other, so that they appear as one, but are really two separate solid colors?
Is it possible for them to also be vertical and transparent?

I would like to achieve the goal of them looking as if they are further back behind the forum.
I would to create the appearance of distance.

[Nscalerr]

A bit involved, but I think this is what you might be after. Place at the bottom of your stylesheet.

/* Body gradient background. */
body {
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e6eeff, endColorstr=#d9cad9);
       background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e6eeff), to(#d9cad9));
       background: -webkit-linear-gradient(top, #e6eeff, #d9cad9);
       background: -moz-linear-gradient(#e6eeff, #d9cad9, #000000);
       background: -ms-linear-gradient(left, #d9cad9, #000000);
}

[private]

Aug 23, 2018 21:23:04 GMT -8 Nscalerr said:

A bit involved, but I think this is what you might be after. Place at the bottom of your stylesheet.

/* Body gradient background. */
body {
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e6eeff, endColorstr=#d9cad9);
       background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e6eeff), to(#d9cad9));
       background: -webkit-linear-gradient(top, #e6eeff, #d9cad9);
       background: -moz-linear-gradient(#e6eeff, #d9cad9, #000000);
       background: -ms-linear-gradient(left, #d9cad9, #000000);
}

nscalerr:
Thank you for your reply.
I added your code onto my testing theme's style sheet.

Is it possible to have the purple on the bottom at 25%?
Is it possible to have the light blue on top at 75%?
Is it possible for both colors to be completely vertical, like a single stripe?
I was thinking that the colors would cover 80% of the forum's background.
Is that possible?

[Nscalerr]

Aug 24, 2018 5:16:10 GMT -8 private said:

Is it possible to have the purple on the bottom at 25%?

Is it possible to have the light blue on top at 75%?

Is it possible for both colors to be completely vertical, like a single stripe?

I was thinking that the colors would cover 80% of the forum's background.
Is that possible?

25% of what ?? - It could possibly be done with rgba and not a solid colour.

75% of what ?? - It could possibly be done with rgba and not a solid colour.

No

With a background it covers 100% of the browser window.

[Nscalerr]

This is with rgba and as close to 25% and 75% as you can get. Note the colours are very pale, specially the top one.

body {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=rgba(230, 238, 255, 0.2), endColorstr=rgba(217, 202, 217, 0.8));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(230, 238, 255, 0.53)), to (rgba(217, 202, 217, 0.8)));
background: -webkit-linear-gradient(top, rgba(230, 238, 255, 0.2), rgba(217, 202, 217, 0.8));
background: -moz-linear-gradient(rgba(230, 238, 255, 0.2), rgba(217, 202, 217, 0.8));
background: -ms-linear-gradient(left, rgba(230, 238, 255, 0.2), rgba(217, 202, 217, 0.8));
}

[private]

Aug 24, 2018 5:43:19 GMT -8 Nscalerr said:

This is with rgba and as close to 25% and 75% as you can get. Note the colours are very pale, specially the top one.

body {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=rgba(230, 238, 255, 0.2), endColorstr=rgba(217, 202, 217, 0.8));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(230, 238, 255, 0.53)), to (rgba(217, 202, 217, 0.8)));
background: -webkit-linear-gradient(top, rgba(230, 238, 255, 0.2), rgba(217, 202, 217, 0.8));
background: -moz-linear-gradient(rgba(230, 238, 255, 0.2), rgba(217, 202, 217, 0.8));
background: -ms-linear-gradient(left, rgba(230, 238, 255, 0.2), rgba(217, 202, 217, 0.8));
}

nscalerr:

Thank you.
Is it possible to get the background coloring to cover 80% or 800px of the forum?
I would like to leave room for some transparent or white space.
I am thinking about adding background images.

How do I plug in the color codes for the containers and any other parts of the forum board?