CODEWITHSUNDEEP
javascriptandroidhtmlcss
blueace
blueace

Reputation: 1

Background image bigger than viewport

Let say I have for smartphone visits to my site

    <meta name="viewport" content="width=360, initial-scale=1.0, user-scalable=no" />

and a big background image like 1000x1000.

I only want to be able to fix the size of my background image, even if it's bigger than the viewport, to allow stuff like a zoom.

<body style="background: black url('pic.jpg') no-repeat; ">

works fine with the original size, but 

<body style="background: black url('pic.jpg') no-repeat; background-size:750px">

limit the size of my picture to the viewport width.

So my question : how can I set the background image size to the any value if it's bigger than the viewport width ?

Upvotes: 0

Views: 1213

Answers (2)

JuleaJ
JuleaJ

Reputation: 221

#bg-img {
  width: 100%;
  height: 100vh;
  background-image: url(img/yourphoto.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
<body id="bg-img">

Upvotes: 0

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14012

Set background-size to 100% 100% to stretch and don't preserve aspect ratio.

Set background-size to cover to stretch, crop redundant parts and preserve aspect ratio.

Set background-size to contain to stretch, add extra space where needed and preserve aspect ratio.

Upvotes: 1

Related Questions