CODEWITHSUNDEEP
cssbackgroundwebkitsvg
Marcel Samyn
Marcel Samyn

Reputation: 25

Cannot use SVG as CSS background in Webkit

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?

Upvotes: 2

Views: 4289

Answers (3)

Raoul Wegat
Raoul Wegat

Reputation: 1

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

Upvotes: 0

Jim
Jim

Reputation: 1294

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

Upvotes: 0

RAN
RAN

Reputation: 1453

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

Upvotes: 1

Related Questions