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
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
Share Improve this question asked Mar 9, 2014 at 18:27 user2378230user2378230 311 silver badge4 bronze badges 04 Answers
Reset to default 5The reason why it happens is because background is a posite 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] + ")";
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
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.
Because you overwrite the whole background style with document.body.style.background including repeat property.
Change it with document.body.style.backgroundImage.