I'm creating a form on my page with bootstrap css.
I use an image as background which covers the entire background.
bootstrap seems to add a semi-tranparency to the top of my page, which disappears when scrolling the page: http://www.landoflove.be/medewerkers.php and I can't seem to find out why it's doing that. It does the same thing on the main page landoflove.be .Why is this happening and how can I disable it?
Your html code is invalid. There's no doctype and you have unclosed div somewhere. Fix this first, then add:
html, body {padding:0; margin:0}
Check this CSS in your landoflove.css file
body, html {
height: 100%;
background: url(../img/bgoff-min.png) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: baloo paaji, sans-serif;
}
The problem is here
background: url(../img/bgoff-min.png) no-repeat center fixed;
Your image is having the size of 1227 X 1159 pixels. and you have added no-repeat center fixed
if you remove that you will have the background to be stretched something like this
Also, you need to modify the HTML
Seems that you are using only one
<div class="row"></div>
and all your form elements are inside this which is not a right approach.So suggesting you to have one form-group in one row
the mark-up was indeed invalid for some tags because is was a work in progress.
I seem to have found what my particular problem was:
body, html {
height: 100%;
background: url(../img/bgoff-min.png) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: baloo paaji, sans-serif;
}
The height: 100% caused the problem. Now the transparent layer is indeed gone, but i still have no clue why it added such tranparency in the first place.
Related
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());
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.
My CSS code is as follows:
body {
background-image: url(images/bg.png);
background-attachment: scroll;
background-repeat: no-repeat;
background-size: 100%;
}
The background image is obviously larger than a standard webpage, but it still won't let me scroll down.
[A side note - I also cannot scroll down in the design view: http://www.meikledesign.co.uk/host/example.jpg]
Give the body a finite height for testing purposes.
body {
height: 2000px;
}
Backgrounds do not artificially increase the body of an html page (defined, by default, as 100%, 100% of browser window) if I remember correctly.
Change the body min-height to the bg.png height, not too pretty solution, but works
If you are trying to achieve responsive background, then check this perfect-full-page-background-image
you can achieve that with css3, 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;
}
but that way it wont work in all browsers.
Check the link i provided for crossbrowser solution.
And about scrolling, you can do that as other members said earlier, by adding min-height to the body.
How to make an image as background for web page, regardless of the screen size displaying this web page? I want to display it properly. How?
its very simple
use this css (replace image.jpg with your background image)
body{height:100%;
width:100%;
background-image:url(image.jpg);/*your background image*/
background-repeat:no-repeat;/*we want to have one single image not a repeated one*/
background-size:cover;/*this sets the image to fullscreen covering the whole screen*/
/*css hack for ie*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.image.jpg',sizingMethod='scale');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',sizingMethod='scale')";
}
um why not just set an image to the bottom layer and forgo all the annoyances
<img src='yourmom.png' style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>
Via jQuery plugins ;)
http://srobbin.com/jquery-plugins/backstretch/
http://buildinternet.com/project/supersized/
Use this CSS to make full screen backgound in a web page.
body {
margin:0;
padding:0;
background:url("https://static.vecteezy.com/system/resources/previews/000/106/719/original/vector-abstract-blue-wave-background.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use the following code in your CSS
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;
}
here's the link where i found it:
Make a div 100% wide and 100% high. Then set a background image.
A quick search for keywords background generator shows this CSS3 produced background pattern that's dynamically created.
By keeping the image small and repeatable, you won't have problems with it loading on mobile devices and the small image file-size takes care of memory concerns.
Here's the markup for the head section:
<style type="text/css">
body {
background-image:url('path/to/your/image/background.png');
width: 100%;
height: 100%;
}
</style>
If your going to use an image of something that should preserve aspect ratio, such as people or objects, then you don't want 100% for width and height since that will stretch the image out of proportion. Instead check out this quick tutorial that shows different methods for applying background images using CSS.
CSS
.bbg {
/* The image used */
background-image: url('...');
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
HTML
<!doctype html>
<html class="h-100">
.
.
.
<body class="bbg">
</body>
.
.
.
</html>
I have followed this tutorial: https://css-tricks.com/perfect-full-page-background-image/
Specifically, the first Demo was the one that helped me out a lot!
CSS
{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
this might help!
I found the reason why there is always a white boder of the background image, if I put the image in a 'div' element inside 'body'.
But the image can be full screen, if I put it as background image of 'body'.
Because the default 'margin' of 'body' is not zero.
After add this css, the background image can be full screen even I put it in 'div'.
body {
margin: 0px;
}