WordPress.org

Support

Support » Themes and Templates » [Resolved] add 1px sliver to background?

[Resolved] add 1px sliver to background?

  • I have a 1px gradient jpg I created that I want to repeat from top to bottom of all pages. I assume I first load it into the media file to use it. What would be the css to add it to a child theme so it repeats?

Viewing 6 replies - 1 through 6 (of 6 total)
  • 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;
    }
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] add 1px sliver to background?’ is closed to new replies.