Auto position header image in HTML

Question

I am trying to put an image in my header and it must auto position it self when the window is resized and the header image must support different screen resolutions.

This is what I have so far:

HTML

<header>
<img class="thumbnail2" src="MyImage.jpg" alt="thumbnail2" />
</header>

CSS

.thumbnail2 {
    display: block;
    max-width: 123%;
    height: auto;
    width: auto;
 }

header {
    padding: 0px 250px 0px;
    margin: 0 auto;
}

The reason my max width is 123% is to fit the image when in full screen but as soon I resize the window it does not resize itself and the image becomes smaller in width.

Please assist.

score 0 · Answer 1 · edited May 23 '17 at 11:45

You could use JavaScript to dynamically adjust the image size with the window size: Auto image resize based on browser window dimensions
You could use Media Queries and select multiple points at which your header adjusts it's size: Resizing images using media queries
You could instead create a "banner" class that utilizes the "backgrounds" family of CSS properties: http://www.w3schools.com/css/css_background.asp

score 0 · Answer 2 · answered Feb 13 '17 at 17:05

Try put the image inside the css (not an img tag)

.thumbnail{
   background-image : url(MyImage.jpg);
   background-repeat : no-repeat;
   background-position : center;
   background-size : cover;
}

then it would auto adjust to the container .thumbnail width...

score 0 · Answer 3 · answered Feb 13 '17 at 17:13

Try changing your code to something like this:

<style>
    .thumbnail2 {
        position: relative;
        background-position: 50% 0;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url("./path/to/image");
        min-height: 100%;
    }
</style>

<div class="thumbnail2"></div>

You can edit the height of the image shown with min-height, and the width should be responsive.

score 0 · Accepted Answer · answered Feb 13 '17 at 17:18

I understand the thought process behind your current code however, you are approaching the issue all wrong. You should be using a css media query to adjust your your header if you are looking for granular control depending on screen size.

Since you only have one image and have not included the dimensions of the image or where it should appear in the header, i will assume you want it to be the entire width of the header.

Additionally max-width should never be over 100%. Here is how I would restructure your code:

Note: if this does not fix your issue, you need to resize your image to be larger. If your image is to small it will not fill up the entire screen.

Codepen link

   html:
    <header>
    <img class="thumbnail2" src="MyImage.jpg" alt="thumbnail2" />
    </header>

    CSS:
   .thumbnail {
    display:block;
    /* set width to 100%  */
    max-width: 100%; 
    height: auto;
    width: auto;
    }

    header {
    /* padding:0px 250px 0px; */
      padding-bottom: 250px;
       margin: 0;


/* set width of the header to 100% */
       width: 100%
    }

Hi this has sorted my problem to a certain extend but not fully. On some screen resolutions my image fills the header but on others(1920 x 1080) it does not — Lyubomir Valchev, Feb 13 '17 at 17:25
After a long time trying to figure it out i got it right. The problem was my image was a little to small like you mentioned above — Lyubomir Valchev, Feb 13 '17 at 19:53

Auto position header image in HTML

4 Answers4