I'm trying to change the background image of the body using the following tutorial.
http://www.javascriptkit.com/javatutors/onmousewheel.shtml
But the background image isn't changing.
Html Code -
<body id="img"></body>
CSS Code -
#img {
overflow: hidden;
background: url("././images/1.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Javascript code -
var myimages=[
"./images/2.jpg",
"./images/3.jpg",
"./images/4.jpg"
]
var slideshow=document.getElementById("img")
var nextslideindex=0
function rotateimage(e){
var evt=window.event || e //equalize event object
var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta
nextslideindex=(delta<=-120)? nextslideindex+1 : nextslideindex-1
nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex
slideshow.style.background=myimages[nextslideindex]
if (evt.preventDefault)
evt.preventDefault()
else
return false
}
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll""mousewheel"
if (slideshow.attachEvent)
slideshow.attachEvent("on"+mousewheelevt, rotateimage)
else if (slideshow.addEventListener) //WC3 browsers
slideshow.addEventListener(mousewheelevt, rotateimage, false)
You're trying to use getElementById before the DOM has loaded(before the body element has loaded).
Recommend you use jQuery to catch the event where the DOM has finished loading. Read more here:
http://learn.jquery.com/using-jquery-core/document-ready/
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 am a beginner at Javascript and Jquery. I am trying to achieve an effect where background image changes on scrolling text. The code works fine for top to bottom scroll but one image is not changing on bottom to top scroll. Here is my code,
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(window).scroll(function(){
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = $(window).scrollTop();
if(scrolledFromtop > fromTopPx && scrolledFromtop < 600) // distance to trigger second background image
{
$('html').addClass('scrolled');
}
else if(scrolledFromtop > 600 && scrolledFromtop < 1000) // distance to trigger third background image
{
$('html').addClass('scrolledtwo');
}
else{
$('html').removeClass('scrolled');
$('html').removeClass('scrolledtwo')
}
});
</script>
<style>
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(assets/images/b1.jpeg);
}
html.scrolled {
background-image:url(assets/images/ab3.jpeg);
}
html.scrolledtwo {
background-image:url(assets/images/ab9.jpeg);
}
</style>
</head>
What am I missing?
You must try it like this, the classes which were added during scroll could also needs to be removed at certain conditions as below,
$(window).scroll(function() {
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = $(window).scrollTop();
if (scrolledFromtop > fromTopPx && scrolledFromtop <= 600) // distance to trigger second background image
{
$('html').addClass('scrolled');
$('html').removeClass('scrolledtwo');
} else if (scrolledFromtop >= 601 && scrolledFromtop < 1000) // distance to trigger third background image
{
$('html').addClass('scrolledtwo');
$('html').removeClass('scrolled');
} else {
$('html').removeClass('scrolled');
$('html').removeClass('scrolledtwo')
}
});
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;
}
body {
height: 1200px;
}
html {
background-image: url("http://placehold.it/350x150/111/fff");
}
html.scrolled {
background-image: url("http://placehold.it/350x150/f11/fff");
}
html.scrolledtwo {
background-image: url("http://placehold.it/350x150/f2f/fff");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Remove .scrolledtwo class when scrollTop is between 200 to 600, same-way remove .scrolled when it between 601 to 1000 else if it crosses the condition remove both.
Only problem was :
You were not removing the older added class and were adding new class, at in the middle region i.e. > 600 you are having both the classes scrolled and scrolledTwo.
So one solution is :
Remove the older class before adding new class.
Use these lines at correct places :
a- $('html').removeClass('scrolled');
b- $('html').removeClass('scrolledTwo');
use this script :
$(window).scroll(function(){
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = $(window).scrollTop();
if(scrolledFromtop > fromTopPx && scrolledFromtop < 600) // distance to trigger second background image
{
$('html').removeClass('scrolledtwo')
$('html').addClass('scrolled');
}
else if(scrolledFromtop > 600 && scrolledFromtop < 1000) // distance to trigger third background image
{
$('html').removeClass('scrolled');
$('html').addClass('scrolledtwo');
}
else{
***$('html').removeClass('scrolled');***
$('html').removeClass('scrolledtwo')
}
return false;
});
Your code is working fine.
Have a look.
Make a long page you will see the effect.
You have set the criteria to change the background image.
Good work.
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 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>
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+ ')');