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+ ')');
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 know, it has been asked before. The answers are insufficient although they are marked as correct.
I need something that fills a container with an image by showing the most of the image, centers it and preserves its ratio. Should be ajquery-plugin, a angular-directive or plain JS.
<div ratio-fill>
<img>
</div>
Of course should be enough where the script takes action then.
Solution for interest:
<div ratio-fill="http://img.url"></div>
CSS
*[ratio-fill] { background-size: cover;
background-position: center; }
Script (jQuery)
/* img-ratio-fill */
$(window).load(function(){
/* ratio-fill-directive */
$('*[ratio-fill]').each(function() {
var $this = $(this),
imgUrl = $this.attr( "ratio-fill" );
$this.css( "background-image", "url('" + imgUrl + "')" );
});
})
with css on the DIV
background-size: cover; background-position: center;
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 have a Cordova Win8 Phone app, and in it.. i would like to set the background image attritube for the stylehseet dynamically.
#profile {
background-image: url('**____SET__DYNAMICALLY____**');
background-repeat: no-repeat;
background-position: top center;
position: relative;
}
I tried below, but that doesnt work.
document.getElementById("#profile")="background-image: url('" + bgimage + "');";
Any ideas on what could be up? thanks!
document.getElementById("profile").style.backgroundImage
= "url(" + bgimage + ")";
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>