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;
}
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%;
}
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");
}
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
I'm working on a basic html page and I have this background image bg.jpg.
But the problem is depending on the screen size you have and how many pixels the screen has I'm not able to view the whole background image which is something I want.
How do I make the background fixed so you can see the whole background?
If you mean a full page background image than you can simply do it with CSS3 background-size property
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;
}
If you need to attach it, kinda fixed and shouldn't be scrolled, than use
background-attachment: fixed;
/* This is already used in above CSS declaration using CSS Short Hand*/
You can do something like this:
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;
}
You can read more here: link
Delete your "body background image code" then paste this code:
html
{
background: url(../img/bg.jpg) no-repeat center center fixed #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can use CSS pseudo selectors.
body:after
{
content: url(your_image)
/* Styling your image here just like a div */
}
Of course those other solutions are OK too, but they only work in latest modern browsers. This pseudo selection solution works in most browsers used today. If you'd like to support even older browsers, like ancient versions of IE, then you can use a div to contain the background image and style it as you'd like.