image hides when bar is gradient

  • Resolved Shelly K.

    (@shellyknrg)


    10 years, 10 months ago

    Hi Bob,

    I used the TopBar example and put in my image and used the css:
    ‘background-repeat: no-repeat;background-position-x:250px;’
    to put the image on the left of the text. And on a white background this works just fine.

    Then I used the example CSS Option A code to add a gradient bar – I copied and pasted it exactly. This makes the topbar a gradient – very nice.
    However, the image is no longer seen.
    I tried moving ‘background-repeat: no-repeat;background-position-x:250px;’ to the end of the gradient code but that didn’t bring the image back.

    How do I show the image and use the gradient?

    Thank you,
    Shelly

    https://wordpress.org/plugins/wp-topbar/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author rfgoetz

    (@rfgoetz)

    10 years, 10 months ago

    That is by design: “f you enable the image (by selecting “Yes”), then the image will be used and the bar color will be ignored.”

    I can play around with the code to see if I can get both to work. Pls give me a couple of days.

    Bob

    Thread Starter Shelly K.

    (@shellyknrg)

    10 years, 10 months ago

    Thank you for looking in to it.
    -S

    Plugin Author rfgoetz

    (@rfgoetz)

    10 years, 10 months ago

    Try this in CSS Option C:

    background: url(https://yourwebsite.com/wp/wp-uploads/2013/05/app-icon.png) no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(109,179,242,1)), color-stop(50%,rgba(84,163,238,1)), color-stop(51%,rgba(54,144,240,1)), color-stop(100%,rgba(30,105,222,1)));

    Make sure to change this piece of the code “https://yourwebsite.com/wp/wp-uploads/2013/05/app-icon.png” to the URL of your image. Make sure the background is transparent on your image.

    You can use this as a sample to add your gradient CSS.

    Also, make sure to turn OFF the option to show an Image on the TopBar.

    Plugin Author rfgoetz

    (@rfgoetz)

    10 years, 9 months ago

    Closing – no response in about a week.

    Thread Starter Shelly K.

    (@shellyknrg)

    10 years, 9 months ago

    Hi – just to tell you what happened…
    I inserted the code above but it didn’t work for me.
    However, I found the extra positions for the social media icons and just inserted my image there. I fiddled with the css for alignment and it’s good to go.

    Thanks.
    -S

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘image hides when bar is gradient’ is closed to new replies.