Center SVG image in background

Question

I'm having a problem centering a SVG image in the background.

Here is the CCS:

.cs-title {
  display: block;
  background: url("../logo.svg");
  background-repeat: no-repeat;
  height: 220px;
  margin: 0 auto;
  text-indent: -9999px;
  width: 440px;  
  background-position:left center;
  float: center;
}

Do you guys have any ideas?

Thanks!

I agree with Sam's comments. Please refer this [link](http://stackoverflow.com/questions/17944354/svg-background-image-position-is-always-centered-in-internet-explorer-despite-b). — Fazil Abdulkhadar, Oct 24 '15 at 02:37
Without details of the SVG itself we can't offer much advice. If the logo isn't itself centered inside the SVG you are going to have trouble. — Paulie_D, Oct 24 '15 at 06:41
You also be aware that there is no such property/value as `float:center` — Paulie_D, Oct 24 '15 at 06:42

score 0 · Answer 1 · answered Oct 24 '15 at 01:20

For a logo, I would place the svg on the page rather than as a background image. Also, without more information, I would guess that the issue is with the svg itself. Have you got the viewbox propety set to the svg dimensions in the svg code, as well as height and width set to 100%?

Center SVG image in background

1 Answers1