CODEWITHSUNDEEP
htmlcss
Rahul Naidu
Rahul Naidu

Reputation: 43

Full screen Background

i Want my background image to completely fil in the browser window. I tried css

body {background:url(bg.jpg) fixed no-repeat 100%}

but its not covering entire screen.

Upvotes: 0

Views: 112

Answers (5)

FelixH
FelixH

Reputation: 145

The CSS:

background: url(yourImage) no-repeat center center fixed;
background-size: cover;

This pins (fix) the picture andalso stretches it.

Upvotes: 0

Riskbreaker
Riskbreaker

Reputation: 4791

If you want cross browser including IE try this method:

        theWindow.resize(function() {
            resizeBg();
        }).trigger("resize");

http://jsfiddle.net/Riskbreaker/A5ZNy/

Which is also mentioned in csstricks:

http://css-tricks.com/examples/FullPageBackgroundImage/jquery.php

Upvotes: 0

This_is_me
This_is_me

Reputation: 918

css: 
background-size: cover;

is what you are looking for i guess. for cross borswer support try this: CSS:

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

source: css tricks full page background

Upvotes: 4

user2188149
user2188149

Reputation:

create an id for the img tag and the following formatting

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

Upvotes: 0

evilscary
evilscary

Reputation: 2217

I use backstretch.js to fit backgrounds to window size. It's jquery, obviously, but it's very reliable from my experience.

http://srobbin.com/jquery-plugins/backstretch/

Upvotes: 0

Related Questions