CODEWITHSUNDEEP
htmlcssresponsive-design
Alex Sandor
Alex Sandor

Reputation: 13

How to make background image scale to 100% of height and width even if screen size is not big enough

Im trying to make my bodys background image to scale to the full resolution even if the window is pinned to the left of my screen on windows, it is 1080p picture, heres an example of what i mean.

full window size

http://gyazo.com/4c2ffe00930d09cec27404ecccdeec18

scaled window size

http://gyazo.com/d5afdbdf43ef1a06ab1d52df6ce956b7

heres my bodys css

body {
    margin: 0px;
    padding: 0px;
    background: url('Images/background.png') #A98436 no-repeat left top;
    background-size: 100%;
    font-family: 'ubuntu', 'Open Sans', sans-serif;
    overflow-x: hidden;
    overflow-y: hidden;
}

Upvotes: 1

Views: 1439

Answers (4)

Jacob
Jacob

Reputation: 2155

Try the following: 

html {
  width: 100%;
  height: 100%;
  }
body {
    min-width: 100%;
    min-height: 100%;
    margin: 0px;
    padding: 0px;
    background: #A98436 url('http://i.gyazo.com/4c2ffe00930d09cec27404ecccdeec18.jpg') no-repeat left top;
    background-repeat: no-repeat;
    background-size: contain; /* maintains background-image's ratio while keeping it within body */
    font-family: 'ubuntu', 'Open Sans', sans-serif;
    overflow-x: hidden;
    overflow-y: hidden;
}

See background-size - CSS | MDN for more on background-size.

Upvotes: 0

Mihai Alexandru Tutu
Mihai Alexandru Tutu

Reputation: 26

Try this:

min-width: 100%; min-height: 100%;

The idea is that you want your image to stay the same size, regardless the resolution.

Upvotes: 1

Juan
Juan

Reputation: 5050

you can set it to background-size: cover cover;

Demo

body {
    min-width: 100%;
    margin: 0px;
    padding: 0px;
    background-image: url('http://i.gyazo.com/4c2ffe00930d09cec27404ecccdeec18.jpg');
    background-repeat: no-repeat;
    background-size: cover cover;
    overflow-x: hidden;
    overflow-y: hidden;
}

Upvotes: 3

P6345uk
P6345uk

Reputation: 723

Set min height and width?

min-height: 1920px; min-width: 1024px;

http://www.w3schools.com/cssref/pr_dim_min-height.asp

http://www.w3schools.com/cssref/pr_dim_min-width.asp

Upvotes: 0

Related Questions