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;
}
Related
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'm able to add a full-page background image that stretches to fit and doesn't repeat using the following in my custom HTML web page's CSS file:
body {
background: url(../dt_images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I tried doing this in SP 2013 website, but the BG image flickers for a second, then seems to be overridden by a master page blank white background color...
body {
background: url(http://khsp.cloudapp.net/SiteAssets/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
To override SP2013's white body background, I added !important, which now doesn't render anything but the white background:
background: url(http://khsp.cloudapp.net/SiteAssets/bg.jpg) no-repeat center center fixed !important;
I tried moving important to the front, and now it fits the whole page, but is tiled/repeating:
background: url(http://khsp.cloudapp.net/SiteAssets/bg.jpg) !important; no-repeat center center fixed;
How do I get it to fit the whole background in SP 2013 without repeating/tiling? I don't mind if it's stretched.
Thanks
try separating each style like this
background-image:url('paper.gif') !important;
background-repeat:no-repeat !important;
..
..
For what it's worth, this:
background: url(http://khsp.cloudapp.net/SiteAssets/bg.jpg) !important; no-repeat center center fixed;
is bad because of the ; after the !important (the CSS will stop at that point, which is why it repeats).
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.
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%;
}