Hi 4duckiskand,
you can try to add this code to your custom css
body {
background-image: url('LINK_TO_YOUR_GRADIENT_IMAGE');
background-repeat: repeat;
background-position: top left;
}
I still can’t get this to work. My site is http://www.kwdanis.com/version19
Two area of concern:
1) Exactly how do I reference the image? Do I use the image’s permalink? The two examples entered as below don’t work. What’s wrong?
PERMALINK
body {
background-image: http://kwdanis.com/version19/?attachment_id=103;
background-repeat: repeat;
background-position: top left;
}
IMAGE NAME
body {
background-image: http://kwdanis.com/version19/wp-content/uploads/2013/11/green_gradient_1px.png;
background-repeat: repeat;
background-position: top left;
}
2) Since this is a 1px image don’t I need to add something reference the X/Y axis so it know where to repeat?
thanks
Ken
You need the image name. Try changing to:
../wp-content/uploads/2013/11/green_gradient_1px.png
The background-repeat will repeat in both x/y direction unless you specify repeat-x or repeat-y.
Tried this. No dice.
I’ve used this same png silver with Canvas and it works fine to create a gradient background (there’s a custom background field to enter this in Canvas). So the issue isn’t the sliver. I also entered whats below into my child theme, and yes the site background changes to orange. So the issue isn’t a faulty child theme.
I guess the css still isn’t quite correct. Any suggestions? Is anyone using a gradient background successfully with Customizr?
CHANGES BACKGROUND TO ORANGE:
body{
background: orange;
}
header.tc-header {
background: none;
}
WHAT I ADDED AND DOES NOTHING (also tried just wp-content/uploads/2013/11/green-gradeint-1px.png:
body {
background-image: http://kwdanis.com/version19/wp-content/uploads/2013/11/green-gradeint-1px.png;
background-repeat: repeat;
background-position: top left;
}
(Yes, I know I misspelled gradient for this file; I got the url from copying the File URL field in the media library, so it’s right)
Thanks for any help!
Did you try this Snippet?
With trial and error and finally success I got it to work! The suggestions from tomaja first post finally worked, when before it wouldn’t. I deleted and uploaded the images again between trying so perhaps the initial upload was corrupted. One suggestion: Make sure the 1px sliver is long enough so there’s no tiling. This site is a good resource.
Thanks to everyone who responded for their suggestions! Here’s my successful css:
body
{
background-image:url('YOUR URL HERE');
background-repeat: repeat-x;
}
