CSS Background Image Cut Off - css

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;
}

Related

How to correctly scale a background image

I've got a 8192x8192 image which should be used as a background image. It shows the image but only the half and I've got no clue how to scale the height correctly.
My CSS code:
body {
background: url('../img/atlas.png') no-repeat;
background-size: cover;
height: 100%;
width: 100%;}

Is it what you want?
body {
background: url(https://source.unsplash.com/IvfoDk30JnI/1500x1000) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

background image not display in css code

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;
}

In Rails / bootstrap, why isn't the background image stretching properly?

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.

how to make the background the same as the div size in css

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%;
}

CSS fixed background has white line on the left

I tried to put a background on my whole page with
html {
background: url(images/panda.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This generally works just fine, but I have discovered a problem: On the left-hand side of the screen is a white stripe. Is it possible to fix that?
PS: Just in advance: No, that stripe is not on the picture. You can get an impression of how it looks:
EDIT: http://jsfiddle.net/uhwcW/
When zooming in/out the white stripe sometimes disappears or switches sides... Confusing.

Try;
margin: 0;
padding: 0
in your CSS for html.

Have you tried to reset your body? Try this for other containers too, maybe it's just some margin or padding you're seeing...
body {
margin: 0;
padding:0;
}

this worked for me..
html{
background: url(..//index3.jpg) no-repeat 0 0 fixed;
-webkit-background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
-moz-background-size: cover;
}

Just adding a center after the url did it for me
like this:
background: url(images/panda.jpg) center;

Resources