Changing the colour of background behind image css

问题:

In CSS I'm using a gif as a background image:

background: url(http://*URL of gif*) no-repeat 50% 50%;

but depending on screen size I can still slightly see the background behind that image(it is white). How do I change the colour behind that image? I want to change it to be black.

回答1:

Simply include background color in your declartion

background: yourcolor url(http://*URL of gif*) no-repeat 50% 50%;

回答2:

The background shorthand property is made up of eight other properties:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

Hence, the shorthand property can be written as :

background : <background-image> <background-position> <background-size> <background-repeat> <background-attachment> <background-origin> <background-clip> <background-color>

In your case you would use this (since you want black color) :

background: url(http://*URL of gif*) no-repeat 50% 50% black;

See an example below :

div {
    background :url('http://i.stack.imgur.com/SZHzX.jpg') top center no-repeat black;
    padding: 10px;
    width:100%;
    height:300px;

}

<div></div>

Hope this helps!!!

回答3:

you are using background's short hand, you can write it as

background-image : background-color : background-size : background-repeat :

回答4:

There's no way to change the background "behind" the image that is set as background, but that is also not what you supposedly want.

The background shorthand also gives you the possibility to set a color value. That would be visible everywhere the background is not covered by the image.

So just use:

background: url(http://url) 50% 50% no-repeat #000;