WordPress.org

Ready to get started?Download WordPress

Forums

Background Manager
Custom Overlay Positioning (2 posts)

  1. michelm14
    Member
    Posted 1 year ago #

    I just downloaded this plugin and it works great! After looking in the backend, I'm attempting to figure out having a custom transparent overlay and to have it repeat only with repeat-x. I'm trying to dig into the javascript and css but I'm coming up short. Ideally, the background image is perfect, but I'm looking to have an overlaying png (vertical image black to transparent-black) align only at the top with repeat-x, simulating a faded background. Are there any suggestions?

    Thanks and great plugin!

    http://wordpress.org/extend/plugins/background-manager/

  2. myatu
    Member
    Plugin Author

    Posted 1 year ago #

    Hi!

    I'm sorry I didn't reply sooner - somehow I've missed your post.

    This would require a little extra work, but is possible:

    - Firstly, set the background as you wish using Background Manager to start with.

    - The next step is to select a Background Overlay and keep the opacity at 100% (no opacity). The reason for this, is that you now have an element called #myatu_bgm_overlay that you can override.

    - Now you can use the "Custom Stylesheet" option of the Image Set(s) to add extra CSS code, that will give you that dark fade at the top. You could use a black-to-transparent PNG file, like so:

    #myatu_bgm_overlay {
      background-image: url('/path_to_my/custom_overlay/image.png') repeat-x fixed top left transparent;
    }

    Or alternatively, using entirely CSS3 instead of an image:

    #myatu_bgm_overlay {
        background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    }

    For different gradients and colors using CSS3, have a look at http://www.colorzilla.com/gradient-editor/ for an auto-generator (as used above).

    Note: keep in mind that this will override your the overlay you've chosen from the Settings screen (ie., black diagonal lines).

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic