WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] add 1px sliver to background? (7 posts)

  1. 4duckisland
    Member
    Posted 9 months ago #

    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?

  2. tomaja
    Member
    Posted 9 months ago #

    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;
    }
  3. 4duckisland
    Member
    Posted 9 months ago #

    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

  4. rdellconsulting
    Member
    Posted 9 months ago #

    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.

  5. 4duckisland
    Member
    Posted 9 months ago #

    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!

  6. rdellconsulting
    Member
    Posted 9 months ago #

    Did you try this Snippet?

  7. 4duckisland
    Member
    Posted 9 months ago #

    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;
    }

Reply

You must log in to post.

About this Theme

About this Topic

Tags