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.
Related
Need help creating a full page gallery. I tried various options. I'm trying to create full page gallery that lets the user scroll vertically though 1 image at a time.
Here's my code:
<style>
#img1 {
background-image: url("<?php echo $image ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#img2 {
background-image: url("<?php echo $image2 ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#img3 {
background-image: url("<?php echo $image3 ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<div id="img1"></div>
<div id="img2"></div>
<div id="img2"></div>
I'm stuck on the javascript/jquery solution to detect if the user has scrolled. I want to change images if the user scrolls up 10 pixels or down 10 pixels.
Here's an example of what I'm trying achieve:
http://themes.themegoods.com/photome/demo/gallery-archive/gallery-archive-fullscreen/
It would be better to use js libs like "fullPage.js, smart scroll, pagePiling.js" those help you to make a perfect page or gallery scroll like what you wanted to achieve, for more information follows below links:
https://alvarotrigo.com/fullPage/
http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/
https://alvarotrigo.com/pagePiling/
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.
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 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%;
}
I am using a fade effect script to fade in my home page, but ideally, I'd like to start the fade once the background image has been loaded.
How could I incorporate this into my existing javascript?
UPDATED Script:
<script type="text/javascript">
$(window).load(function() {
if (window.localStorage && !localStorage['faded']) {
localStorage['faded'] = true;
$('body').hide().fadeIn(500);
}
});
</script>
CSS:
html {
background: #000;
height: 100%;
}
body {
background: black url(images/bg.jpg) no-repeat 200px center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
height: 100%;
}
Use $(window).load instead of $(document).ready - the difference is that the latter will run after all your assets are loaded including images.