Adjusting image size (HTML/CSS)

Question

I came up with some code for a website I am making, and I was wondering how you would change the size of the image on the page

Code:

<html>
  <head>
    <style type="text/css">

      .bg {
        background: url(http://fc05.deviantart.net/fs48/i/2009/235/2/5/clouds_over_california_by_Un_symmetrical.jpg) center top;
        height: 30%;
      }

    </style>
    <script src="jquery.js"></script>
    <script>

      var bgPos = 0;
      setInterval(function() {
        $(".bg").css("background-position", (bgPos-= 2) + "px");
      }, 60);

    </script>
  </head>
  <body>
    <div class="bg"></div>
  </body>
</html>

Have you tried background-size? Like `background-size: 100px 100px` — agrm, Jul 25 '14 at 18:56
Take a look [here](http://stackoverflow.com/questions/1341358/set-size-on-background-image-with-css) — RafaelTSCS, Jul 25 '14 at 18:57
Are you wanting to change the size of the image in relation to the page size? — dsum27, Jul 25 '14 at 19:02

score 0 · Answer 1 · answered Jul 25 '14 at 19:00

You can use an img tag and set the size on it directly such as:

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

or you can just resize you image in some application like photoshop to the exact size you want, then set the height and width in css to match whatever size you made the image.

.bg{
    background: url(http://fc05.deviantart.net/fs48/i/2009/235/2/5/clouds_over_california_by_Un_symmetrical.jpg) center top;
    width: 300px;
    height: 200px;
}

Adjusting image size (HTML/CSS)

1 Answers1