Prevent Background Repeating

Question

How do I prevent a background from repeating? Currently it's repeated twice, but I need the background to fill the whole page without repeating (because otherwise it looks strange!). Below is my code, but I can provide a site link if needed.

HTML

<div class="container">
<img src="box.png" style="float: left;" />
<div class="navrow">
<ul>
<li class="navmenu" style="background: #6dc066;"><a href="index.php">Home</a></li>
<li class="navmenu" style="background: #a155e7;"><a href="about.php">About</a></li>
<li class="navmenu" onclick="shakeregister();" style="background: #ffa500;">Register</li>
<li class="navmenu" style="background: #3399ff;"><a href="play.php">Login</a></li>
<li class="navmenu" style="background: #ff6666; margin-right: 0px;"><a href="contact.php">Contact</a></li>
<div style="clear: left;"></div>
</ul>
</div>
<div style='clear:both'></div>
</div>

CSS

body {
 font-family: Titillium Web, sans-serif;
 background-image: url("images/polarvillebg.png");
}

h1, h2, h3 {
 font-weight: normal;
}

.container {
 width: 70%;
 margin: 0 auto;
 margin-top: 2%;
}

.navrow {
 float: right;
 text-align: center;
}

.navrow li {
 display: inline-block;
}

.navrow li a {
 color: #fff;
 text-decoration: none;
 width: 100%; 
 height: 100%;
 display: block;
}

.navmenu {
 height: 100px;
 width: 78px;
 color: #fff;
 margin-right: 4px;
 line-height: 100px;
 transition:height 0.5s; 
 -webkit-transition:height 0.5s; 
 box-shadow: rgb(204, 204, 204) 0px 0px 10px 0px;
 cursor: pointer;
}

.navmenu:hover {
 height: 107px;
}

Hi, Please do not deface your post after you have taken help from it. It is like cutting down a tree after taking shelter below it. Please allow the other future users to gain from the knowledge. The answerers would have put a lot of effort. Do not put their valuable time to waste. — Bhargav Rao, Jan 15 '16 at 18:49

Maximillian Laumeister · Accepted Answer · 2015-12-14T18:15:57.387

5

The CSS rule:

background-size: cover;

will make the background image large enough so that it covers the element that it's a background to. This will also have the side effect of not repeating the background image.

If you're still having trouble with background repeating after that, you can use:

background-repeat: no-repeat;

to explicitly force the background not to repeat.

So all together, in the code you provided, the full solution would be to change your body rule to this:

body {
 font-family: Titillium Web, sans-serif;
 background-image: url("images/polarvillebg.png");
 background-size: cover;
 background-repeat: no-repeat;
}

edited Dec 14 '15 at 18:15

answered Dec 14 '15 at 18:11

Maximillian Laumeister

19,884
8
59
78

Brilliant, thanks - just what I needed! – Mr. PV Dec 14 '15 at 18:13
Is it mandatory to use the background-repeat: no-repeat; or is it fine with just background-size: cover;? – Mr. PV Dec 14 '15 at 18:18
@Mr.PV It should be fine with just `background-size: cover;`. – Maximillian Laumeister Dec 14 '15 at 18:18
1

Great - I'll mark your response as the answer as soon as the time limit is up, thanks :) – Mr. PV Dec 14 '15 at 18:19

Jacob G · Answer 2 · 2015-12-14T18:17:50.680

0

Just use background-size:cover;:

background-size:cover;

Or, in just the background property:

background: url("images/polarvillebg.png") scroll no-repeat center/cover;

JSFiddle Demo

edited Dec 14 '15 at 18:17

answered Dec 14 '15 at 18:11

Jacob G

13,762
3
47
67

I couldn't got this solution to work - it prevented the background from displaying. – Mr. PV Dec 14 '15 at 18:13
@Mr.PV How didn't it work? check the demo – Jacob G Dec 14 '15 at 18:15
Your solution before you edited your reply wasn't working (the one in the background property) - your background-size:cover; solution worked fine. – Mr. PV Dec 14 '15 at 18:17
@Mr.PV The JSFiddle uses the one from the first answer – Jacob G Dec 14 '15 at 18:18
This is its css:`background: url("http://lorempizza.com/1000/1000") scroll no-repeat center/cover;` – Jacob G Dec 14 '15 at 18:18

score 0 · Answer 3 · answered Dec 14 '15 at 18:13

You can use this code to set the image to full screen background.

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

It will prevent from reapating, but there also exist : background-repeat in CSS.

score 0 · Answer 4 · answered Dec 14 '15 at 18:14

0

just say:

body{
   background-repeat: no-repeat;
   background-size: cover;
}

"no-repeat" tells the background image to stop repeating itself. "cover" tells the image to stretch on the whole viewport (without distortion).

answered Dec 14 '15 at 18:14

paul

340
5
14

Prevent Background Repeating

4 Answers4

JSFiddle Demo

Linked

Related