CODEWITHSUNDEEP
htmlcss
Beginner
Beginner

Reputation: 29533

how to have a complete background on site fit to screen resolution?

I hope I ask this correctly. What I want to do is set a background to the body of my website page which fills the users screen. So the image stretches if the screen is big and when they reduce the browser the background image reduces with it?

#homebdy
{
   background-image:url('../images/bghome.jpg');
}

Upvotes: 0

Views: 7470

Answers (6)

alokrajiv
alokrajiv

Reputation: 1186

background-size: 100vw 100vh;
background-image:url('your urlurl');
background-repeat: no-repeat; /* this line not necessary */

Solution of this problem with CSS3

Though this post is old, As with 2014 best soln.

Upvotes: 0

Ghost Answer
Ghost Answer

Reputation: 1498

try this

homebdy{ background:url(../images/bghome.jpg); height: 100%; position: absolute; top: 0; }

Upvotes: 0

Chris Lang
Chris Lang

Reputation: 43

Try these options. If you want to stretch the image then background-size: 100%;, background-size: cover; will work. If you wanna keep it proportional then use background-size: contain

http://compass-style.org/examples/compass/css3/background-size/

Upvotes: 0

Jannis M
Jannis M

Reputation: 745

This will do it for you:

#homebdy{
  background-image:url('../images/bghome.jpg');
  height: 100%;
  position: absolute;
  top: 0;
}

Next step would be to center the image depending on viewport size. There for I would recommend the use of jQuery. For example if you use pictures with a ratio of 4:3, then do this:

var indent = (($(window).width() - (($(this).height())/3)*4) / 2);
$('#homebdy').offset({left: indent});

You can see a live example on a website I am building currently

Upvotes: 2

sinsedrix
sinsedrix

Reputation: 4775

If you want your image to be streched according to its container:

#homebdy {
  background-image:url('../images/bghome.jpg');
  background-size:cover;
  width:100%;
}

Upvotes: 2

Code Lღver
Code Lღver

Reputation: 15603

give the following CSS:

#homebdy{
  background-image:url('../images/bghome.jpg');
  height: 100%;
  width:100%;
}

Upvotes: 0

Related Questions