everyone.I want to make a full width background image as responsive.I am using bootstrap3.00 framework.as usually when some one use bootstrap framework it make a template as responsive but the background which i used that is situated outside of the bootstrap container.and when i look it for a small device the background image shows scroll bar.Now how can i fixed the problem??please the experts give me a suitable solution.
Perfect Background image (from css-trick.com)
html {
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;
}
Example :
html {
background: url(http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Related
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%;
}
This is where my image is located.
I already tried several options shown on the picture, I have my css on my html (training purposes ) C:\Users\developer\Desktop\HTML Folder2
the following is taken form https://css-tricks.com
We can do this purely through CSS thanks to the background-size property now in CSS3. We'll use the html element (better than body as it's always at least the height of the browser window). We set a fixed and centered background on it, then adjust it's size using background-size set to the cover keyword.
html {
background: url(http://enjoycss.com/webshots/hB_1.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
https://css-tricks.com/perfect-full-page-background-image/
body {
background: url(HTML Folder2/image.jpg)no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
I did the following in CSS and it didn't change the webpage:
html {
background:url("image.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
But then I did the following code and the background changed how I wanted it to:
body {
margin:0;
padding:0;
background:url("image.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
It doesn't make sense why the html call would not update it but the body would.
The rest of the code is blank except for the Bootstrap framework I'm using.
The rest of the code is blank except for the Bootstrap framework I'm using
… and that is your problem.
The Bootstrap CSS sets a background colour on the body element.
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}
— source
This covers up any background you apply to the HTML element.
Setting body { background: transparent } would override that.
I am working on a site which uses bootstrap tabs/pills from w3 schools(http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs&stacked=h)
I wanted to show background for the entire web page but the content of the tabs always hide the background image.
html {
background: url("bground.jpg") no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use body instead of html
body{
background: url("bground.jpg");
}
Is there a way or a plugin to make an image fill the screen like with Fancybox. Like one that automatically crop, centers, and scales the image?
body {
background: url(images/sample.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}