Geek Answers Handbook

Css - how to stretch and automatically resize background image

I am trying to get a background image full page, but so far I have this:

enter image description here

This is the image I want to stretch in the browser window:

enter image description here

My external CSS contains the following code:

hr {color:sienna;} p {margin-left:20px;} body {background-image:url("mybackground.jpg")}

Can someone tell me how can I edit the CSS file to fix my problem?

+6
source share
6 answers

You can use:

 background-size: cover;

However, remember which browsers support . For example, this will not work in IE8 and below.

+13
source

Another option also includes:

 body{ background-image:url("mybackground.jpg") background-size:contain; background-repeat:no-repeat; }
+4
source

Use background-size: cover . Pay attention to browser support.

MDN documentation .

+1
source

You need to make an <img> with a low z-index , with position: fixed , and then for the <img> , use height: 100%; width: auto height: 100%; width: auto or vice versa.

This method is cross-compatible for all browsers.

0
source

Background size will do the trick:

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

Check this out for more information: http://css-tricks.com/perfect-full-page-background-image/

0
source

Have you tried using

 background-size: 10px 10px

Change 10 to the width and height of the body.

You can also do

 background-size: 100%
0
source

More articles:


All Articles