This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

How to make background image responsive

  • Creator
    Topic
  • #1864
    bodie16
    Member

    Hi Jason

    I have added a background image to my Alyeska site that is essentially a purple band (350pxls deep) aligned underneath the menu bar (using classic menu on stretch setup) to give the look of a broad color band across the page. (you can see the site at vanzwan dot com dot au) Could you please tell me how to get this background image to be responsive with the rest of the site (so it reduces appropriately when the site is seen on mobile devices?
    I’d appreciate your advice… thanks.
    Wayne

Viewing 2 replies - 1 through 2 (of 2 total)
  • Author
    Replies
  • #1878
    Jason Bobich
    Keymaster

    Hello Wayne,

    Could you please tell me how to get this background image to be responsive with the rest of the site?

    With the way you’re doing that, it’s not really going to be easily achievable. In CSS, a background image can’t really be responsive in a way that you can really work with. You can set the background-size to use percentages, which will make it somewhat responsive, but this isn’t going to solve your problem.

    Instead, you should think of a different approach. For example, I’d just remove the background image all together from the body of the page, and focus on the sections that stretch horizontally across the entire page. And with your design you really don’t need any images at all.

    body {
    	background: #fff;
    }
    #wrapper {
    	background-color: transparent;
    	background-image: none;
    }
    #top {
    	border-top: 5px solid #000;
    }
    #main {
    	background: #513e54;
    }

    On a sidenote, I see you’re making a lot of customizations. You really should be using a Child theme. It will make your life a whole lot easier. Checkout this video: https://vimeo.com/41331677

    #1905
    bodie16
    Member

    OK… thanks very much for your reply and assistance.

    cheers
    Wayne

Viewing 2 replies - 1 through 2 (of 2 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.