I've been trying to get a working 'random background on refresh' on my Tumblr theme. For those that don't know, Tumblr themes are made up of HTML with embedded CSS and JavaScript.
Right now , I'm using this script:
<script type="text/javascript">
var bg1 = 'http://i.imgur.com/image1.jpg';
var bg2 = 'http://i.imgur.com/image2.jpg';
var bg3 = 'http://i.imgur.com/image3.jpg';
var bg4 = 'http://i.imgur.com/image4.jpg';
var bg5 = 'http://i.imgur.com/image5.jpg';
var randBG=[bg1,bg2,bg3,bg4,bg5];
window.onload=function() {
num=Math.floor(Math.random()*randBG.length);
document.body.style.background='url('+randBG[num]+') no-repeat center center fixed';
</script>
It works, but it causes screen flicker and nullifies my "background-size:cover" property. I've tried image preloading, with no success. Tumblr doesn't support php, and I don't have a way of hosting a php file to link to.
So, two things. How can I randomize backgrounds on refresh without screen flicker, and, in the process, maintain the following CSS properties?
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
First of all, the flickering is depending on the pre-fetch and the size of the background image. So if the background image is HUGE it's not going to be ready at the same time as the document. Secondly, calling this on load event means you're waiting until everything is loaded on the screen before loading the background and therefore, you're upping the delay. Thirdly, like I said in my comment, you're blowing away your background-size within your Javascript so you need to do it differently.
Here's what I did.
CSS Snippet
<style>
...
body {
background: url('') no-repeat center center fixed;
-moz-background-size: cover;
background-size: cover;
}
...
</style>
Javascript
<script type="text/javascript">
$(document).ready(function(){
var bg1 = 'http://i.imgur.com/enkkn.jpg';
var bg2 = 'http://i.imgur.com/BZBke.jpg';
var bg3 = 'http://i.imgur.com/QOvQH.jpg';
var bgs = [bg1, bg2, bg3];
var num = Math.floor(Math.random() * bgs.length);
var bg = new Image();
bg.src = bgs[num];
$(bg).load(function(){
document.body.style.backgroundImage = "url(" + this.src + ")";
});
});
</script>
Note: These background images are actually huge and I don't recommend using something that big. Keep them compressed and small so they load faster.
I used jQuery since it has the ability to run something as soon as the $(document).ready event fires, which means it fires as soon as the document is ready in the background. I also wait until the image is actually loaded for use and only then do I back it the background image. I don't believe you'll be able to completely eliminate the flickering, but I think this will help.
Related
I have the following jQuery code to animate the background images with a parallax effect.
I have two parallax images on my page and it seems the background position of the second one located further down is already way out of position. I believe it's because the scrollTop function is constantly changing from the top of the site and not to the top of the div that the background image resides.
I got the code from here https://gist.github.com/omgmog/7198844
Any ideas on how I can fix this?
I've added this to a JSFiddle here to help someone figure the issue out -
jsfiddle.net/Ls0ftxvq/
$(function() {
var $el = $('.parallax-background');
$(window).on('scroll', function () {
var scroll = $(document).scrollTop();
$el.css({
'background-position':'center '+(-.4*scroll)+'px'
});
});
$(window).scroll();
});
Why don't use just CSS for do parallax effect?
Remove your javascript and add this code in your css file
.full-heignt {
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
you have an example here based on your code
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.
I'm running this JavaScript and CSS (jsfiddle) on this website (animevid-other) so what I need is to adapt the JavaScript and CSS to the column_sx or have the background centered on the left (where there's the column), is this possible?
I've found something that could have helped but I think it's not exactly what I need (multiple-backgrounds-left-half-and-right-half). So since I have not so much knowledge of JavaScript and just a few things about CSS, could you help me?
Edit : more details here http://i.imgur.com/DsF4q3M.png
You should set the background to colonna_sx instead of body. So add this to colonna_sx.
background-repeat: no-repeat;
background-position: center;
background-size: cover;
Then you should change the script. If you add jQuery you can change this.
document.body.background ='http://adventureofucm.com/OtherSites/image_background/'+num+'.jpg';
to this.
var backgroundpic = 'http://adventureofucm.com/OtherSites/image_background/'+num+'.jpg';
$('.colonna_sx').css("background", "url(backgroundpic)");
Without jQuery.
document.querySelector('div.colonna_sx').style.backgroundImage = 'url(http://adventureofucm.com/OtherSites/image_background/' + num + '.jpg)';
This should work in most browsers (IE8 and up) http://caniuse.com/#feat=queryselector.
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:
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/