Javascript background image no repeat fit code example
You must set image.style.width and image.style.height on an actual image DOM object, not on the URL as you are currently trying to do.
As an image object is not used for background images, you can’t really directly do what you’re trying to do for a background image.
You could use the CSS background-size property, but that is fairly new and is not supported in versions of IE prior to IE9. If you were using that, you would set the actual size for that, not «cover» .
You could also use an actual DOM image and then present that DOM image as centered in your page if that’s what you’re really trying to do.
For example, here’s how you create a DOM image object, assign it a URL, set it’s size and insert it into your page:
var imgArray = new Array("img1.jpg", "img2.jpg", "img3.jpg"); var aImg = Math.floor(Math.random()*imgArray.length); var imgURL = imgArray[aImg]; var img = new Image(); img.src = imgURL; img.style.width = "300px"; img.style.height = "300px"; img.id = "centeredImage"; document.body.appendChild(img);
You could then use CSS to position is in the center of your page if you wanted.
Working demo here: http://jsfiddle.net/jfriend00/jqMtV/
No, you have no elements you could (re)size (btw, they would not need ids to be selectable). Your use of rsize(imgArray[aImg]) operates on the array members, which are strings and not DOM elements, so setting values on their non-existent style property would throw an error.
Yet, you’re already on the right way with using the backgroundSize style property. Just don’t set it to cover , but to the size you need!
If you would want to use a element, add this at the end of your :
Javascript — Resizing background images, 2 Answers. You must set image.style.width and image.style.height on an actual image DOM object, not on the URL as you are currently trying to do. As an image object is not used for background images, you can’t really directly do what you’re trying to do for a background image. You could use the CSS …
How to prevent a background image flickering on change
Try to preload the image resource to the device storage by including the image in DOM like in the following HTML-Code. Maybe the error comes up because the image resource need to be loaded which takes some time (flickering).
You may prefer to use sprites-images. By using sprites your application will need less HTTP-Requests to load all ressources into your page. Also add the following CSS styles if you are using css animations . It will prevent background flickering on mobile devices:
You can also «force» hardware acceleration by adding this to your background element:
-webkit-transform: translate3d(0, 0, 0);
Another option is to use image instead of DIV and change only the image url.
Preload your image like this, no need to include a with display: none
Stretch and scale a CSS image in the background, I’ve seen some questions on Stack Overflow that do the job, like Stretch and scale CSS background for example. It works well, but I want to place the image using background, not with an img tag. In that one an img tag is placed, and then with CSS we tribute to the img tag. width:100%; height:100%; It works, …
How to loop a css background image with Jquery every few seconds?
How to repeat background image vertically and, Syntax: We are also the size of the background image using the background-size property. Output: As you can see in the output the image is repeating horizontally now. Example 2: Now let’s repeat the image vertically. The repeat-y property is used to set the background image repeated only vertically. …
Change the body background image with fade effect in jquery
Re-UPDATE of the UPDATE:
Even NEWER Fiddle (without arguments.callee)
Javascript improvements
CSS corrections (fits full page now)
Added option for random sequence of images instead of sequential
=> Alternate version of NEWER Fiddle
BIG UPDATE
Took the meat of this code from this previous answer and added some bling (using my site background stash lol)
This example uses an interval of 1000 which is one second. You can change this value for whatever period of time you’re looking for.
Noticed your question asked for a fade so I added a CSS3 property on body:
The fiddle has been updated.
Building on the answer from Dan-Nolan (formerly user506980), you can also assign the backgrounds to an array and then call each background from the array with a counter
jsFiddle Demo
Further, you can assign the setInterval function to a variable, and then use that variable later to stop the repeats.
$(document).ready(function() < var cnt=0, bg; var $body = $('body'); var arr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg','bg6.jpg']; var bgrotater = setInterval(function() < if (cnt==5) cnt=0; bg = 'url("' + arr[cnt] + '")'; cnt++; $body.css('background-image', bg); >, 1000); //To stop the backgrounds from rotating. Note the critical step above //of assigning the setInterval function to a variable, in order to //use it again (below) to stop the repeating function $('#some_button_id').click(function() < clearInterval(bgrotater); >); >); //END document.ready
HTML DOM Style background Property, The background property sets or returns up to eight separate background properties, in a shorthand form. With this property, you can set/return one or more of the following (in any order): background-color. background-image. background-repeat. background-attachment. background-position.
How to style background image to no repeat with JavaScript DOM?
In this tutorial, we will learn to style the background image to no repeat with JavaScript DOM. To style the background image to no repeat with JavaScript, use the backgroundRepeatproperty. It allows you to set whether the background image repeats or not on a page.
The use of images in the background really makes the page attractive. But before using the image in the background, one must need completely understand the properties used to set the images as the background.
Otherwise, it will create problems for you like not showing the full image in the background, repeating the image horizontally or vertically many times, etc. In this tutorial, we are going to discuss how we can style the background image to no-repeat with JavaScript DOM.
Using the backgroundRepeart Property
To style the background image to no repeat, we use the backgroundRepeat property that takes the similar values as we give to the background-epeatproperty in CSS. The backgroundRepeat property accepts the following value −
initial − The initial value will set the backgroundRepeat property to its default value.
inherit − It will set the same value which given to the parent element of the element to which we are currently setting the property.
repeat − This is the default value of the backgroundRepeat property that repeats the image in both horizontal as well as vertical directions.
repeat-x − It sets the property to repeat the image in the horizontal direction only.
repeat-y − It sets the property to repeat the image in the vertical direction only.
no-repeat − This value sets the backgrounRepeat property to never repeat the image neither in horizontal nor in the vertical direction.
Syntax
The following syntax will be followed to set the backgroundRepeat property to style background image to no repeat −
var varName=document.getElementById('id') varName.style.backgroundRepeat="value";
In the above syntax, first, we get the element to which we want to set the property using its id and then assign a value to the property.
Let us under it with help of some code examples.
Algorithm
Step 1 − In the first step, we attach a background image to the body element of the document using internal CSS.
Step 2 − In the next step, we will change the backgroundRepeat to no−repeat using JavaScript DOM, which is by default set to repeat.
Step 3 − In this step, we will show all the changes by instructing the user to click on the button to style the background image to «no repeat«.
Example 1
The below example will explain how we can use the backgroundRepeat property to style the background image to no repeat with JavaScript DOM −
Style background image to no repeat with JavaScript DOM
Before clicking the button
function display()
In the above example, we used the backgroundRepeat property with the value no−repeat on the body tag to stop repeating the image. All the changes will be visible to you just by clicking the button.
Let us discuss another example in which the image is repeating in the horizontal direction −
NOTE − The algorithm of the above example and this example is almost similar; you just need to add the background−repeat property in internal CSS while giving a background image to the body tag. As shown below example −
Example 2
The example below will illustrate the use of backgroundRepeat property −
Style background image to no repeat with JavaScript DOM
Before clicking the button
function display()
In this example, we can clearly see that before we click the button the image was repeating in the horizontal direction while after clicking on the button the image stopped repeating and only a single image is visible on the whole screen.
Let us see another example where the image is repeating in the vertical direction.
NOTE: The algorithm of this example is similar to the previous one; you just need to replace the repeat−x in the previous example with repeat−y to repeat the image in the vertical direction.
Example 3
Below example shows the vertical image repetition stopped using the backgrounRepeat with JavaScript −
Style background image to no repeat with JavaScript DOM
Before clicking the button
function display()
In this example, we have stopped the image repeating in the vertical direction by using the backgroundRepeat property with JavaScript DOM.
In this tutorial, we have learned about the backgroundRepeat property of JavaScript DOM to stop repeating the image in any direction, whether it is repeating in vertical, horizontal or in both directions.
