Unwanted white space on mobile view - html

I have the problem that on my website, when I scroll fast on mobile, the background image moves up a bit and a white space at the bottom appears, and then disappears again when I stop scrolling.
I've tried a bunch of solutions to similar problems to prevent this from happening, but I haven't been able to solve it so far.
Here's the my css for the background image:
html {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And a screenshot of the issue:


Try adding the background img to the body aswell like this:
html, body {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


Try this code for mobile to the background image show all sides clear images but if your image is big then the image is stretched so first, you need to create a div container to fit your image into the div container.
html, body {
background: url(bg.jpg) no-repeat center center fixed;
background-size: 100% 100%;
}

Related

How To Remove White Background On Div Caused By Bootstrap

I have set the background of my web page to an image by doing this
html {
background: url("https://preview.ibb.co/dizdck/beach2.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Then I created a div like this
<div class="container">hi</div>
The problem is that the div has a white background that I don't want to see on the page. I noticed that this white background only appears when I am using bootstrap. Any ideas on why this might be happening and how to fix it?
Here is a codepen with the example: https://codepen.io/bobnooby/pen/GExJmE

you want to do this through css on the body :
body {
background-color: red !important; //set to color
background-image: url("https://preview.ibb.co/dizdck/beach2.jpg") !important; //or set image
}

I generally like to avoid the !important attribute as much as possible. My solution was to include the background image in the same tag as the html and body style attributes. this removed the white div bg color.
html body {
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;
}

How to position a cover image in the background?

I've placed an image in the background of my div with this code:
background: url(../images/cover-image.jpg) no-repeat 50% 100% fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 30rem;
But my problem now is, that I want to move the visible part of the image in the div. The Bottom of the picture should be at the bottom of the div, but I can change everything in the background: (center bottom, 50% 100% etc.) statement, nothing happens.
Can anybody give me a hint?

Try using
background-position: center bottom;

You need to remove the other styling in you 'background' deceleration and just put:
background-position:bottom;
see the fiddle here: https://jsfiddle.net/xerf3z5j/

As one line, this would be:
background: transparent url(../images/cover-image.jpg) center bottom / cover no-repeat fixed;

background-size: cover means that the background image will always take the full width and height of your div.
Should work if you remove those parts:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

How do I get a background to stretch to the full width?

I have to fix by HTML page's background for full width, but the height of the background is not as per my design. How can I fix it?
CSS Code:
html {
background: url(images/body_bg.jpg') no-repeat top left fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

You're missing a ' in the url
background: url('images/body_bg.jpg') no-repeat top left fixed;
Demo

Use background-size like the one used below,
body {
background-image: url(image1.jpg) no-repeat;
background-size: 100%;
}
Some useful links :
Scale background image style
Stretch and Scale a CSS image Background - With CSS only

How to keep the body (content) of website alligned with the center of background image

I'm trying to keep my site's content perfectly aligned with the center of its background image, is there a way to do this?
Currently my background is
body {
background: url(http://nickhumphries.com/images/tucson-bgl3b2.jpg) no-repeat center center fixed;
background-color: #fafafa;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align:center;
}
#mainContainer {
margin:0 auto;
}

you don't need text align center in your body since you are using divs over it. and you should probably use #maincontainer as a class .maincontainer so you can reuse it seperately.
And why are you using 100% size and cover at the same time? you can either resize it to cover or keep it at 100% right?
Play with these ideas.

usually if i want to center something, i give it a fixed width and set margins left and right to auto

Stop CSS background property from moving background on resize

I recently found the problem on a recent question I asked here which was related to what I thought was a Chrome or Safari webkit bug, or maybe something inside my style.css. However, I noticed after a while that my background was slightly moving on resize, and I concluded that when it moved towards the right, a left white border didn't show up from top to bottom on the left side of the screen, but when the background picture moved towards the right hand side then a 2px white border showed up on the left right side. How do I stop the border from moving.
MY CSS:
html {
background: url(/assets/fotball.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Try this:
background: url(/assets/fotball.jpg) no-repeat center top fixed;

Change your code to this: jsFiddle Live Demo
html {
background: url(/assets/fotball.jpg) repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position:;
}
When you use background-size: cover;, it makes no difference to use background:no-repeat or background:repeat. So in this case you can use repeat to solve your problem.