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.
Related
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%;
}
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.
Please guide me how to set background image of the web page to full screen.
Also I'd like to this image to show fullscreen for all size monitors and mobile devices..
Right now I have an image with resolution 1920 : 1080 and it only looks good on my 19" monitor with resolution 1440 : 900, but not good on 15.4" laptops and mobile devices.
Please help,
Thanks.
The proper solution to keep the ratio to your image is to set background-size: cover.
If the background-size: cover; doesn't work for you, for example, if the aspect ratio of the image is wrong, then you can try using background-size: auto 100% to ensure that the picture keeps it's aspect ratio as well as being tall enough to fit the screen.
I think it all depends on the resolution of the image and the maximum size you're willing to have it. But you will need to put media queries into your code to ensure there are no gaps when the screen gets too big or too small.
Use background-size:cover; will help you.
Use background-size: cover; for newer browsers:
<div id="bg"></div>
html,body{
height: 100%;
}
#bg{
width: 100%;
height: 100%;
background: url(image-path.jpg) no-repeat;
background-size: cover; /* also include vendor prefixes: you may google */
}
check compatibility using background-size
Better solution for full background image with responsive can be found here
You can tackle this in two ways:
New browsers, Use the CSS:
background-size: cover
Old Browsers, use a fake <img /> for the background.
.bg {z-index: 1; position: absolute; width: 100%; height: 100%;}
The background image property for chrome, mozile and opera browsers
body {
background: url(images/image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
i have got a little problem with css on my homepage:
if i visit my page from a android device, and i scroll down,
the background image gets a little bit bigger, and if i
scroll up, it resizes again to the correct size.
I think the problem is: i load the pages with jquery's load()
into a div. Then the page size changes, but css still uses the
old size (at dynamic values (100% and cover).)
css:
body {
background: #000000 url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
max-height: 100%;
max-width: 100%;
overflow-y: scroll;
}
If you don't know what i mean: https://www.youtube.com/watch?v=I_ukAfoiqBo look at the background image
What i tried: i have no idea why this is happening (only on android devices) so till now i tried nothing :/
Xorg
If you look at this page, you notice that the background image does not move
http://livingsocial.com/deals/31570-86-off-boot-camp-classes?msdc_id=13
1) How is this done?
2) Why doesn't Twitter do something similar (ie, what are the UI disadvantages?)
CSS:
background-attachment: fixed;
My my.
It's done with pure CSS:
body
{
background-image: url('foo.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
You can use:
body {
background: #fff url(path/to/image.png) 0 0 no-repeat;
background-attachment: fixed;
}
As to 'why doesn't Twitter do this?' That's not something we can answer, really, unless the Twitter devs are present on Stack Overflow. Historically using it has meant the page tends to scroll somewhat 'clunkily,' but that might just be the added rendering requirements placed on the browser, rather than implicit in the behaviour, or use, of background-attachment.
1) There is a large div there with the background, and position: fixed.
position: fixed means it won't move when the viewport scrolls.
2) I don't know... they probably would if they wanted the functionality.
One line is all you need
background:transparent url(img.jpg) no-repeat fixed 0 0;
Check working example at http://jsfiddle.net/dFJCt/