I am using fullpage.js and I am trying to add an image background to one of my slides, however when I do so the page 'skips' a section on its own.
My current css for the section is the following:
#slide1{background-image: url(https://github.com/antonettis/fullpage/raw/gh-pages/img/chess.jpg); background-repeat: no-repeat; background-size: auto 100%; }
I compared it to the fullpage.js demo, and if I copy it this is what my code should look like:
#slide1{background-image: url(https://github.com/antonettis/fullpage/raw/gh-pages/img/chess.jpg); background-size: cover; background-attachment: fixed; }
However when I do this the image completely disappears. Here is the codepen. The image is on page 4, slide 1. Thanks in advance for your help.
You need to replace css code with this:
.fp-section{
background-image: url(https://github.com/antonettis/fullpage/raw/gh-pages/img/chess.jpg);
background-repeat: no-repeat;
background-size: auto 100%;
}
Related
I have fullscreen website with background-image: no-repeat and background-size: cover style on it. I want to make animation that the background image will resize in 10 second to the right side of the page to 350px width and 175px height. It's even possible to do it?
body {
background-image: url(/image.png);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
}
I saw some webkit animation but there was problem with the background-size: cover style, so the animation doesn't work.
I tried :
$(function(){
$('body').one("mouseover", function() {
$('body').addClass('hover');
});
});
But it will resize the image instantly and move it to the right, I want to resize them linear.
Thank you very much guys! :-)
You could add something like this to your css:
body {
background-position: center center;
transition: background-size 10s ease-in-out, background-position 10s ease-in-out;
}
body.hover {
background-size: 350px 170px;
background-position: right center;
}
https://codepen.io/anon/pen/oPbqPm
The problem with this, is however, that it won't animate the sizing.
I would suggest you don't set the image as background. Instead, position the image behind all other elements using position and z-index properties. Once set, you can add the animation. For more details on using z-index and position attributes see the link below and "try it yourself" example:-
https://www.w3schools.com/cssref/pr_pos_z-index.aspenter link description here
You can then use css animation for resizing of the imgae.
TO learn how to add animation see this link:-
https://www.w3schools.com/css/css3_animations.asp
How do I achieve this scrolling effect in Boostrap? Have a fixed image background with the content div overlayed on top when scrolling:
http://www.standardhotels.com/culture/things-to-do-july-2017-new-york-los-angeles-miami
There are several ways you could achieve this. You could fix a background image to html and offset the body, adding padding to keep text in the viewport. For example:
html {
background: url(DESIRED BACKGROUND IMAGE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background:lightblue;
padding-left:150px;
padding-right: 30px;
position:relative;
left:-150px;
top:80%;
}
Check out this basic (but very cute) kitten example.
EDIT
Looking further into your example's code, you could also add margin-top to the body and remove the positioning top. Your example shows margin-top: calc(100vh - 140px) !important;
Here's an updated version of my fiddle with the properties swapped. You can see that the effect is very similar.
You are looking for Parallax scrolling. Here is the link with working demo on how to achieve this.
I've set a fixed background on my website but it's not quite staying fixed when zooming in and out.
This is the site I want to replicate the background from:
http://triangl.com/
Zooming in and out keeps the background completely fixed.
Please see mine:
http://zoeyplayground-com.zoeysite.com/
Zooming in and out will behave differently.
My code is below. This will only set the background on the home page:
jQuery(document).ready(function(){
if (top.location.pathname === '/')
{
jQuery("body").addClass("bodybackground");
}
});
.bodybackground {
background: url('/media/import/background.jpg') no-repeat center center fixed;
}
Could anybody inform me on what could be causing this? Thank you very much for any help.
you need to add background-size: cover;
.bodybackground {
background: url('/media/import/background.jpg') no-repeat center center fixed;
background-size: cover;
}
Use background-size: cover; or background-size: contain; as per your necessity. That should fix it.
I'm trying to setup a div with a background image with some text on top of it. The background image needs to stretch the entire width of the viewport, which I've been able to do successfully. This is my CSS:
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
color: #fff;
background: url(http://) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The problem I'm having is that it isn't showing the full height of the image. The image is being cropped at the top and bottom. I want the image to show it's full height and the user needs to be able to scroll down to see more content below the image.
Is there a way I can show the full image without cutting the top and bottom off?
Thanks!
Remove the fixed and instead of cover use contain. If you want a specific size though I would define a height in my css.
You can use background-size: auto 100%;
I updated an example in fiddle to see how its looks.
http://jsfiddle.net/4ozmn00t/2/
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
color: #fff;
background: url(http://);
background-size: 100% 100%;
}
setting the width and height of background-size to 100% will fill the div
Remove the fixed from the background.
url() no-repeat center center
How can I set a background image which is not scrolling along with the content. I'm using jquery mobile and phonegap. I try to use background-attachment: fixed but the image is not going in fullscreen.
<div data-role="page" class="background">
</div>
My css:
.background {
background-image: url(../images/bg.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment:scroll;
background-size: 100% 100%;
}
I had to tackle this problem, the work around (as far as I am aware it hasn't changed in iOS7) is to create a separate div (call it the "background" div), set its position to fixed and insert your desired background image inside this div.
Set the z-index of this div so that it sits underneath the rest of your content.
iOS webview will respect fixed positioned divs but not background-attachment: fixed;
Set the background once, inside the <body> of your html file(s) but outside your subsequent pages.
Here's how I did it and it worked really well.
<div class="background"><img src="img/Background_Dark.png" width="100%"/></div>
and the css
.background {
position: fixed;
top: 0%;
left: 0%;
min-width: 100%;
z-index: -10000;
}
First, you need to cut out half of the CSS. Start with this:
.background {
background-image: url(../images/bg.png);
background-attachment: fixed;
background-repeat: no-repeat;
}
Notice that I changed background-attachment: scroll; to background-attachment: fixed;. The default value of background-attachment is scroll, so you don't need to include it anyway, but that does the opposite of what you are trying to do.
Second, can you upload the bg.png to imgur or some other site so that we can have a better example of what you're trying to do? And also fill in your div with some sample content of similar length to your actual content? Since this is a div and not the body of your website, the div is collapsed unless there is content inside, and the div will grow to fill the content.
This means if you set background-size: 100% 100%; you will be stretching the image as far as the content of the div; which isn't what you want. You only want the background image to fill the viewport. Setting background-attachment: fixed; accomplishes this.
You can use iscroll plugin.
Page in jquery mobile executed by java script source code and in some of the elements changing in css not works.