CSS Background fit every resolution

css browser background resolution adjustment
Benjamin Jones picture Benjamin Jones · Nov 18, 2013 · Viewed 28.2k times · Source

Ok, so I am a newbie. I want my background (which is a image), to fit every resolution of the Web Browser no matter the browser resolution. I found this trick:

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

BUT all it does is fits the background to the full size of the display, not the browser. So if the display is 1366x768 and the browser is maximized, then the background is properly showing as "full". However if I then adjust the browser , the background image is not showing correctly.

So what do I need to do, so the background image is adjusted with the browser? So if the browser is 1300x700, the background image is 1300x700 but if the browser is 900x600 then the backgroud image is 900x600. Again, Im a newbie so please provide some examples.

Answer

itsazzad picture itsazzad · Nov 18, 2013

cover This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

contain This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area. So try using contain instead of cover

100% This will scale 100% to both of height and width without any cropping.

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

This may help you: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

And this https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Related questions

Hiding the scroll bar on an HTML page

Can CSS be used to hide the scroll bar? How would you do this?

Read More
How can I resize an image dynamically with CSS as the browser width/height changes?

I wonder how I could make an image resize along with the browser window, here is what I have done so far (or download the whole site in a ZIP). This works okay in Firefox, but it has problems in …

Read More
Disabling browser print options (headers, footers, margins) from page?

I have seen this question asked in a couple of different ways on SO and several other websites, but most of them are either too specific or out-of-date. I'm hoping someone can provide a definitive answer here without pandering to …

Read More