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%;
}
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;
}
I would like for the background image I'm using for my body tag to cover the entire background without a being zoomed in on one particular part of the image. In other words, I want the image to display as the background as the full picture, not cut off anywhere. Here is the CSS for my current body tag with the image:
body {
background-image: url("weather-background.jpeg");
background-repeat: no-repeat;
background-size: cover;
}
To get image cover background, you can do the following:
body {
background: url(weather-background.jpeg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Here is a working jsbin example with the following output.
You can go through css tricks - perfect full page background image for more examples and methods.
I'm currently working on another website and the client has requested parallax to be used. Here are some CSS properties that I believe could be used to resolve your problem:
body {
background-image: url('wherever');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
{
Try that and see if it works.
So this was what worked for me:
body {
background-image: url("weather-background.jpeg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
and then I gave my body tag a class of "contentContainer" and added this jQuery method:
$(".contentContainer").css("min-height", $(window).height());
Do anyone has similar experience and has the solution?
I use below CSS to display an background image on a mobile, of course I do declare
I could not able to display the image according to screen's height and width, if I remove the "background-attachment: fixed", then image is resized according to the screen's height and width but image is center according to the length of web content instead of the screen.
Do anyone have better solution?
#home {
background: url('../images/hkfmpt_trans.png');
background-repeat:no-repeat;
background-position:center;
background-attachment: fixed;
background-size: contain;
}
try this
html {
background: url('../images/hkfmpt_trans.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm trying to get a background image of a HTML element (body, div, etc.) to stretch its entire width and height.
Not having much luck. Is it even possible or do I have to do it some other way besides it being a background image?
My current css is:
body {
background-position: left top;
background-image: url(_images/home.jpg);
background-repeat: no-repeat;
}
Edit: I'm not keen on maintaining the CSS in Gabriel's suggestion so I'm changing the layout of the page instead. But that seems like the best answer so I'm marking it as such.
<style>
{ margin: 0; padding: 0; }
html {
background: url('images/yourimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
Use the background-size property: http://www.w3.org/TR/css3-background/#the-background-size
In short you can try this....
<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >
Where I have used few css and js...
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
And it is working fine for me.
Not sure that stretching a background image is possible. If you find that it's not possible, or not reliable in all of your target browsers, you could try using a stretched img tag with z-index set lower, and position set to absolute so that other content appears on top of it.
Let us know what you end up doing.
Edit: What I suggested is basically what's in gabriel's link. So try that :)
To expand on #PhiLho answer, you can center a very large image (or any size image) on a page with:
{
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;
}
Or you could use a smaller image with a background color that matches the background of the image (if it is a solid color). This may or may not suit your purposes.
{
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;
}
If you need to stretch your background image while resizing the screen and you don't need compatibility with older browser versions this will do the work:
body {
background-image: url('../images/image.jpg');
background-repeat: no-repeat;
background-size: cover;
}
If you have a large landscape image, this example here resizes the background in portrait mode, so that it displays on top, leaving blank on the bottom:
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
body {
background-image: url('myimage.jpg');
background-position-x: center;
background-position-y: bottom;
background-repeat: no-repeat;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media screen and (orientation:portrait) {
body {
background-position-y: top;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
}
The following code I use mostly for achieving the asked effect:
body {
background-image: url('../images/bg.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
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;
It works for me
.page-bg {
background: url("res://background");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
You cannot in pure CSS. Having an image covering the whole page behind all other components is probably your best bet (looks like that's the solution given above). Anyway, chances are it will look awful anyway. I would try either an image big enough to cover most screen resolutions (say up to 1600x1200, above it is scarcer), to limit the width of the page, or just to use an image that tile.
image{
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 0 3em 0 3em;
margin: -1.5em -0.5em -0.5em -1em;
width: absolute;
max-width: 100%;
Simply make a div to be the direct child of body (with the class name bg for example), encompassing all other elements in the body, and add this to the CSS file:
.bg {
background-image: url('_images/home.jpg');//Put your appropriate image URL here
background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}
Refer to this link: https://www.w3schools.com/css/css_rwd_images.asp
Scroll down to the part that says:
If the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area
There it shows the 'img_flowers.jpg' stretching to the size of the screen or browser regardless of how you resize it.