Centering a background image with a gradient inline

172 views Asked by At

My current css is

background: -moz-linear-gradient(top,  rgba(47,163,216,0.85) 0%, rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(47,163,216,0.85)), color-stop(100%,rgba(47,163,216,0.85))),
url(http://i.imgur.com/HS5coix.jpg); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(47,163,216,0.85) 0%,rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(47,163,216,0.85) 0%,rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(47,163,216,0.85) 0%,rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg); /* IE10+ */
background: linear-gradient(to bottom,  rgba(47,163,216,0.85) 0%,rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d92fa3d8', endColorstr='#d92fa3d8',GradientType=0 ),
url(http://i.imgur.com/HS5coix.jpg); /* IE6-9 */
background-position:center;

The problem is that the background-position isn't formatting the background image to center. Possibly something like background: linear-gradient(to bottom, rgba(47,163,216,0.85) 0%,rgba(47,163,216,0.85) 100%), url(http://i.imgur.com/HS5coix.jpg) center;? Hope you can help!

2

There are 2 answers

0
sicksid On

Have you tried setting background-position: center center;? This solution worked here: Background Image won't center in IE 9

0
emsz On

I'm afraid I just answered my own question. The solution was url(http://i.imgur.com/HS5coix.jpg)50%;. Sorry for the inconvenience and thanks for all the help!