I am using bootstrap and rails. I am trying to have a background image take up the entire background and stretch when the browser is larger. This is working for the most part, except when the browser is smaller the bottom of the image goes up and the bottom of the browser screen is blank. Here is the css I have now:
body {
background-image: url('bilde.jpg');
background-repeat: no-repeat;
background-position: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have tried this:
body {
background-image: url('bilde.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
but it does not work either. Does anyone have an answer for this problem? Thanks.
I figured it out. The difference was that I should have been using
background: url('bilde.jpg') no-repeat center center fixed;
instead of
background-image: url('bilde.jpg') no-repeat center center fixed;
Pretty subtle but the change did the trick.
Related
I'm looking for so long to fix my issue with an full image background in wordpress and the image is awesome but is will not resize on browser and devices. Is there any css trick to do the job?
Here is my website http://www.social-boost.nl also the sign up form is important...... I hope somebody can help me out with this.
What about cover (CSS):
html {
background: url(wp-content/uploads/2018/02/landingsbnew20182.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Updated answer to overwrite interfering CSS rules:
html {
background: url(wp-content/uploads/2018/02/landingsbnew20182.jpg) no-repeat center center fixed !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}
I have an image which is not displayed as expected in the browser.
How do I solve this error?
I've got the following code, but it doesn't seem to be doing what I want.
html {
background-image: url(demo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-0-background-size: cover;
background-size: cover;
}
At first you should check your Image Path in url(demo.jpg)
If your image path is correct, It should work.
And change
-0-background-size
To
-o-background-size
html {
background: url(https://s-media-cache-ak0.pinimg.com/originals/3d/0c/0b/3d0c0ba69a64eb7105688e9ca5cddab5.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Well your mistake is that background-image has multiple values. background-image can contain ONLY the url! background can contain multiple values.
So you use background with multiple values or specify every background property.
So this should be correct:
html {
background: url(https://s-media-cache-ak0.pinimg.com/originals/70/69/52/706952eab7649280a7bd679aed184b98.gif) no-repeat center center fixed;
background-size: cover;
}
I have a site on which the background of the image gets cut off even if the height is increased. How can I have the top area of the image on the page too?
.top-area {
background: url(../img/matt.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 677px;
}
Change .top-area to this. You're using fixed background attachment, so you need to modify the background position to clear your navigation (which is 78px tall), so move the background image down 78px. I also added a margin-top of 28px to .top-area so the div will clear your header, too.
.top-area {
background: url(../img/matt.png) no-repeat center 78px fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 677px;
min-height: 100%;
margin-top: 28px;
}
It's happening because you used navbar position fixed. if you want to use this add
body{padding-top:78px;}
or
.top-area{margin-top:28px;}
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 developing a website and I need to know how can I make the background the same size of the div in the css .. I'm trying to make the BG size auto but it doesn't works > So does any one know a solution for that
!!
Thanks
#header {
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;
}
Try:
{
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}