CODEWITHSUNDEEP
htmlcss
user1283674
user1283674

Reputation: 339

css - how to stretch and auto-resize background image

I'm trying to get my background image to stretch across the entire page, but so far i have this:

enter image description here

This is the picture i want stretched across the browser window:

enter image description here

My external CSS contains the code below:

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

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

Upvotes: 11

Views: 79149

Answers (6)

Arthur Weborg
Arthur Weborg

Reputation: 8590

Another option would also include:

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

Upvotes: 10

JMG
JMG

Reputation: 163

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%

Upvotes: 0

moodyjive
moodyjive

Reputation: 1807

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 info: http://css-tricks.com/perfect-full-page-background-image/

Upvotes: 1

MMM
MMM

Reputation: 7310

You can use:

background-size: cover;

However please bear in mind which browsers this supports. For example, this won't work in IE8 and below.

Upvotes: 21

digitalextremist
digitalextremist

Reputation: 5993

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

This method is cross-compatible for all browsers.

Upvotes: 0

alex
alex

Reputation: 490567

Use background-size: cover. Note its browser support.

MDN documentation.

Upvotes: 1

Related Questions