How do I get a background to stretch to the full width?

Question

I have to fix by HTML page's background for full width, but the height of the background is not as per my design. How can I fix it?

CSS Code:

html {
    background: url(images/body_bg.jpg') no-repeat top left fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

remove backgroun-size:cover,it should be stretch your image as per the browser width and height..and give large bg image. — Krish, Feb 20 '14 at 05:45
You have a type in your code you are missing a `'` in your path declaration — lazyprogrammer, Feb 20 '14 at 05:59

score 1 · Answer 1 · answered Feb 20 '14 at 05:57

1

You're missing a ' in the url

background: url('images/body_bg.jpg') no-repeat top left fixed;

Demo

answered Feb 20 '14 at 05:57

Zach Saucier

23,662
12
81
137

score 0 · Answer 2 · edited May 23 '17 at 12:03

0

Use background-size like the one used below,

body {
  background-image: url(image1.jpg) no-repeat;
  background-size: 100%;
}

Some useful links :

Scale background image style

Stretch and Scale a CSS image Background - With CSS only

edited May 23 '17 at 12:03

Community

1
1

answered Feb 20 '14 at 06:07

Kapil

1,743
6
22
42

How do I get a background to stretch to the full width?

2 Answers2