Background image for widget titles?

  • Resolved kacassie

    (@kacassie)


    9 years, 2 months ago

    Hey

    I would like to customize my site a bit. I am usin Twenty Twelve theme and have made all my edits in a child theme.
    What I am trying to achieve at the moment is to get that picture (https://helevalgus.com/wp-content/uploads/2015/09/watercolorbanner250v2.png) behind the sidebar title text, but adding background-image: url; to css doesn’t seem to do the trick. Sadly. I would just like to replace the current background-color with background-image. Ideally I don’t like the solution, where I would have to put images only for the titles. I would like to just get the background-image and have a text on top of it.
    Any idea how to achieve this?

    I would also like to get a custom image background to the menu navigation. Same thing, background-image is no use there. Why? ??

    Thanks in advance. ??
    The blog that I need help with is found here.

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

  • Hey there kacassie,

    How are you doing today?

    This can be done with some custom CSS. Since you’re already using child theme you can try adding following the the bottom of your child theme style.css:

    .widget-area .widget h3 {
    background: url(https://helevalgus.com/wp-content/uploads/2015/09/watercolorbanner250v2.png);
}

    This should be the result https://screencast.com/t/maGxh3LcMNy. You can use the same principle on the navigation but I’d suggest using larger image. So once you got the image you can add this as well:

    ul#menu-uusmenu {
    background: url(your_image_URL);
}

    Replace dummy URL with the URL of your image.

    Hope this helps ??

    Cheers,
    Bojan

    Thread Starter kacassie

    (@kacassie)

    Wowser, thanks!

    So simple. I can’t understand how I didn’t get this to work yesterday. I literally tried every possible way with background-image and I even remember that I tried just like you said “background: url…” but it was a no go. And today it seems to work… ??

    I also added “line-height:50px; height: 50px;” for the sidebar to get the text in the middle and to match with the image height.
    I have a wider version of the banner for navigation background.

    But thanks, really! YAAAY!

    Glad I could help ??

    Have a nice day!

    Cheers,
    Bojan

    Hello Kacassie and Bojan!
    I have a question
    What I have to change for put the button menu down the image header?

    My site is esdm.es

    sorry for my english, and thanks you for all help with this post

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Background image for widget titles?’ is closed to new replies.