No announcement yet.

Custom Widget Background Image Responsive

  • Filter
  • Time
  • Show
Clear All
new posts

  • Custom Widget Background Image Responsive

    I'm having an issue with the background image not being responsive in a custom widget in the top panel of a website I'm working on.

    The image (soldier holding a baby) is not responsive. The text in the widget on top of the background image is responsive (although does look a little large)...just not the background image. This is how I've put the background image in.
    .top-row-wrap {
    background: url("images/veterans-help-lifeline-2.jpg") no-repeat center top / cover #ffffff;
    Any ideas how to get that image to scale?

    Thank you!

  • #2

    You could try
    .top-row-wrap {background-size:contain;} But then image then is not tall enough in responsive mode. You may have to do some photo shop magic. Or set the background color to something other than white #FFF


    • #3
      Thanks Sogwap. I see what you mean about the image size. I might try something in photoshop.

      My other solution might seem a little overkill but I was thinking about using a slider like Meta Slider Pro and just having one slide with the text layered on top of it. I think it would work and could be an easier solution.

      Any thoughts on that or a better way to make this work.


      • #4
        I had similar problems. I ended up putting the text in a photoshop layer and then making the changes suggested
        in this video:


        • #5
          Thanks Watson. I first started with an image with text on it but I would like to avoid that so there is text above the fold.


          • #6
            You could also float the image right instead of center

            .top-row-wrap {background-position:right top;}

            The problem with this is the dark text would be difficult to read against the dark image.


            • Sogwap
              Sogwap commented
              Editing a comment
              Here's how to add a transparent background color (with border styling):
              #home_top {
              background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
              border-radius: 10px;
              padding: 0 20px;

              You could also remove:
              #home_top #text-3 .textwidget {

              And replace it with:
              #home_top {