How to make an background image seem like a single image

Question

How can I stop my background images to repeat? My question is more like how can to make my image set so that through out my whole web page it will seem like one image without seeing repetitions.

@raiyan106, were any of our responses helpful? Cheers! – 2540625 Jul 18 '14 at 00:06 — 2540625, Jul 18 '14 at 00:06

score 0 · Answer 1 · answered Jul 17 '14 at 16:51

0

Try this CSS3 snippet:

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

answered Jul 17 '14 at 16:51

simeg

1,889
2
26
34

1

Vendor prefixes appear to be needed only to support Android 2.3; current version is 4.4. All other browsers appear to have supported `background-size` fully. http://caniuse.com/#search=background-size – 2540625 Jul 17 '14 at 17:05

score 0 · Answer 2 · edited Jul 17 '14 at 17:53

0

background-size: cover;                    
background-repeat: no-repeat;

edited Jul 17 '14 at 17:53

Alexander Tobias Bockstaller

4,657
4
36
58

answered Jul 17 '14 at 16:53

Domain

11,562
3
23
44

score 0 · Answer 3 · answered Jul 17 '14 at 16:53

0

Use "background-repeat: no-repeat; " in your CSS.

#button {
    background: url('Images/image.png');
    background-repeat: no-repeat;   
}

answered Jul 17 '14 at 16:53

kinezu

1,212
2
12
23

2540625 · Answer 4 · 2014-07-17T17:06:55.763

At first read, it sounded like you were asking for:

background-repeat: no-repeat;

But if you want the image to stretch proportionally to fill the entire background, then you want:

background-size: cover;

DEMO: http://jsbin.com/viyay/1

#container {
  background-image: url(http://placekitten.com/900/800);
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background-size: cover;
  background-position: center;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="container">

    <!-- YOUR WEBSITE CONTENT HERE -->

  </div>
</body>
</html>

ALTERNATE DEMO (no stretch-to-fill): http://jsbin.com/dewucu/1

#container {
  background-image: url(http://placekitten.com/300/300);
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background-repeat: no-repeat;
  background-position: center;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="container">

    <!-- YOUR WEBSITE CONTENT HERE -->

  </div>
</body>
</html>

How to make an background image seem like a single image

4 Answers4