I use progressive CSS to style my website background images. I have found a few tutorials on cycling through images with jQuery, but I have yet to see any that will do it through CSS. All of them are with HTML. How can I do this so that the Jquery or Javascript cycles through images without having to create a div to do so.
My CSS:
html {
background: url('../assets/homepage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You sure can do it, but there won't be any transition when the image changes:
html, html.slide1 {
background: url('../assets/homepage1.jpg') no-repeat center center fixed;
/* add vendor prefixes */
background-size: cover;
}
html.slide2 {
background-image: url('../assets/homepage2.jpg');
}
html.slide3 {
background-image: url('../assets/homepage3.jpg');
}
$(function () {
var classList = ['slide1', 'slide2', 'slide3'],
$html = $('html'),
last = classList.length - 1,
current = 0;
setInterval(function () {
current = current == last ? 0 : current + 1;
$html.prop('class', classList[current]);
}, 1000);
});
Here's the fiddle: http://jsfiddle.net/rmR7V/
Try sliding the background image off-screen, changing it and sliding it back on.
<style>
html {
background: url('Image1.jpg') no-repeat center center fixed;
background-size: cover;
}
</style>
<script type="text/javascript">
$(document).ready( function() {
$('html').animate({
"background-position": -2048
},2000, function() {
$('html').css('background-image',"url('Image2.jpg')");
$('html').animate({
"background-position": 0
},2000);
});
});
</script>
Related
i have searched google and on here but i cant exactly find a correct answer to my problem i used this code:
html {
background: url('../resources/imgs/bgs/mainbg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
that i got from the internet to set a background image that is always in the center and fits perfecly in the browser and it works great but i ran into a problem. i need to change the background image on a button click but i dont know how to target the html tag is it even possible? many thanks :)
my question was flagged as a duplicate but my problrm is not just getting the style of the html elememnt but changing it the same as the code snippet using only pure javascript
You have to set both backgroundImage and backgroundSize property. Try the following:
document.querySelector('#btnSetImage').addEventListener('click', function(){
var html = document.querySelector('html');
html.style.backgroundImage = "url('https://www.noodleman.co.uk/images/source/google_merchant_bulk_category_assign/google.jpg')";
html.style.backgroundSize = 'cover';
});
<button type="button" id="btnSetImage">Set Background Image</button>
Simply use:
document.getElementsByTagName('html')[0].style.backgroundImage = "url('img_tree.png')";
With jquery you could do the following
$('html').on('click', function(){
$('html').css({
"background": "url('https://picsum.photos/1200/3300/?blur') no-repeat center center fixed",
"background-size": "cover"
});
});
You can access the html element directly with documentElement:
/*Just change the image source with javascript*/
document.querySelector('#changeImage').addEventListener('click', function() {
document.documentElement.style.backgroundImage = 'url("https://www.fillmurray.com/400/400")';
});
/*Base settings in CSS*/
html {
background: url('https://www.fillmurray.com/g/400/400') no-repeat center center fixed;
/*This Would be a greyscale image*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<div style="color:#FFF;">Bill Murray!</div>
<!-- Just Some Content -->
<button id="changeImage">ChangeImage</button>
I have a piece of script that changes the background on click. But when I click anything even the screen, the background changes. I would like only the button to change
the background image. I just can't seem to code it properly in jquery. Any help is most appreciated. Thanks
<!DOCTYPE html>
<html>
<style>
body
{
background:url(Pic/jungle.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<body>
<button class="color" style="background-image: url('Pic/changebackground.png'); width:60px; height: 50px;background-repeat:no-repeat;background-color: transparent;border:none;"></button>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
var rotate = 0;
var colors = ["url('Pic/hi.jpg')", "url('Pic/jungle.jpg')"];
$('body').on("click", function () {
$(this).css({
'background-image': colors[rotate]
});
rotate++;
if (rotate >= 2) {
rotate = 0;
}
});
});
</script>
You want to tie the event to the button, then select the body and perform the css manipulation to that. You're code would look like this:
$('button').on("click", function () {
$('body').css({
'background-image': colors[rotate]
});
});
I have the following JavaScript companied with basic CSS to create a parallax background image, live preview of what I already have in a demonstration here: http://loai.directory
Here is the Javascript:
//Parallax background image
var velocity = 0.5;
function update() {
if ($(window).width() <= 1024) {
return;
}
var pos = $(window).scrollTop();
$('.parallax').each(function () {
var $element = $(this);
var height = $element.height();
$(this).css('background-position', '50%' + Math.round((height - pos) * velocity) + 'px');
});
};
$(window).on('scroll', update);
update();
CSS:
/*Backgruond Parallax*/
.parallax {
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#gallery .parallax {
background-image: url('../images/image.jpg');
padding: 100px 0;
}
#gallery .parallax.A {
background-image: url('../images/backgruond.jpg');
padding: 100px 0;
}
And finally the HTML:
<div class="topSection parallax">
<div class="content"></div>
</div>
The problem I am having is with the background images being cropped from the bottom, and the far you scroll down, the worse they get! I believe this is because the parallax function move the background image position to the top as you scroll... but how can I fix this? Please help.
The blue sections suppose to be filled with the background image.
I'm using Vague.js to blur a div but I can't seem to get it working.
My JavaScript:
$(document).load(function() {
var vague = $('.zero').Vague({
intensity: 3,
forceSVGUrl: false
});
vague.blur();
});
I've tried $(document).ready(...) first, that didn't work, so I switched to .load(..)
HTML:
<div class="block zero">
<img src="images/rb.png" />
</div>
CSS:
.zero {
background: url(../images/11.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Change $(document).load( to $(document).ready(
$(document).ready(function() {
var vague = $('.zero').Vague({
intensity: 3,
forceSVGUrl: false
});
vague.blur();
});
or use
$(window).load(function(){
or use Shorthand for $( document ).ready()
$(function(){
Try to use:
$(window).load(function() {
or:
$(document).ready(function() {
instead of:
$(document).load(function() {
Make sure the permissions on the Vague.js are set to 755. Assuming a LAMP stack of course.
I have a function that is adding a background-image to my div. But its not showing.
this is my function
var totalCount = 6;
function changeBackground()
{
var num = Math.ceil( Math.random() * totalCount );
backgroundUrl = '/background/test2/'+num+'.jpg';
$('#background').css('background-image, url(' +backgroundUrl+ ')');
}
changeBackground();
The image changes everytime that the the page gets refreshed. I know that part is working because if i change
$('#background').css('background-image, url(' +backgroundUrl+ ')');
to
document.body.parentNode.style.backgroundImage = 'url(background/test2/'+num+'.jpg)';
it shows me the image like i wanted. But on the html tag. I want it on the div, so i can fade it in with jQuery.
here is my CSS
#background {
width:100% !important;
height:100% !important;
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;
}
i don't get any error's in the console and when i look up the css nothing is added in the css. How can i now what is wrong? So in the future i can for myself what the problem is.
Change
$('#background').css('background-image, url(' +backgroundUrl+ ')');
To
$('#background').css('background-image', 'url(' +backgroundUrl+ ')');