My site have a horizontal scroll structure and it's responsive. E.G. my site width: 9600px on my screen.

And i have a background image. Like this after opening body:

<div class="bg">
  <img class="bg-st" src="themes/bc/images/bc-bg.png"> 
</div>

And CSS:

.bg {
bottom: 15;
position: absolute;
z-index: 1;
width:100%
height:100%
}
.bg-st {
width:100%;
height:100%;
}

I have, stretch this background image according to the screen. My CSS code don't working. How can i do this via JavaScript or CSS?

My site have a horizontal scroll structure and it's responsive. E.G. my site width: 9600px on my screen.

And i have a background image. Like this after opening body:

<div class="bg">
  <img class="bg-st" src="themes/bc/images/bc-bg.png"> 
</div>

And CSS:

.bg {
bottom: 15;
position: absolute;
z-index: 1;
width:100%
height:100%
}
.bg-st {
width:100%;
height:100%;
}

I have, stretch this background image according to the screen. My CSS code don't working. How can i do this via JavaScript or CSS?

• javascript
• jquery
• image
• css
• stretch

• Can you please post all your code in jsfiddle, including an online reference to the image? – Tiago César Oliveira Commented Jan 24, 2013 at 14:36

3 Answers 3

For setting Background on Body of the page try the below CSS

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

If you want to stretch the image and set it to full screen then try the below...

#imgbg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5000;
}

<div class="bg">
  <img id="imgbg" src="themes/bc/images/bc-bg.png"> 
</div>

You could set it as the background of your div, and set the background-size property to cover:

.bg {
bottom: 15;
position: absolute;
z-index: 1;
width:100%
height:100%
background: url("themes/bc/images/bc-bg.png") no-repeat left fixed;
background-size: cover;
}

<div class="main">
    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa
<div class="bg">
  <img id="imgbg" src="image.jpg">
</div>

it shows the output like this

If you use the code like below

<style>
#imgbg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5000;
}
</style>

<div class="main">
    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa
<div class="bg">
  <img id="imgbg" src="image.jpg">
</div>

Then it dispaly the image like below....