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;
}
Related
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;
I'm used to react native and trying my hand at reactjs, however I'm getting really frustrated with myself as I understand a lot of how react works from using react native but I can't style my components properly as I'm not used to css.
I'm using the ant design UI framework to help me build a small web application, and as of now I have my nav bar along the top of the app but want to set an image below that takes up 100% of the screen and have the height auto set to the aspect ratio.
I'm currently trying this but it doesn't work.
<div className="background">
</div>
//In App.css
.background {
background-image: url('./assets/main-image.jpg');
background-size: 'contain';
width: 100%;
height: auto;
}
I've tried the above but and a few other methods but nothing is working. It appears that the height is dependent upon whatever the content inside the div is. For example, if I place a h1 tag inside the div then I can see the image but only a few pixels in height.
My image is 4000px in width and is landscape. I just want to be able to dynamically display the image depending on screen resolution.
Can someone point me in the right direction?
Thanks
Edit: I've now set my css background class to this and it's nearly there.
background-image: url('./assets/main-image.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
The only issue is now I'm left with a decent size of padding below the image due to it rendering the full height of my view port
Try this:
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('background.jpg');
I am building a personal site . But I have a big problem ,background-attachment: fixed is not working on mobile devices . I have 4 sections, with bg fixed, + javascript effect .
The last section is very important ...
Can someone help me please to fix these probleme ? I will realy apreciate .
The site is here : my site
.hello
background-image: url("../img/hello.jpg")
background-repeat: no-repeat
background-size: cover
background-position: center
background-attachment: fixed
height: 100vh
min-height: 600px
display: flex
flex-direction: column
justify-content: center
align-item: center
text-align: center
// Sorry for my bad english ,
It's unsupported on mobile unfortunately...browsers have to completely re-render the image each time you scroll and in the past it was too much of a performance hit, although it does look like support for it is starting to trickle out https://css-tricks.com/almanac/properties/b/background-attachment/. The only way to get a comparable effect at the moment is to have your backgrounds as separate elements with position: fixed, like...
.background{
position: fixed;
background-image: url(image source);
top: 0;
left: 0;
width: 100%;
height: 100%:
z-index: 0;
}
and everything that scrolls over it should have either position: relative or position: absolute with a z-index higher than 0.
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 used this post Stretch and scale a CSS image in the background - with CSS only to figure out how to stretch my background image to fit the size. I'm using background-size: cover;
But I'm afraid, that's not quiet what I need. I can't figure out (a nice way) how to do it:
Assume that I have an image with an really wide resolution like 3840px x 1024px
Requirements:
The Image is centered
Viewport width < 1280px: Fixed width of 1280px, horizontal scrollable
Viewport width >= 1280px: no horizontal scrolling, show more of the background image
If the content of the site is really long (above the 1024px) I want to add a color above the image like light blue, if the upper part of the image is sky so it seems like the bg-color is part of the image.
Current implementation (which sucks):
The image is cut into 3 even pieces. The middle part is the background of the content section. If the screen increases in width, 2 divs left and right of the middle part will be shown, they have the left and the right part of the image as background). The size (height and width) of this side divs is calculated with js everytime the windows is resized. The offset of the background images works in Chrome but in Firefox there is a issue with the left div.
The code for this is:
var PageWidth = 1280;
var SideImageWidth = 1280;
function calculateImageSet(){
var bodyWidth = $('body').width();
var fillerSize = Math.floor((bodyWidth - PageWidth)/2);
if(bodyWidth < PageWidth){
$('#fillerLeft').hide();
$('#fillerRight').hide();
}
else{
var imageOffset = SideImageWidth - fillerSize;
var mainHeight = $('#main').outerHeight();
$('#fillerLeft').width(fillerSize).height(mainHeight).show();
# Doesn't seem to work
if($.browser.mozilla){
$('#fillerLeft').css('background-position', '-'+imageOffset+'px 0px');
}
$('#fillerRight').width(fillerSize).height(mainHeight).show();
}
}
Is there a nice way to do this? Without js?
If you didn't understand any of the requirements, please ask.
Thank you
Edit:
I've got a (nearly working) approach:
#main{
background-color: #d4eaff;
background-image: url('forest-wide.jpg');
background-repeat: no-repeat;
background-size: auto 1280px;
background-position: center top;
min-width: 1280px;
}
If the content is not higher than 1024px this is nice, but when it is over 1024px it adds the blue to the bottom so I have to change the background-position to center bottom at this point.
well bro if what you are trying is to get a fully stretched background image i guess this would help you out .... purely CSS based works in Safari 3+,Chrome Whatever+,IE 9+,Opera 10+,
Firefox 3.6+
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;
}