background image javascript code example

Example 1: css background image

background-image: url("image.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;

Example 2: js background image

document.body.style.backgroundImage = "url('img_tree.png')";

Example 3: set an attribute background image javascript

function bg() {

   var imgCount = 3;
   var dir = 'http://local.statamic.com/_themes/img/';
   // I changed your random generator
  	//floor: helps getting a random integer
   var randomCount = (Math.floor(Math.random() * imgCount));
   // I changed your array to the literal notation. The literal notation is preferred.
   var images = ['001.png', '002.png', '003.png'];
   // I changed this section to just define the style attribute the best way I know how.
   document.getElementById('banner').setAttribute("style", "background-image: url(" + dir + images[randomCount] + ");background-repeat: no-repeat;background-size: 388px 388px");
}
// Don't forget to run the function instead of just defining it.
bg();

Example 4: adding background image css

/* Answer to: "adding background image css" */

/*
  The background-image property sets one or more background images
  for an element.

  By default, a background-image is placed at the top-left corner
  of an element, and repeated both vertically and horizontally.

  Tip: The background of an element is the total size of the
  element, including padding and border (but not the margin).

  Tip: Always set a background-color to be used if the image is
  unavailable.
*/

/* Set a background-image for the <body> element: */

body {
 background-image: url("paper.gif");
 background-color: #cccccc;
}

/* Set two background images for the <body> element: */

body {
  background-image: url("img_tree.gif"), url("paper.gif");
  background-color: #cccccc;
}

Tags:

Css Example

Recent Posts