CSS fixed background has white line on the left - css

I tried to put a background on my whole page with
html {
background: url(images/panda.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This generally works just fine, but I have discovered a problem: On the left-hand side of the screen is a white stripe. Is it possible to fix that?
PS: Just in advance: No, that stripe is not on the picture. You can get an impression of how it looks:
EDIT: http://jsfiddle.net/uhwcW/
When zooming in/out the white stripe sometimes disappears or switches sides... Confusing.


Try;
margin: 0;
padding: 0
in your CSS for html.


Have you tried to reset your body? Try this for other containers too, maybe it's just some margin or padding you're seeing...
body {
margin: 0;
padding:0;
}


this worked for me..
html{
background: url(..//index3.jpg) no-repeat 0 0 fixed;
-webkit-background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
-moz-background-size: cover;
}


Just adding a center after the url did it for me
like this:
background: url(images/panda.jpg) center;

Related

How to fix mobile background white space

How do I get rid of the white space showing up in the background. It only happens once on the initial load. whenever you refresh it goes away. Any suggestions will be helpful. Thanks in advance for your help.
body {
background-image: url("https://www.example.com");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
margin: 0;
}

I fixed it last night by removing the background-attachment: fixed.

Wordpress Image is not resize on browser and devices

I'm looking for so long to fix my issue with an full image background in wordpress and the image is awesome but is will not resize on browser and devices. Is there any css trick to do the job?
Here is my website http://www.social-boost.nl also the sign up form is important...... I hope somebody can help me out with this.

What about cover (CSS):
html {
background: url(wp-content/uploads/2018/02/landingsbnew20182.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Updated answer to overwrite interfering CSS rules:
html {
background: url(wp-content/uploads/2018/02/landingsbnew20182.jpg) no-repeat center center fixed !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}

Background top cutting from image

I have a site on which the background of the image gets cut off even if the height is increased. How can I have the top area of the image on the page too?
.top-area {
background: url(../img/matt.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 677px;
}

Change .top-area to this. You're using fixed background attachment, so you need to modify the background position to clear your navigation (which is 78px tall), so move the background image down 78px. I also added a margin-top of 28px to .top-area so the div will clear your header, too.
.top-area {
background: url(../img/matt.png) no-repeat center 78px fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 677px;
min-height: 100%;
margin-top: 28px;
}

It's happening because you used navbar position fixed. if you want to use this add
body{padding-top:78px;}
or
.top-area{margin-top:28px;}

CSS Background Image Cut Off

I've looked at a other similar thread and can't seem to find the answer.
Look at the shield background image. It's cut off slightly at the top and bottom... I've tried a lot of things but I can't get it to display properly.
Here is the site http://revivedlife.com
Here's the css for the background image:
.hentry h2 {
background: url(images/post_element.png) no-repeat 0 -4px;
display: inline-block;
}

Try replacing your existing css with this:
.hentry h2 {
background: url(LOCATION HERE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This will make sure the background image looks correct, even on old browsers.

Have you tried background-size: cover;
I think the following code may help you :)
.hentry h2 {
background-attachment: fixed;
background-image: url("http://revivedlife.com/wp-content/uploads/2016/03/bg_body.jpg");
background-position: left top;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

how to make the background the same as the div size in css

I'm developing a website and I need to know how can I make the background the same size of the div in the css .. I'm trying to make the BG size auto but it doesn't works > So does any one know a solution for that
!!
Thanks

#header {
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;
}

Try:
{
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}

Resources