Geek Answers Handbook

CSS scaled background image

I can get images scaled to fill the window when they are content, for example: (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 "body")

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

and

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

as selected, taken from here: Resize HTML5 canvas to fit the window , but as far as I understand, this should have even more fantastic code than I know, I continue, ... or am I doing something wrong ...

How can I get background images? (ideally without javascript)

+4
source share
4 answers

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

The specified HTML5 method:

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

The article mentions the topic.

+8
source

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

+1
source

We also consider for further consideration and parameters, as in my case, the value

 background-position:

settings ...

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

and

 background-origin:

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

which match the CSS style setting of the backbackground-image.

0
source

afaict, with background image added

for example background: url(back.jpg) fixed;

all you need to scale is

 background-size: cover;

less - more. ;)

0
source

More articles:


All Articles