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.
Related
I've got a 8192x8192 image which should be used as a background image. It shows the image but only the half and I've got no clue how to scale the height correctly.
My CSS code:
body {
background: url('../img/atlas.png') no-repeat;
background-size: cover;
height: 100%;
width: 100%;}
Is it what you want?
body {
background: url(https://source.unsplash.com/IvfoDk30JnI/1500x1000) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
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;
}
I'm trying to make a website on a single page, with every section of the page taking up exactly the size of the user screen (using backstrech for backgrounds).
Like this: http://projects.lukehaas.me/scrollify/#home
The problem comes when the user's screen height is too small to contain my page's content. In that case, I want my background to stretch more than the user's screen, as it has to fill the entire content's background.
So, I've been using overflow:scroll, which fix the entire problem except for displaying an annoying horizontal scroll bar, even when it is not needed. What I mean is, even at full-screen when there's no overflow at all, the horizontal scrollbar appears
This is my code:
section#page1 {
background: url('../img/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
overflow: scroll; }
try this:
section#page1 {
background: url('../img/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
section#page1 {
background: url('../img/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
overflow: auto;
}
I'm trying to have my billboard image approximately 2200px 965px fix inside of an div expanding the width of the screen and 500px in height, without losing any parts of the image. Is this possible, I have problem completing this task.
<div class="billboard"> </div>
css:
height: 500px;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
display:block;
width:100%;
Yes, simply add width: 1140px to your CSS code to make sure that it doesn't get chopped off at all.
If this is what you want, background image not getting chopped off, but generating an ugly output.
Note : The image I used has exactly the same dimensions as you provided (2200px by 965px)
.billboard {
height: 500px;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: 100% 500px;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 500px;
background-image: url(http://upload.wikimedia.org/wikipedia/commons/0/0a/Transjorund_Oulu_2007_05_20.JPG);
width: 100%;
display: block;
}
<div class="billboard">ABV</div>
Here if the snippet is not working: JSfiddle
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;