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]
});
});
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 want my website's background to change images every 5 seconds. For that I creare a jquery script. The problem is that the images are not full-height or full-width. One more thing is that I can not make the images fade out and in without the withe background being noticed. Can anyone help me?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
var i =0;
var images = ['geral2.jpg','geral3.jpg','geral4.jpg','geral5.jpg','geral6.jpg'];
var image = $('#slideit');
image.css('background', 'url(geral1.jpg) no-repeat center center fixed');
setInterval(function(){
image.fadeOut(1000, function () {
image.css('background', 'url(' + images [i++] +') no-repeat center center fixed');
image.fadeIn(1000);
});
if(i == images.length)
i = 0;
}, 5000);
});
</script>
</head>
<body>
<div id="slideit" style="width:100%;height:100%; background-size: cover; -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;">
</div>
</body>
</html>
UPDATE: It is full screen, but is looping the first image. How can I solve?
http://codepen.io/Ryuh/pen/oLNvRj
Inside setInterval, we just need to overwrite background-image instead of background itself. This should fix the full screen issue.
image.css('background-image', 'url(' + images [i++] +')');
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 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>