my first post here.
Something on my own website is bothering me for a really long time. The thing is that when I'm visiting my website on my Android phone and scroll through the page, the background image keeps 'adjusting', so there is a stutterlike event continiously occuring when scrolling through the website. You can visit it here: http://www.bramvalstar.nl
The background class:
.achtergrond {
position: relative;
width: auto;
height: 95%;
background: url(media/images/xxx.png) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
Thanks in advance.
Yeah, that is the affect of using relative page height. You see, when the page loads, the available viewport height is slightly less than 100% as the address bar occupies some space on top. When you scroll down, the address bar disappears and the viewport height jumps back to 100%, thus your page re-adjusts to the new available height. Unfortunately, there is no way to fix this in css. You can either use a fixed height not a relative one, or set the height using javascript at load time.
hope this is what you are looking for
.achtergrond {background-attachment:fixed;}
Related
I have made a background image, 1366px wide and 768px high, which I want to use as background for the main page of my website.
I have each page of my website divided in sections, using the FullPage plugin.
This is the main page so I'm using just the first section.
What I've tried so far is adding this CSS code to the #first section of my main page:
#first{
width: 500px;
height: 500px;
background-image: url(images/ClanshnowXmasEventSmall.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Unfortunately the image gets displayed just partially. In fact it's a little shorter than it actually is.
I read the documentation for the background-size attribute, and at the cover attribute it says:
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
So basically how can I make my background-image fit the screen size? Considering the mobile side I think it would be better to fit just the width of it. I'm open for suggestions and help!
Take a look over here: https://www.google.be/amp/s/css-tricks.com/perfect-full-page-background-image/amp/?client=safari
Good luck!
I have been trying to fix this issue for days. I see a lot questions about it, but none of the solutions seem to be working for me.
I have a website that has a Bootstrap 3 front end. I want a sticky bottom footer and I'm using Bootstrap's navbar navbar-fixed-bottom styles to achieve this. It is working, but the problem is that the content will overlap with the footer when there is not enough room. I want to be able to scroll the content with the footer and header fixed and I don't want the footer to scroll with the content.
Here is the site. You can resize the height of your browser to see what I'm talking about.
Any help would be appreciated!
Icemanind, What I did here to help your issue was this.
I added height to the body.
I set the background image not using the bodytag and fixed it.
This way it now scrolls and the menu and footer stays fixed.
I also made the background image no repeat.
Is this what you were wanting.
Here is the Fiddle.
The css link to your custom css didn't want to play ball in the fiddle, but in a mock up works fine.
<style>
body{
height:2000px;
}
.bg-image {
position: fixed;
width: 100%;
height:100vh;
background: url('http://upload.wikimedia.org/wikipedia/commons/d/d3/Albert_Einstein_Head.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: -100;
}
</style>
Updated.
Made a change to the Fiddle, I have added a transparent area to act as some content that is 2000px height.
I have added some margin to the bottom of this content.
Have a look now and see if that is what you are after here.
Here is a full size Fiddle.
I have a problem with html and css.
Today, for the first time, I've tried to make a page with a big image for the background.
I'm using foundation framework, and I'm stuck on one thing. As we know foundation is a adaptive framework and when I re-size my browser, I've got a bug.
You can see it on my screenshot: https://imgurhd.ru/i/270a.jpg (also here you can find my css).
I need to make the text and image under menu vertically centered on any screen size.
I'm using position relative with a percent value, as you can see. So please help me to find where is the problem.
You can set the background size to cover.
Cover
This keyword specifies that the background image should be scaled to be
as small as possible while ensuring both its dimensions are greater than or
equal to the corresponding dimensions of the background positioning area.
html {
background: url(/*YOUR IMAGE HERE*/) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This is supported in most recent browsers
I'am busy with my website, and now I have a issue.
When i scroll down to my contact page, my browser starts to lagg, because i have a background image with the property scroll, and size cover.
So i googled a bit and the result was that the property cover causes the laggs.
How can i fix this? I need my background size covered because i have my website responsive
My code:
background-attachment: scroll, fixed;
background-color: #666;
background-image: url("../images/black.png"), url("../images/bg-footer.jpg");
background-position: center, center center;
background-size: cover, cover;
Can i ask why you need to use background-attachment: scroll at all?
You have set the background image to cover the full width of its container, which means it's not going to change position on scroll anyway.
You are forcing the browser to recalculate the image size whenever you scroll the mouse, causing the lag.
You could also try using other properties like contain or 100% width to fix your image.
So I have tried to get rid of this white space to the right of my website for ages now. I've tried all the overflow-x: hidden rules but none of them seem to work.
I have ruled it down to when I remove:
(div id="content5" style="position:absolute;")
(img style="width:175px; height:175px;" src="Images/Graphic.jpg")
(/div)
from the html file then the white space goes away. How do I put the picture on my web page without getting the white space? Don't worry I am using angle brackets for my html.
You can view my website here.
CSS:
view code here
HTML:
view code here
Make the width of the #content5 element set to the pixel width of the image:
#content5 {
width:175px;
}
Right now, the width is set to 50%. But that essentially sets it to 50% of the width of the parent element, which is the whole page. If you look in the inspector, the divs containing all of your images are much larger than they need to be because of this.
EDIT: Included inspector image of Chrome session
#Daniel Ravens if you insert the following code it should fix your problem:
html {
background: url(Images/FrontCover.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This code basically stretches everything on the page to make it fit I got this code from the following site:
CSS Tricks