Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » Forum Usage » Forum How-To »

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


  #1  
Old Mar 26, 2013, 11:57 AM
New WordPress Fan
 
141 posts · Jul 2010
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!
  #2  
Old Mar 26, 2013, 03:04 PM
juggledad's Avatar
juggledad
 
23,551 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Mar 26, 2013, 03:26 PM
New WordPress Fan
 
141 posts · Jul 2010
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.
  #4  
Old Mar 26, 2013, 04:20 PM
juggledad's Avatar
juggledad
 
23,551 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Mar 26, 2013, 05:19 PM
New WordPress Fan
 
141 posts · Jul 2010
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.
  #6  
Old Mar 26, 2013, 07:13 PM
juggledad's Avatar
juggledad
 
23,551 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
(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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Page menu Background color different from link button background color wallyman0 Page & Category Menu Bars 3 Sep 18, 2012 02:46 PM
*problem* cant get the page menu background to expand to the left side of the layout eahing Page & Category Menu Bars 0 Apr 14, 2011 01:41 AM
Layout width and color background sonya Sidebars & Widgets 10 Jan 5, 2011 11:19 AM
How to extend page menu background color across layout MacMacGA Page & Category Menu Bars 3 Aug 26, 2010 05:01 PM


All times are GMT -6. The time now is 06:05 PM.


Powered by vBulletin® Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.