4

i can get images scaled to fill the window when they are the content, like so: (without any html5 or div)

  <style type="text/css">
img {
width:100%;
height:100%;
margin:0px;
}
  </style>

and 

<img src="wacard.png" alt="original image" title="">

but

this fails (both "html, body" and just "body")

  <style type="text/css">
body {
width:100%;
height:100%;
margin:0px;
}
  </style>

and

<body
 style="background-image: url(wacard.png);">
</body>

as picked up picked up from here: Resize HTML5 canvas to fit window but as far as i understand, that must have some more fancy code than i know of, going on, ... or i'm doing something wrong...

how can i get background images to scale? (ideally, without javascript)

Community
  • 1
  • 1
digit
  • 275
  • 1
  • 3
  • 8

4 Answers4

8

Here is a great tutorial with several solutions: http://css-tricks.com/perfect-full-page-background-image/ Complete with demos and the step by step coding process.

The HTML5 way mentioned is:

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

There is an ie fix mentioned in the article.

jackreichert
  • 1,979
  • 2
  • 23
  • 36
1

As I understand you want to create a full page re-sizable background. If so, follow the instructions here => http://css-tricks.com/perfect-full-page-background-image/

Maverick
  • 1,988
  • 5
  • 24
  • 31
0

Also consider for further review and options, as in my case, the value of the 

background-position:

setting options...

http://developer.mozilla.org/en-US/docs/Web/CSS/background-position

and also 

background-origin:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

that accompany the backbackground-image CSS style setting.

MistereeDevlord
  • 876
  • 7
  • 10
0

afaict, with a background image added

e.g. background: url(back.jpg) fixed;

all that's needed to make it scale, is

background-size: cover;

less is more. ;)

digit
  • 275
  • 1
  • 3
  • 8
  • added this answer for expedience and brevity, sparing my dyslexic beffuddlement and extra editting-out of the stuff i find supperfluous in jackreichert's good answer, every time i come back here to remind me over the years. – digit Jun 26 '19 at 01:17