This is my CSS
<style>
body {
background: url(30.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
This makes the background image fit to screen.
Now, if I attempt to make the background image dynamic using JS as follows, the background image no longer fits to screen.
<style>
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
And JS
body.style.background = 'url(30.gif) no-repeat center center fixed';
This makes the image appear to the original size. I want the image to be fit to screen.
I tried the following but to no avail:
body.style.background = 'url(30.gif) no-repeat center center fixed width:100% height:100%';
How do I correct the error?
Your JS is overwriting your CSS. You need to include background-size in your JS, like this (assuming you've stored document.body in a variable named body as indicated):
body.style.background = 'url(30.gif) center center/cover fixed no-repeat';
Alternatively, try setting all properties separately in CSS, and make sure the body always fills the viewport, like this:
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-position: 50% 50%;
background-repeat: no-repeat:
min-height: 100vh;
}
Then if you need to set the background-image dynamically, do it like so:
body.style.backgroundImage = 'url(30.gif)';
You may need to do it like this because setting the background shorthand property will override individual properties, breaking your vendor-prefixed background-sizing.
Related
I want to give my bg pic, both a height and a weight with! But it will only let me set one value! Does anybody know what to do?
$(document).ready(function() {
function setHeight() {
windowHeight = $(window).innerHeight();
$('body').css('background-size', windowHeight, '100%');
};
setHeight();
$(window).resize(function() {
setHeight();
});
});
Put the width and height together in a string. The first value sets the width and the second value sets the height. And .innerHeight() returns just a value so you need to add px.
$('body').css('background-size', '100% ' + windowHeight + 'px');
I can see that you want to get your background-image to fill the whole body.
You can easily achieve this via css properties.
background-size: cover;
or
background-size: contain;
Here's one of many tutorials:
https://css-tricks.com/perfect-full-page-background-image/
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
DEMO
On click background is changed to image or color. To do it, for start I made two classes for body:
body.bg-color {
background-color:red;
}
body.bg-img {
background: url(../images/bg.jpg) no-repeat center 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Then using .addClass and .removeClass I change backgrounds. Thing is that this method fades, in addition to background, also content. What should be done to fade in/out only background?
$(document).ready(function(){
$('body').addClass('bg-color');
$('.element,#content1,#content2').hide();
$("#link1").click(function(){
$('#wrapper').hide();
$('body').removeClass('bg-color').fadeOut();
$('body').addClass('bg-img').fadeIn();
});
$("#link2").click(function(){
$('#wrapper').show();
$('body').removeClass('bg-img').fadeOut();
$('body').addClass('bg-color').fadeIn();
});
});
Instead of applying this all to the body tag, use an fixed positioned <div> with height and width of 100%, and give that the background color so you can just fade out that element instead of the entire .
Also, you can just toggle one class instead of adding and removing two classes at once.
Eg.
#bg{
position: fixed;
height: 100%;
width: 100%;
z-index: 1;
background: red;
}
#bg.bg-img {
background: url(../images/bg.jpg) no-repeat center 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Just put the following right after the opening body tag:
<div id="bg"></div>
Here is your updated JS:
$(document).ready(function(){
$('.element,#content1,#content2').hide();
$("#link1").click(function(){
$('#wrapper').hide();
$('#bg').fadeOut().addClass('bg-img').fadeIn();
});
$("#link2").click(function(){
$('#wrapper').show();
$('#bg').fadeOut().removeClass('bg-img').fadeIn();
});
});
I am trying to apply some CSS to a web page background but am a little unsure how to do so. I have a script that when someone clicks a button, it changes the background image. However, the images are not to scale and are not sized right. I want to add some style to the image but dont know where to do so. I am trying to add :
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;
Into each image. So when someone does click a button, its a single image thats fits the screen nicely. Does anyone have any sugguestions about where I might go about adding these styles to the background image? Thank you for your time and help.
<!DOCTYPE html>
<html>
<style>
body
{
background-image: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>
</body>
</html>
You are overriding the background-property completely by using $(this).css('background'). Try using background-image instead.
I have this HTML. With the following:
<div class="item">
<div class="bg_img"></div>
<h1>morning</h1>
<h2>today</h2>
<p>lorem ipsum.</p>
</div>
Background image to this content CSS:
#container .item .bg_img{background:url('../img/mainpage/demo.jpg') no-repeat;}
This structure is working ok. But I want to attach this background images to body and full screen size. How can I do this via JavaScript or pure jQuery (no plugin)?
Try below code...
#container .item .bg_img{
background: url('/img/mainpage/demo.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use this CSS:
background-size: cover;
Do you mean an image that is related to the context of the body and not of .item?
You can use position:fixed for that. A top, left, bottom and right will ensure it will take the whole page.
background-size: cover will make sure the image itself will cover the page. Depending on the image you use, you might want another solution. Ex: you can center an image and fade to a background color (but that's up to you)
Use a z-Index of -1 to ensure it does not obscure your content
item .bg_img {
background:url('http://www.ninahale.com/wp-content/uploads/2013/08/Post-Enhanced-Campaigns-World.jpg') fixed center center;
background-size: cover;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
Fiddle: http://jsfiddle.net/Aa8fe/
Even i struggled for the same and atlast i got a solution..its below..
body //your container name
{
background-image: url(Images/caramel%20gradient%20for%20website.png);
background-size: 100%;
}
This question already has answers here:
Stretch and scale CSS background
(16 answers)
How to make the background image to fit into the whole page without repeating using plain css?
(6 answers)
Closed 9 years ago.
I don't how to do background which extend and will be centered
now I have something like this:
body {
background: url(tlo.jpg) no-repeat;
background-attachment: fixed;
background-position: center;
}
It is centered and it have constant size....
I want that it will be just proportionally expanded......
I need to keep the proportions
thanks!
OK i have solution! :)
body {
background-image: url(tlo.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
}
Try this
body {
background: url(tlo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
i think background-size: may help you..
body {
background: url(tlo.jpg) no-repeat;
background-position: center;
background-size: 100% 100%;
}
it will take 100% width of body's total width and 100% height of body's total height...