Responsive design, with image centered

Question

<code>
    <main>    
        <div id="inner-wrapper">    
            <img src="img/my-image.png" alt="" height="" width=""/>    
            <header>    
                <h1>..</h1>
                <nav>       
                </nav>
            </header>
        </div>
    </main>
</code>

Hello, everyone.

I am trying to convert my college project site into responsive. I have difficulty using my background image to scale along with rest of content on that image down to 768px, after which background image is removed and different pattern defined. I need the image to be centered along with the rest of the content on the page.

Answer 1

I would use a CSS background image instead of including an image tag.

#inner-wrapper {
    background: url(img/my-image.png) no-repeat center top;
    background-size: cover; /* this fills the container with the background image */
}

Note that background-size: cover; is not supported in IE 8 and below, if those matter to you.

To swap the background out at 768px:

@media screen and (max-width 768px) {
    #inner-wrapper {
        background: url(img/my-pattern.png) repeat left top;
        background-size: auto;
    }
}

Answer 2

take all the height width in % format like width:50% ; and for image and div