Wordpress Themes - WP Forum at BFA - With a Layout Background URL (top-left)- How Set wrapper background to gradient color

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Forum How-To (http://forum.bytesforall.com/forumdisplay.php?f=9)

- - With a Layout Background URL (top-left)- How Set wrapper background to gradient color (http://forum.bytesforall.com/showthread.php?t=19995)

With a Layout Background URL (top-left)- How Set wrapper background to gradient color

Using Atahualpa 3.7.10 with WordPress 3.5.1.

Is there a way to set the wrapper background to a gradient color (darker on top, fading to lighter at bottom), when using a background image (top-left) for the layout?

I have tried the following code at ATO > Body, Text & Links, but it does not work (reads only the #111111 for the wrapper color):

Code:

background: #111111 url(http://www.XXXXXX.com/wp-content/uploads/2013/03/Layout-Background-top-left-corner-500px-wide.jpg) repeat-x top left; 



background: -moz-linear-gradient(top, #111111, #333333) url(http://www.XXXXXX.com/wp-content/uploads/2013/03/Layout-Background-top-left-corner-500px-wide.jpg) repeat-x top left; 



background: -webkit-gradient(linear, left top, left bottom, from(#111111), to(#333333)) url(http://www.XXXXXX.com/wp-content/uploads/2013/03/Layout-Background-top-left-corner-500px-wide.jpg) repeat-x top left;

Is it possible to use both a background url and a gradient background color?

Many thanks!

well if that is the exact CSS you are using, no wonder it doesn't work.
so now I will ask you - what is wrong with that CSS - and you may want to look at how a CSS statement is structured.

Very sorry to bother you, Juggledad. I am an amateur at this, and not a website designer. Just trying to learn by doing, and from the wisdom of others like you in this forum, which has been very helpful.

If my question was inappropriate or too uninformed for the forum, I apologize.

I will continue trying to research this on my own, but so far have not a clue.

Again, my apologies if this forum is for those more experienced in website design. :)

Thank you very much for your graciousness and patience, and for the very helpful advice you have previously given me on other questions in this forum! I appreciate it.

No problem I just wanted see if you could find the error.
1) CSS has two parts selectors and rules and it would look like this
selector {rule1; rule2; etc} the '{}' are very important.
2) if you have two selectors that are the same with the same rule, the second rule will superceed the first.

so given that, what issues might there be wiuth your CSS?

Thank you very much for your response, Juggledad.

I have input this code at ATO > Body, Text & Links, where the { } appear not to be used. This code was not added as a CSS insert.

The following code does work in ATO > Body, Text & Links to make a gradient wrapper background -- (at least in browsers other than IE) -- without the background image:

Code:

background-color: #111111;

background: -moz-linear-gradient(top, #000000, #cccccc);

background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#cccccc));



/* IE10 Consumer Preview */ 

background-color: -ms-linear-gradient(top, #000000 0%, #cccccc 100%);



/* Mozilla Firefox */ 

background-color: -moz-linear-gradient(top, #000000 0%, #cccccc 100%);



/* Opera */ 

background-color: -o-linear-gradient(top, #000000 0%, #cccccc 100%);



/* Webkit (Safari/Chrome 10) */ 

background-color: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000000), color-stop(1, #cccccc));



/* Webkit (Chrome 11+) */ 

background-color: -webkit-linear-gradient(top, #000000 0%, #cccccc 100%);



/* W3C Markup, IE10 Release Preview */ 

background-color: linear-gradient(to bottom, #000000 0%, #cccccc 100%);

But, when I try to add the background image url (as show in my first post), the background image appears, but the rest of the background is #111111, with no gradient.

Sorry, but I still don't understand. :)

(sorry for misreading, I have a head cold)
I believe the issue is that with CSS3, the gradients are the background-image so you get eithor the image or the gradient. Do a google search on 'css background gradient' and read about it.