CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2378230
user2378230

Reputation: 31

CSS background-repeat: no-repeat; still repeating

I have...

    html, body {
    background-size: contain;
    background-repeat: no-repeat;
    }

As my CSS and in my HTML I have 

<html>
<head> 
<title>Wut</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="page">
    </div>
   <script type="text/javascript">
        var imgCount = 3;
        var dir = 'img/';
        var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
        var images = new Array();
            images[1] = "1.png",
            images[2] = "2.png",
            images[3] = "3.png",
         document.body.style.background = "url(" + dir + images[randomCount] + ")";
    </script>
</body>

For some reason the background which is randomly selected by the JS scrolls and i don't want/need it to. Also as a side note: I managed to make it stop scrolling at one point but when i added background-color, half of the background image was covered up and you couldn't see the background image itself.

Thanks for the help

Upvotes: 3

Views: 4299

Answers (4)

Pho3nixHun
Pho3nixHun

Reputation: 828

Because you overwrite the whole background style with document.body.style.background including repeat property.

Change it with document.body.style.backgroundImage.

JSFiddle

Upvotes: 0

MarioDS
MarioDS

Reputation: 13063

The reason it's repeating, is that you're setting the whole background property. This overrides any specifics, such as background-repeat. Try this line:

document.body.style.background-image = "url(" + dir + images[randomCount] + ")"

instead of what you have.

Upvotes: 0

dfsq
dfsq

Reputation: 193271

The reason why it happens is because background is a composite property which includes background-color, background-image, background-repeat, background-position, background-attachment. It means that when you set background alone without specifying background-repeat you simply overwrite previously defined rule, it just falls back to default value which is repeat. To fix it you should explicitly provide it:

document.body.style.background = "url(" + dir + images[randomCount] + ") no-repeat";

or set background-image insted:

document.body.style.backgroundImage = "url(" + dir + images[randomCount] + ")";

Upvotes: 5

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

Add this line

document.body.style.backgroundRepeat="no-repeat";

or another way existing line replace this one

document.body.style.background = "url(" + dir + images[randomCount] + ") no-repeat";

HTML

<html>
  <head> 
   <title>Wut</title>
   <link href="style.css" rel="stylesheet" type="text/css">
  </head>

<body>
    <div id="page">
    </div>
   <script type="text/javascript">
        var imgCount = 3;
        var dir = 'img/';
        var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
        var images = new Array();
            images[1] = "1.png",
            images[2] = "2.png",
            images[3] = "3.png",
         document.body.style.background = "url(" + dir + images[randomCount] + ")";
         document.body.style.backgroundRepeat="no-repeat";
    </script>
</body>

CSS no need to define

Upvotes: 1

Related Questions