Im using an svg as background for my html site. It works fine on most Desktops and a few broswers like Chrome on android, but in other browsers, there is this weird white blank area beneath the image. Any idea why this is happening? Here's what I mean - https://imgur.com/a/1ui6QeR
This is my styling right now. Any help would be appreciated.
html {
background: url('Bubble.svg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
}
body{
height: 100vh;
margin: 0;
display: grid;
place-items: center;
font-size: 10px;
}
It works completely fine on Chrome, but is offset to the right and bottom on firefox mobile, and is not displaying properly on edge mobile too.
Try to add 100% 100% instead of center center.
I would suggest to add the background image to a container in body rather to the html. Wrap your contents in a div and add image to that.
.bgImg{
background: url('https://www.w3schools.com/howto/img_forest.jpg') 100% 100% no-repeat;
background-size: cover;
height: 100%;
width: 100%;
min-height: 100vh;
}
<div class="bgImg">
</div>
Related
I can't get my background image to repeat on the y-axis when it is viewed on a mobile device. currently when on desktop the page can't scroll and the background image fills the screen. but if you move to tablet or mobile you need to scroll and the image is not repeating. My current code isn't much:
body {
background-image: url("../assets/BG.png");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: repeat-y;
background-position: center center;
margin-top: 0;
position: absolute;
height: 100%;
width:100%;
margin: 0;
}
Any help would be great.
Gif of issue: https://imgur.com/a/jX19E
erase background-size: cover; from that rule - this will always fill the full body element, also the part that appears when scrolling. Add background-size: 100% auto; instead and change the position to background-position: left top to make sure the image covers the complete width, starting from the upper left edge.
(BTW, position: absolute; for the body element is rather strange)
Here's a snippet that demonstrates it with a placeholder image:
body {
background-image: url("http://lorempixel.com/600/100/food");
background-size: 100% auto;
background-repeat: repeat-y;
background-position: left top;
margin-top: 0;
position: absolute;
height: 100%;
width:100%;
margin: 0;
}
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');
}
});
Link to the site is
I have an image with size cover as soon as you enter the page. In order to make it available in every browser (I was having troubles with Opera mini and Android browser) I added this code to the div element:
.portada{
width: 100%;
height: 100%;
position: fixed;
padding: 20px 10px 60px 10px;
height: 100vh;
top: 0;
left: 0;
z-index: 0;
background: url(../img/nike.jpg) no-repeat center center;
/* background-attachment: fixed; removed for Android */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
However, now, because of the position: fixed; when I keep adding content into my page, bellow that section, it displays under the picture and I can´t see it. It is destroying my page. And as soon as I take out the position: fixed; code, it goes back to not displaying the image full screen in Opera and old Android browser.
I want to be able to create more content and scroll down the page.
I have tried with position:relative; but it goes back to not working on Opera mini. It displays the image full width but with minimum height.
Any help? Thanks!
I think I finally found the solution. I added to the .portada class min-height: 300px; and now at least in those browsers the image is a little bit bigger and it does the job. I also took out the width and height properties so the final code of the class is:
.portada{
position: relative;
min-height: 300px;
z-index: -1;
padding: 20px 10px 60px 10px;
height: 100vh;
background: url(../img/nike.jpg) no-repeat center center;
/* background-attachment: fixed; removed for Android */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
Looks like it works good in every browser I can test.
This is because you display your image as a background and your div.portdata is empty. Try inserting the image using img html tag.
I have a div with properties and values of:
#main {
height: 100%;
width: 100%;
background: url(image.jpg) no-repeat center center fixed;
background-size: cover;
}
And when i tested website on iPad,the image appeared to be blurry and centered incorrectly.What could cause that problem? Any solutions please
I'm trying to create a responsive, FIXED background that works on all major browsers.
Basically I'm after the typical background:cover behavior (scales with browser size) BUT, want the background to be fixed to create a parallax effect.
Is this even possible if so, how?
The CSS so far WITHOUT Fixed:
#front_header {
background: url(1.png) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#front_header .featured {
width: 100%;
max-width: 950px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
#front_header .txt {
margin: 19.5% 0 19.5%;
text-align:center;
display: block;
}
The Body HTML:
<section id="front_header">
<div class="featured">
<div class="txt">
<h2>Test</h2>
</div>
</div>
</section>
As you can see, when you resize this, the background resizes slightly. However if I add
background-attached:fixed;
The background no longer resizes, only behaves like a fixed background should.
Try this:
keep the
background-attached:fixed;
and instead of background-size: cover, try :
background-size: contain;
Also for future reference, try and add your code to : http://jsfiddle.net
it's best when you simulate the problem for everyone to see and help.