Responsive header image

Question

I´m making a prestashop store and I already include one image into the header bur the image isn´t responsive. How can I make de image responsive?

Look the code of the header image:

header {
  z-index: 1;
  position: relative;
  background: #FFF url('http://s23.postimg.org/ha3x2zf23/header_image1_sized.jpg')!important;
  padding-bottom: 100px; }

Anyone can help me to change the code to put a responsive image in header?

Thanks

possible duplicate of [Responsive css background images](http://stackoverflow.com/questions/12609110/responsive-css-background-images) — What have you tried, Oct 21 '14 at 19:33

score 0 · Accepted Answer · answered Oct 21 '14 at 20:18

Use background-size:contain; and assign size for email in percentage or em (this it is up to you).

Please test it here http://jsbin.com/zohinomiya/1/ and try to re-sizing your browser window to see the scaling.

<! doctype HTML>
<html>
    <head>
    <title>TEST</title>
    <style>
    #test {
        background-image: url('http://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image2.jpg');
        background-repeat:no-repeat;
        background-size:contain;
        background-position:center;
        height: 100%;
    }
    </style>
    <script>

    </script>
    </head>
        <body>
            <div id ="test">s</div>
        </body>
</html>

Responsive header image

1 Answers1