I've found a similar question here but with no answer, yet I can't find an alternative as a solution.
I have the following code and it works perfectly on Mac and Windows, however I can't figure out why on Android (either Chrome or Firefox) the background does not get updated when the user is scrolling down, it produces the space of about 1/5 of the screen at the bottom while scrolling down.
The background image gets updated after you release the touch.
html{
background-image:url(example.jpg);
background-position:fixed;
background-size:100% 100%;
}
Specify a height for your html and body, i.e.
html {
width: 100%;
height: 100%;
}
And
body {
height: 100%;
min-height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
And add a div that will wrap everything inside body, i.e.
<body>
<div id="wrapmeup">
....your content....
</div>
</body>
And finally add this to your css:
#wrapmeup {
height: 100%;
width: 100%;
background-image: url(image/background.jpg);
background-attachment: fixed;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
Related
Good evening,
I'm very new to html and was searching for a solution but I did not found any. So what I'm trying to do is to fix the background and put something like a panel over it, where I do the rest of the site like text etc. I have an example website: https://420cheats.com
I don't know if I am right but I think I have to add a second class and put this somehow over the background
Thanks in advance.
Ps: I did the background as a class in the css file.
You can just set a fixed background-image on your body element. Both the <body> and <html> tag need a set height of 100% for this to work.
body, html {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://cdn.cnn.com/cnnnext/dam/assets/170407220921-07-iconic-mountains-pitons-restricted.jpg');
height: 100%;
background-attachment: fixed;
}
.content {
background-color: rgba(204,204,204,0.5);
width: 80%;
margin: 20px auto 20px auto; /* top right bottom left */
height: 1500px; /* remove this, just here to show that it works */
}
<div class="content">
<h1>Content</h1>
</div>
You will need to set the background as fixed and create a DOM element to lay on top of your background image.
body {
background: url('https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1507062474/hotel-everest-namche-nepal-mountain-lodge-MOUNTAIN1017.jpg?itok=g-S4SL9n') no-repeat fixed;
background-size: cover;
}
div {
padding: 20px;
width: 400px;
height: 1200px;
background: rgba(0,0,0,.5);
}
<div>test</div>
I need some help regarding CSS, I've been trying for hours to make a background be fullscreen.
This is my CSS:
.mainContainer{
width: 70%;
display: table;
margin: 0 auto;
padding-top: 100px;
}
html{
height: 100%;
margin: 0;
border: 0;
padding: 0;
background-image: url(../assets/background.jpg);
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
And this is my html:
<html>
<div class ="mainContainer">
<app-header></app-header>
<router-outlet></router-outlet>
</div>
</html>
This semi-works the problem is the background stops as soon as my content stops, it does not continue until the end of the browser window.
Example:
I'm trying to make the background go way down there and dynamically resize with my browser.
Your HTML code is missing the body tag. Add that, and also add body { min-height: 100%; } to your CSS - this will also stretch the body height to at least the window's height.
In CSS, 100% is broken when it comes to vertical things. Try 100vh, which is the percentage of the viewing height. Also, 100vw is 100% of the viewing width. There are also vmin and vmax. Hope this helps!!!
A few things:
Like another person said, use a <body> tag.
Add a width of 100%
in background-image rule, you should have single quotes around the URL, so it looks like: background-image: url('../assets/background.jpg');
Lastly, you should be using a DOCTYPE. https://en.wikipedia.org/wiki/Document_type_declaration
.mainContainer{
width: 70%;
display: table;
margin: 0 auto;
padding-top: 100px;
}
body{
height: 100%;
width: 100%;
margin: 0;
border: 0;
padding: 0;
background-image: url('https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&h=650&w=940');
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<body>
<div class ="mainContainer">
</div>
</body>
</html>
Also...in the Stack Overflow code embed, I don't think you can use custom elements.
Thanks everyone for the help, the issue was from angular material style that was overriding my background-image tag and adding borders to it for some reason.
I fixed it by adding ::ng-deep in front of html css, like this:
::ng-deep html{
background-image: url('../assets/background.jpg');
background-position: center center !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
Also the issue with the background not going full screen was because I was missing the body tag and body { min-height: 100%; }
I'm trying to find a solution to the problem I'm having with fixed backgrounds on iOS devices. I would rather not have to redesign everything for this website, and I'm hoping that some CSS changes can fix it. This is what the site looks like on iPhones, and this is what it should look like. The CSS code I'm using is as follows:
.container {
min-width: 320px;
max-width: 480px;
margin: 0 auto;
}
.fixed-background {
height: 800px;
-webkit-backgound-size: cover;
-o-backgound-size: cover;
-moz-backgound-size: cover;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
text-align: center;
overflow: auto;
}
I've also tried using a #media query to fix it for iOS using some posts on stackoverflow, but this didn't seem to have any effect:
#media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) {
.fixed-background {
background-attachment: scroll;
}
}
HTML
<div class="fixed-background bg-1">
<div class="container">
<div class="title">
<h1>ROOK PROPERTY<br>MANAGEMENT INC.</h1>
<h2>CONDOMINIUM MANAGEMENT</h2>
</div>
</div>
</div>
I just went through the same issue, and this is how I solved it.
First, you need to declare your body and html to be 100% wide and 100% tall:
html, body{
width: 100%;
height: 100%;
}
Then, the scrolling on your page can NOT be done by the body: you must wrap it on a container. This container needs three parameters: overflow:scroll, width: 100% and height: 100%. I recommend wrapping the entire site in it:
#wrapper{
width: 100%;
height: 100%;
overflow: scroll;
}
If you don't like how it scrolls, you can also try adding
-webkit-overflow-scrolling: touch.
Hope that helps you/whoever comes looking for this!
I am not sure if this will help
I found a general solution for Background Position Fixed on iOS.
And it works really well with recent iPads.
Feel free to copy!
Just beneath the body tag add a
<div id="iPad"></div>
Then style that as:
div#iPad {
position: sticky;
background: <your image + settings>;
top: 0;
margin: 0;
height: 100vh;
margin-top: -100vh;
z-index: -1 }
I put it on all pages of my site.
But you can see it in action on this really long music page.
It works!!
Took me a while to come up with this.
Note you can only see this on iOS tablet.
I didn't implement it for mobiles.
But possible the code would work just as well.
To all my div with fixed background I add the classes class="parallax iparaxify paraxify"
And in my main css file I have:
.parallax {
width: 100%;
background url(../images/bg.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And finally make it parallax for everything except i products
.paraxify {
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
At the end deactivate position:fixed for ipad, iphone and ipod with jquery
// adds mobile class, and mobile os to html tag
jQuery(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();
if (deviceAgent.match(/(iphone|ipod|ipad)/)) {
$('.iparaxify').removeClass('paraxify');
}
});
I am trying to get my background to fill 100%. It currently is on every page except where the content gets too large (see photo (http://i58.tinypic.com/2n18hn8.png)). I have tried a bunch of different things to fix it but nothing is working. If I change the #page-wrapper to 3000px it will display the background fully, but then is too large on other pages. Please help
html,
body,
#page {
height: 100%;
}
#page-wrapper {
min-height: 100%;
min-width: 960px;
}
In your body class
body{
background-size:cover;
background-image: url('img/cover.png');
background-position: top center;
background-attachment: fixed;
background-repeat: no-repeat;
background-color: #000;
overflow: hidden;
}
Try this and let me know what you think.
I have an image that I am showing on a page. Here is my css:
body {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
}
When I do this, everything shows just fine. I then try to show the same image in a div. Here is my html:
<body>
<div class="background-image"></div>
</body>
And here is my new css:
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
}
But now nothing shows. I look in my network tab and I see that the image is available, but it is not showing on the page. What am I doing wrong?
It's because the div is 0 pixels tall, give it some height, for example:
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
height: 100vh;
}
Since you are only using background you need to set a height/width on the div itself.
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
height: */Your Value/*;
}
I would suggest remove background-size: 100%; .. instead add height and width as 100%.
body {
background: url(./../imgs/beach.png) no-repeat;
height: 100%;
width: 100%;
}