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.

Check this out: http://stackoverflow.com/questions/7660931/responsive-web-deisgn-how-to-resize-a-background-image-according-to-browser-w?rq=1 — Alex Art., Feb 06 '14 at 11:57

score 0 · Accepted Answer · answered Feb 06 '14 at 11:56

0

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;
    }
}

answered Feb 06 '14 at 11:56

Josh Harrison

5,927
1
30
44

Here is live example: http://stsbuilders.ie/test i got my image centered as i wanted and it is scaling. But i have defined fixed height to the div leaving me with blank space at the bottom. Any chance to get that div height scaling together. If i try 100% it disappears because sees no content??? – Mareks Feb 06 '14 at 19:51
Hmm I see. Removing the height on `#inner-wrapper` and giving it a padding-top of 100% will do it, but if you want to have content on the 'paper', you'll need to absolutely position another wrapper inside inner-wrapper. Sounds more confusing than it is... see this fiddle for an example: http://jsfiddle.net/M8r7C/1/ – Josh Harrison Feb 06 '14 at 20:25
Thank you very much. This solves the case. Very much appreciated. Cheers. – Mareks Feb 12 '14 at 10:46
Great. Please accept the answer by clicking the tick icon to show that it worked. – Josh Harrison Feb 12 '14 at 11:51

score 0 · Answer 2 · answered Feb 06 '14 at 11:56

0

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

answered Feb 06 '14 at 11:56

Vikas Gautam

997
7
23

Responsive design, with image centered

2 Answers2