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

Answer 1

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.

Answer 2

CSS-Tricks has the best solution for this that I could find

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

Link to CSS-Tricks for the source and original code: https://css-tricks.com/perfect-full-page-background-image/

Answer 3

Did you remember to link to your stylesheet? I was just having this issue, then I realized that I forgot to link to the CSS and face-palm.

Answer 4

You have to give the id banner a specific width that is less than 100%. You don't need a height, it already is automatic. You have to target the image inside the banner and not the class added to the image. So it should look like this:

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

#banner{
    width: 60%;
    left: 0px;
    right: 0px;
}

#banner img{
    width: 100%;
    left: 0px;
    right: 0px;
}

Answer 5

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