So, I made a page in a website, and I used Particles.js for the background.
Now, when I scroll down, the particles don't continue down, they stop at the initial corner of the screen, they don't go down if I scroll...
these are my particles' settings:
#particles {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background-size: cover; background-position: 50% 50% ;background-repeat: no-repeat; }
Here's a pic of the website, as you can see, the white space at the bottom of the page is always like that, the particles don't go there they just bounce back.
How can I remove the limit for the size of the website for particles?
Thanks!
you have written position :absolute ; replace it with position :fixed;
Related
I found out that the problem is caused by the url bar in Chrome on mobile device.
What it does is that when the page is scrolled to a point where the url bar disappear (or shift upward "out of the screen"), my background image shifts up along and leaving a white space, the same height as the url bar, at the bottom.
When I keep scrolling, my background image resizes(in this case expands) to fit the viewport size.
What I would like to achieve is that the background image stays the same size and does not jump around, basically ignore the effect of the url bar.
I searched for solutions, however they usually involve JS, as a beginner I only know HTML and CSS at the current stage, hence I was wondering if there is anyway I can solve this problem using just CSS.
ps: I encountered this problem when doing my freeCodeCamp challenges, although it was not part of the assignment, I wanted to get myself used to mobile website responsivity. Below is my code for the background. Thank you very much!
body::before{
content:'';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -1;
background-image: linear-gradient(0deg, rgba(250,250,250,0.2497592787114) 0%, rgba(250,250,250,0.7483587184873958462) 100%), url("https://i.imgur.com/zvKvhA5.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
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
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.
I have a problem with background image positioning - since we all know, it is quite simple to position a background that repeats itself and STARTS from a certain point from top, what I want to say - let's pretend we want a black background to start 100px from top of page and then repeat-y.
My question is - how is it possible to do the same effect, but the background to repeat-y itself from the bottom, I mean that these 100px of space at the bottom would not be filled with a background.
For now I was lucky enough just to make it so if there is no scrolling, because if there is scrolling, then I see a black background, then 100px at the bottom of window and if I scroll down i see that 100px stripe at the bottom always while scrolling. What I want to make is for background to fill the screen but stop when there is 100px left at the bottom
(at the bottom I want to add a logo which is transparent, so the solution with overflowing one element with another or z-indexing tricks currently is not an option....)
body {
background-image: url(UI/img/stripe-stripe.png)!important;
background-repeat: repeat-y !important;
background-position: right -100px;
background-color: #e6e2df !important;
}
This does not work... I want for a background to repeat vertically but to stop at the bottom when there is 100 px left.
Why don't you just apply the stripe to a div surrounding your content; you could still have a background on the body tag and leave room for a 100px div at the bottom containing your logo:
<body>
<div class="content">
Content goes here.
</div>
<div class="footer">
Logo goes here.
</div>
</body>
And then in your css:
div.content {
background-image: url(UI/img/stripe-stripe.png)!important;
background-repeat: repeat-y !important;
background-position: right -100px;
background-color: #e6e2df !important;
top:0;
bottom:100px;
width:100%;
}
div.footer {
height: 100px;
}