Cannot use SVG as CSS background in Webkit

Question

I've been trying to use a SVG file as background for a header on my site, but it doesn't seem to show up in Webkit browsers (I tried Chrome and Safari; on mac). Firefox seems to display it correctly.

Here's my CSS:

header {
  overflow: auto;
  width: 100%;
  height: 80px;
  background: url(../img/navbg.svg) no-repeat;
  background-size: 100%;
  -o-background-size: 100%;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;

  margin: 0 0 20px 0;
  padding: 0;

  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;

  box-shadow: inset 0 0 1px #fff, 
    inset 0 1px 0 rgba(255,255,255,.3),
    0 1px 2px rgba(0,0,0,.5);
}

Any ideas on how to fix this?

Will be awesome if you show your svg and show complete example where you have problem. — b1_
– b1_, Commented Jul 16, 2012 at 9:20

RAN · Accepted Answer · 2012-07-16 09:36:58Z

1

Check this , it may helps you. http://helephant.com/2009/08/12/svg-images-as-css-backgrounds/

answered Jul 16, 2012 at 9:36

RAN

1,4493 gold badges19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jim · Accepted Answer · 2012-08-10 17:53:40Z

0

I found an example done in March 2012. With the warning:

"SVG included as CSS can't be scripted and positioning is hard. Therefore only use this method for background illustrations."

Hope this helps: http://tecfa.unige.ch/guides/svg/ex/html5/html5-with-css-background.html

answered Aug 10, 2012 at 17:53

Jim

1,2941 gold badge10 silver badges17 bronze badges

Comments

Raoul Wegat · Accepted Answer · 2013-04-15 04:40:27Z

0

Check if your SVG is missing height & width declarations. Without these, background SVG's won't show in Safari 5.

answered Apr 15, 2013 at 4:40

Raoul Wegat

1

Collectives™ on Stack Overflow

Cannot use SVG as CSS background in Webkit

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related