Full page size background image - javascript

I have a background image for my html page. I set it through css style:-
html{
margin-top:10px;
background: url(xxxxx.jpg) no-repeat center center fixed;
background-size: cover;
}
I want to know how I can change it dynamically it from the Javascript side.
I have tried something like:
document.getElementById("html").style.backgroundImage = "url('yyy.jpg')";
but that doesn't change the image.
Without using jQuery, how can I access the html element and change its bkImage, say every 5 seconds to make it like a slideshow. (I will be storing my image urls in an array).

The background image is not really tied to the html tag but the body tag.
Try:
body
{
background-image: url(xxxxx.jpg);
}
And the script:
document.getElementsByTagName("BODY")[0].style.backgroundImage = "url('zzzzz.jpg')";
If this works as expected (you see zzzzz.jpg, not xxxxx.jpg) then you're ready to fix the rest of the CSS code.
EDIT: tested the code and fixed a bug. You must assign backgroundImage = "url('zzzzz.jpg')", not simply the filename as I've written before.
As an example, this works perfectly, all you need are two images (red.jpg and blue.jpg):
<html>
<head>
<style>
body
{
background-image: url('red.jpg');
}
</style>
</head>
<body>
<script>
document.getElementsByTagName("BODY")[0].style.backgroundImage = "url('blue.jpg')";
</script>
</body>
</html>
EDIT 2:
The rest of the CSS must not change, so you'll still have:
body
{
margin-top: 10px;
background: url('xxxxx.jpg') no-repeat center center fixed;
background-size: cover;
}
The background property is a compound:
background: url('xxxxx.jpg') no-repeat center center fixed;
^ ^ ^ ^
URL R H V
URL: the image url
R: repetition
H: horizontal alignment
V: vertical alignment
With
background-image: url('xxxxx.jpg')
you just change the URL part of the above compound, leaving the rest as it was.
If an image is too small it might be stretched to cover the whole screen.
So for a good slide show be sure that all images have the same size.

To access the html element you can use document.documentElement:
document.documentElement.style.backgroundImage = "url('yyy.jpg')";
To change it every X seconds you can use setInterval() and have your images in an array.

Related

Can't get image to fit background of body element

I'm currently sitting here trying to write a decent looking login page for my xfce setup.
I'm wanting the profile picture and background image to change when someone inputs the wrong password. I currently got it working to the point where it changes the background but it doesn't stretch it to fit my screen as I need the javascript to run background-size: cover;.
My current javascript line is currently document.body.style.background = " #000000 url('images/bg.gif') no-repeat center fixed"; JQuery is not an option, don't ask why. It just isn't.
Please and thank you.
You can use document.body.style.backgroundSize = "cover" to force the background to "fill the screen", as you say.
It's recommended (much easier and maintainable) to use CSS classes to style your page and to use JS to switch classes.
So, in your case, JavaScript can be something like:
document.body.className = 'wrong-password';
and CSS would be:
<style>
.wrong-password {
background: #000000 url('images/bg.gif') no-repeat center fixed;
background-size: cover;
}
</style>
And you can easily add more styles, or even change children's style (e.g. avatar) easily, like so:
<style>
.wrong-password .avatar {
display: none;
}
.wrong-password .some-placeholder {
display: block;
}
</style>

Javascript Image Placement

So I am building a puzzle pipe game and wanted each level to have a different background. The background is loaded from an img src only problem the image at he moment doest move with the screen size... I always want it to be centred so you can see the middle of the image.
For example a background that looks perfect on a 13" screen on a 27" looks a total mess... Is there a simple way I can keep the image within the same place? I know I could set up a css rule however was wondering if there was way a way to add it into the js script?
So far my js script looks like this (for one level):
var levels = {
level1: {
level: [[["0","1","0","1"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"]],[["0","0","1","1"],["0","1","1","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"]],[["0","0","0","0"],["0","0","1","1"],["1","1","0","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"]],[["0","0","0","0"],["0","0","0","0"],["0","0","1","1"],["1","0","1","0"],["1","0","1","0"],["1","1","0","0"]]],
backgroundURL : "http://website.co.uk/client_files/level1.jpg"
},
Thank you
If you want your game to always be in the middle of the screen,
follow this article:
https://css-tricks.com/positioning-offset-background-images/
suppose you have a <div id="game"></div> as your canvas
set a base css to center the element background
#game{
background-color: lightgray;
background-position: center center;
background-repeat: no-repeat;
width: 80%;
height: 80%;
position:absolute;
}
the javascript code will be very simple
just get the main element and update just the image url
var canvas = document.querySelector('#game');
canvas.style.backgroundImage = " url('"+levels.level1.backgroundURL+"')";
// simulate a level change after 3 seconds
setTimeout(function(){
canvas.style.backgroundImage = "url('"+levels.level2.backgroundURL+"')";
}, 3000);
look a running code here:
http://jsfiddle.net/zw7dv9at/2/

how to center a random background in a javascript

I've looked on stackoverflow for a background js. After trying some I found what I thought was exactly what I need:
<script type="text/javascript">
ChangeIt();
</script>
<script type="text/javascript">
var totalCount = 8;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'http://adventureofucm.com/OtherSites/image_background/'+num+'.jpg';
document.body.style.repeat = "contain";// Background repeat
}
</script>
However, the backgrounds don't center, you just see 'em on the top left corner. So I googled on the net but... well idk anything about js, just a little few things. I'm helping a friend with his website and we're stuck on this. I'm just hoping someone with more knowledge than us can help by giving a look.
EDIT : Here's what i mean by "center" : http://i.imgur.com/G3Z9epT.png
Here's a fiddle that uses css instead of js for this, also I've added a background-size on body so the entire image is visible on all screen sizes, this is optional however - http://jsfiddle.net/dk329q1L/
Here's the css -
body {
background-position: center;
background-repeat: no-repeat;
background-size: cover; /* Entire background image always stays in view */
}
you could achive this by doing this also:
background-position: center;
To center the background add:
document.body.style.backgroundPosition = "center";
you have to set margin auto in this case ,but you have to specify width
you have to assign id :
{
width:100px;
} margin: auto;
You should set the background-position for your element, add this line to your code:
document.body.style.backgroundPosition = "center top";
The value center top means that the image will be placed center in horizontal, and will be placed at top in vertical.
jsFiddle Demo.
The below image shows other values you can use for background-position:

How can I force the download of unused CSS images?

This is kind of a continuation of a QUESTION I ASKED YESTERDAY and an off-shoot of THIS QUESTION.
Basically, I am using jquery to change css background images on page scroll, however on first visit, when the background changes on scroll it only starts loading then and there making for a poor user experience.
I am using cache headers so that this only happens once, but still it would be nice if it didn't happen at all.
How can I load the second CSS image before the page scrolls to make the transition seamless?
I am only trying to load this one image in the background, not preload all images on the page before display or anything...
Current code I am using...
jquery
jQuery(window).scroll(function(){
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = jQuery(window).scrollTop();
if(scrolledFromtop > fromTopPx){
jQuery('html').addClass('scrolled');
}else{
jQuery('html').removeClass('scrolled');
}
});
css
html {
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html {
background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg);
}
html.scrolled {
background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg);
}
DEMO - Scroll to see in action.
Few options here:
Add a hidden element and add your image as a background; the browser will load it and is smart enough to know that it doesn't need to reload
What I would consider the cleaner way: load your second image behind the first one:
html {
background-image: url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg),
url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg);
}
html.scrolled {
background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg);
}
On the left side add all your images and make all of them positioned absolutely
img{
position :absolute;
z-index:1;
}
So all images will be loaded on windows load. And just change their z-index according to scroll.
One more option is there is to make ur images in a single sprite and display them by changing position..in this way u will save 1 extra http call itself. U can create image sprite with http://spritegen.website-performance.org/

Random Header image on Page Refresh, CSS jquery javascript?

I need help finding code for my web page. I have a "customize.css" page which has code for loading the header image. But the header loads on a "header.asp", which is then loaded on the index page "default.asp". I guess my question is what can I use to generate, one of four of the header images I have created, randomly on each page reload/refresh for a header?
This code is from my "customize.css" file. After I get the code, what do I put in the "background-image:" for it to load to the page?
#header {
color: #FFF;
height: 350px;
background-color: transparent;
background-image: WHAT DO I PUT IN HERE?;
background-position: left top;
background-repeat: no-repeat;
}
I have searched the net forum after forum for the past week in search of an answer but have yet to get one. Anyone have any ideas? Thanks
I'd go simple. Define 4 different classes, each with a different background image. In your header ASP script, select one of the 4 classes at random, and output that class into your code. It's simple, the images will cache as they are displayed, and because you avoid JavaScript, it works for 100% of browsers/users. For a small project, it's easy to maintain.
Now, if you get into 100 different background images, you would want to do something different.
If it were me, I would create a separate web service to serve a random image. I would use PHP, but I assume you can do it in ASP).
#header {
background-image: url(/yourWebService.asp);
}
Have the service select one of the images at random, and return it accordingly.
The only way of doing that in the css is by calling a URL that returns the random image. Something like:
#header { color: #FFF; height: 350px; background-color: transparent; background-image: "/loadimage"; background-position: left top; background-repeat: no-repeat; }
But then you must code a service at /loadimage that returns the image.
It will be much more easy change the image at the page load via javascript. Assuming you have the images img0.jpg, img1.jpg, img2.jpg and img3.jpg at the images directory, you could do:
You can do:
<body onload="document.body.background = '/images/img'+Math.floor(Math.random()*4)+'.jpg';" />
See the random image header of this page
I am using a specify class for change the background-position css property.

Categories

Resources