Can't resize image using CSS

Question

I've tried every answer I could find on all the sites I could find, but still haven't been able to properly resize an image using CSS. I've got it inside a div, and tried resizing either one and resizing both. I'm trying to fit the image (underneath my navigation bar) to the page (meaning: as wide as the page, and relative height).

<div id="banner"><img src="resources/img/banner.png" class="myImage"></div>

First attempt:

.myImage{
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

Second attempt:

#banner{
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

Third attempt:

<div id="banner"><img src="resources/img/banner.png" id="myImage"></div>

#banner{
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

#myImage{
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

Solution 1

If your image is smaller than the screen, it will use the image width. If it is bigger, it uses max-width. So assuming your image is smaller than the display, you want to change your "max-width" to "width" to increase the image size.

<div id="banner"><img src="resources/img/banner.png" id="myImage"></div>

#banner{
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

#myImage{
    width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

Solution 2

The CSS property background:cover will help you!

html { 
 background: url(images/bg.jpg) no-repeat center center fixed; 
 background-size: cover;
}

Cover will extend your background to full screen.

Comments

[Maxim Zhukov]

@JoseMagana, i hope it so ;)

[entpnerd]

Consider adding a link to the original source where you found this solution so that they can be properly cited/credited.