I have below code that is a function for changing background-image every 10th second:
$(function() {
var body = $(".home");
var backgrounds = [
"url(img/Agure.jpg)",
"url(img/Arsenal1.jpg)",
"url(img/ManUtd.jpg)",
"url(img/stadion.jpg)",
];
var current = 0;
function nextBackground() {
body.css(
"background",
backgrounds[current = ++current % backgrounds.length]);
setTimeout(nextBackground, 10000);
}
setTimeout(nextBackground, 10000);
body.css("background", backgrounds[0]);
The code works but I want the images always to cover the full page. Some images are to small to cover the full page so they just stack up next to each other. Any suggestions how I can change the code?
HTML and CSS:
<section class="home">
<div class="centered">
<div class="h-100 row align-items-center">
</div>
</div>
</section>
.home {
width: 100%;
height: 100vh;
background-position: center top;
background-size: cover;
}
The issue here is a combination of two things:
You aren't using background-repeat: no-repeat which means the images will tile to cover the background (This is only visible when the image is smaller than the container, which can be confusing)
And you're setting background in JS, rather than background-image which would overwrite your extra CSS properties.
Here's a modified version:
$(function() {
var body = $(".home");
var backgrounds = [
"url(https://picsum.photos/200/300)",
"url(https://picsum.photos/100/300)",
"url(https://picsum.photos/300/300)",
"url(https://picsum.photos/250/300)",
];
var current = 0;
function nextBackground() {
body.css(
"background-image",
backgrounds[current = ++current % backgrounds.length]
);
setTimeout(nextBackground, 10000);
}
setTimeout(nextBackground, 10000);
body.css("background-image", backgrounds[0]);
})
.home {
width: 100%;
height: 100vh;
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="home">
<div class="centered">
<div class="h-100 row align-items-center">
</div>
</div>
</section>
When the image is small the browser automatically adds multiple image (stacked in your case)
Try adding the following in your css to avoid it
background-repeat: no-repeat;
Also instead of writing
body.css("background", backgrounds[0]);
write
body.css("background-image", backgrounds[0]);
Related
Heyo,
I'm currently working on a background slider but I can't make it work as I want it to work.
So what I need is a fade-effect which produces no white space between the images.
So ... the following image should fadeIn but the current image should just stay and fadeOut when the fadeIn effect of the following image is done. (If that makes sense)
This is the current script I'm using:
$(document).ready(function(){
var count = 1;
var images = [ "http://i.imgur.com/HX0X6lV.png", "http://i.imgur.com/N50Ye7i.png", "http://i.imgur.com/TFG5oaa.png"];
var image = $(".background");
setInterval(function(){
image.fadeOut(500, function(){
image.css("background-image","url("+images[count++]+")");
image.fadeIn(500);
});
if(count == images.length)
{
count = 0;
}
},3000);
});
.background {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
background-size: cover;
background-position: center center;
background-image: url("http://i.imgur.com/HX0X6lV.png");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background"></div>
So I have this image as a background for a "parallax-divider" div, which I wish to stay on the page as it is, but I would like to make the image scroll slower than other content in order to accomplish a parallax effect. I know that I'm targeting something wrong way, but can't figure out how to fix it. Only thing I get is to move the whole div up and down/stretching in a very undesireable way. Any opinions how to fix this?
Here's the Codepen: http://codepen.io/anon/pen/vxOYrQ
.section {
height: 300px;
background-color: blue;
}
.parallax-divider {
background: url('http://www.planwallpaper.com/static/images/Cool-Background-Wallpaper-Dekstop.jpg') top center no-repeat;
background-size: cover;
background-attachment: fixed;
height: 200px;
}
<div class="section"></div>
<div class="parallax-divider" id="parlx">
<div class="wrapper">
<div class="parallax-divider__image">
<h2>lorem ipsum</h2>
</div>
</div>
</div>
<div class="section"></div>
function parallax() {
var parlx = document.getElementById('parlx');
parlx.style.position = "relative";
parlx.style.top = -(window.pageYOffset / 8) + 'px';
}
window.addEventListener("scroll", parallax, false)
Use transform: translateY() instead of top property. Also set parallax elemen to position: absolute, width: 100% and it wont strech. Like so :
translate('+ (-(window.pageYOffset / 8)) + 'px';
I am designing a bootstrap based website. I have a navigation bar and below it there is a full screen background image. I want to change the the background image after some seconds. The image is inside a header tag and has some text over it in the center. The code for header:-
<header id="image">
<div class="header-content">
<h1>Hello</h1>
</div>
</header>
The css for header:-
header {
position: relative;
width: 100%;
min-height: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-position: center;
background-image: url('images/1.jpg');
text-align: center;
color: white;
}
.header1 {background-image: url('images/1.jpg');}
.header2 {background-image: url('images/2.jpg');}
.header3 {background-image: url('images/3.jpg');}
The javascript i tried:-
<script type="text/javascript">
function run(interval, images) {
var int = 1;
function func() {
var d = document.getElementById("image");
d.className += "header"+int;
int++;
if(int === images) { int = 1; }
}
var swap = window.setInterval(func, interval);
}
run(5000, 3);
</script>
I tried to change the class property after an interval but it didn't work.
I want to change the background-image of the header lets say after every 10 seconds to 2.jpg and then to 3.jpg and then back to 1.jpg using plain javascript. Please provide a way as i am unable to think of a way to change the image. I would be highly grateful if anyone can help.
This will take care of what you are looking for, assuming that your images are named with digits.
var counter = 1; //instantiate a counter
var maxImage = 5; //the total number of images that are available
setInterval(function() {
document.querySelector('header').style.backgroundImage = "url('images/" + (counter + 1) + ".jpg')";
if (counter + 1 == maxImage) {
counter = 0; //reset to start
} else {
++counter; //iterate to next image
}
}, 10000);
I have a index.html where headerwrap div's css property is defined in css file which is included in index.html
HTML
<div id="headerwrap">
<div class="container">
<div class="row">
....
</div>
</div>
</div>
CSS
#headerwrap {
background: url(../img/portfolio/img1.jpg) center top;
margin: 0;
height: 100%;
margin-top: 0px;
padding-top:120px;
text-align:center;
background-attachment: relative;
background-position: center center;
width: 100%;
bottom: 10px;
}
I have written a js function change_image to change image of div headerwrap
var image_array= ['url("../img/portfolio/img2.jpg")', 'url("../img/portfolio/img3.jpg")', 'url("../img/portfolio/img4.jpg")'];
var image_index = 0;
var change_image = function(){
$('#headerwrap').css("background", image_array[image_index]);
image_index++;
if (image_index >= image_array.length){
image_index = 0;
}
}
$(document).ready( function(){
setInterval(change_image, 5000);
});
change_image function is getting called after every 5 sec as when i see the div with firebug it looks like this
<div id="headerwrap" style="background: url("../img/portfolio/img3.jpg") repeat scroll 0% 0% transparent;">
<div class="container">
<div class="row">
....
</div>
</div>
</div>
After 5 sec div background is white and i cant see the 1st image. What changes i need to do so that i can see image rotation
I think you need to put the full URL (or relative to the page or site) in the the image_array. When you use a relative url for a background image (url('../foo.png')) in a CSS file the ../ is relative to the CSS file. However, when you set with javascript it is relative to the current page URL.
In my experience, this don't work.
Use some class style and in js change class style.
CSS:
#headerwrap {
margin: 0;
height: 100%;
margin-top: 0px;
padding-top:120px;
text-align:center;
background-attachment: relative;
background-position: center center;
width: 100%;
bottom: 10px;
}
.background1 {
background-image: url(../img/portfolio/img1.jpg);
}
.background2 {
background-image: url(../img/portfolio/img2.jpg);
}
JS:
var class_array= ['background1', 'background2'];
var image_index = 0;
var change_image = function(){
$('#headerwrap').removeClass(class_array.join(' '));
$('#headerwrap').addClass(image_array[image_index]);
image_index++;
if (image_index >= image_array.length){
image_index = 0;
}
}
$(document).ready( function(){
setInterval(change_image, 5000);
});
Enjoy your code.
you're using the wrong quotes -
style="background: url("../img/portfolio/img3.jpg")
the style attribute is now just "background: url(" so it isn't loading.
the elements in your image_array in the js should use these quotes.
"url('../img/portfolio/img2.jpg')"
The correct syntax for changing background image is as below:
$('#element').css("background-image", "url(/myimage.jpg)");
Use:
$('#headerwrap').css("background-image", image_array[image_index]);
Image array should have : url(/path) and not url('/path')
var image_array= ['url(./img/portfolio/img3.jpg)', 'url(./img/portfolio/img2.jpg)', 'url(./img/portfolio/img4.jpg)'];
Try this:
CSS
#headerwrap {
background-image: url(/img/portfolio/img1.jpg);
margin: 0;
height: 100%;
margin-top: 0px;
padding-top:120px;
text-align:center;
background-attachment: relative;
background-position: center center;
width: 100%;
bottom: 10px;
}
jQuery
var image_array= ['url(/img/portfolio/img2.jpg)', 'url(/img/portfolio/img3.jpg)', 'url("../img/portfolio/img4.jpg")'];
var image_index = 0;
var change_image = function(){
$('#headerwrap').css("background-image", image_array[image_index]);
image_index++;
if (image_index >= image_array.length){
image_index = 0;
}
}
$(document).ready( function(){
setInterval(change_image, 5000);
});
EDIT
Changed the image urls to absolute instead of relative for consistency.
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.