Changing the colour of background behind image css

Question

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.

Answer 1

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;

Answer 2

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

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

Answer 3

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!!!

Answer 4

Simply include background color in your declartion

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