Using SVG as background image

Question

I can t seem to get this to work as desired  My page changes height based on what content is loaded and if it requires a scroll  the svg doesn t seem to be stretching      x000D   x000D  html   x000D    height  100   x000D    background-image  url http   www horizonchampion eu themes projectbase images bg svg   x000D    background-size  100  100   x000D    -o-background-size  100  100   x000D    -webkit-background-size  100  100   x000D    background-size  cover  x000D    x000D   lt svg width  1024  height  800  xmlns  http   www w3 org 2000 svg  gt  x000D           lt defs gt  x000D               lt radialGradient fy  0 04688  fx  0 48047  r  1 11837  cy  0 04688  cx  0 48047  id  svg 2  gt  x000D                   lt stop stop-color   ffffff  offset  0   gt  x000D                   lt stop stop-opacity  0  stop-color   eaeaea  offset  1   gt  x000D               lt  radialGradient gt  x000D               lt radialGradient fy  0 04688  fx  0 48047  r  1 71429  cy  0 04688  cx  0 48047  id  svg 5  gt  x000D                   lt stop stop-color   ffffff  offset  0   gt  x000D                   lt stop stop-opacity  0  stop-color   eaeaea  offset  1   gt  x000D               lt  radialGradient gt  x000D            lt  defs gt  x000D            lt g display  inline  gt  x000D               lt title gt Layer 1 lt  title gt  x000D               lt rect fill   eaeaea  stroke-width  0  x  0  y  0  width  1024  height  800  id  svg 1   gt  x000D           lt  g gt  x000D            lt g gt  x000D                 lt title gt Layer 2 lt  title gt  x000D                 lt rect id  svg 3  height  282  width  527  y  1  x  1  stroke-width  0  fill  url  svg 2    gt  x000D                 lt rect id  svg 4  height  698  width  1021 99999  y  1  x  1  stroke-width  0  fill  url  svg 5    gt  x000D            lt  g gt  x000D       lt  svg gt  x000D   x000D   x000D    Is it possible to do this with just CSS3  I d like to not have to load ANOTHER JS library or call   Any ideas  Thanks

User · Answer

Try placing it on your body  body       height  100       background-image  url    img bg svg       background-size 100  100       -o-background-size  100  100       -webkit-background-size  100  100       background-size cover

User · Answer

You have set a fixed width and height in your svg tag  This is probably the root of your problem  Try not removing those and set the width and height  if needed  using CSS instead

User · Answer

Set Background svg with content cart at center  login-container     justify-content  center    align-items  center    display  flex    height  100vh     background-image  url  assets images login-bg svg     background-position  center    background-repeat  no-repeat    background-size  cover

User · Answer

With my solution you re able to get something similar      Here is bulletproff solution   Your html   lt input class  calendarIcon   gt   Your SVG  i used fa-calendar-alt      any IDE may open svg image as shown below    lt svg xmlns  http   www w3 org 2000 svg  viewBox  0 0 448 512  gt  lt path d  M148 288h-40c-6 6 0-12-5 4-12-12v-40c0-6 6 5 4-12 12-12h40c6 6 0 12 5 4 12 12v40c0 6 6-5 4 12-12 12zm108-12v-40c0-6 6-5 4-12-12-12h-40c-6 6 0-12 5 4-12 12v40c0 6 6 5 4 12 12 12h40c6 6 0 12-5 4 12-12zm96 0v-40c0-6 6-5 4-12-12-12h-40c-6 6 0-12 5 4-12 12v40c0 6 6 5 4 12 12 12h40c6 6 0 12-5 4 12-12zm-96 96v-40c0-6 6-5 4-12-12-12h-40c-6 6 0-12 5 4-12 12v40c0 6 6 5 4 12 12 12h40c6 6 0 12-5 4 12-12zm-96 0v-40c0-6 6-5 4-12-12-12h-40c-6 6 0-12 5 4-12 12v40c0 6 6 5 4 12 12 12h40c6 6 0 12-5 4 12-12zm192 0v-40c0-6 6-5 4-12-12-12h-40c-6 6 0-12 5 4-12 12v40c0 6 6 5 4 12 12 12h40c6 6 0 12-5 4 12-12zm96-260v352c0 26 5-21 5 48-48 48H48c-26 5 0-48-21 5-48-48V112c0-26 5 21 5-48 48-48h48V12c0-6 6 5 4-12 12-12h40c6 6 0 12 5 4 12 12v52h128V12c0-6 6 5 4-12 12-12h40c6 6 0 12 5 4 12 12v52h48c26 5 0 48 21 5 48 48zm-48 346V160H48v298c0 3 3 2 7 6 6 6h340c3 3 0 6-2 7 6-6z   gt  lt  svg gt   To use it at css background-image you gotta encode the svg to address valid string  I used this tool   As far as you got all stuff you need  you re coming to css   calendarIcon          your url will be something like this        background-image  url  data image svg xml     lt here place encoded svg gt              background-repeat  no-repeat          Note  these styling wont have any effect on encoded svg image           fill   f00    neither this       background-color   f00    nor this     because all changes over the image must be applied directly to its svg code    lt svg xmlns    path    fill   f00   gt  lt  svg gt   To achive the location righthand i copied some Bootstrap spacing and my final css get the next look    calendarIcon        background-image  url  data image svg xml  3Csvg   svg 3E          background-repeat  no-repeat        padding-right  calc 1 5em   0 75rem         background-position  center right calc 0 375em   0 1875rem         background-size  calc 0 75em   0 375rem  calc 0 75em   0 375rem

User · Answer

You can try removing the width and height attributes on the svg root element  adding preserveAspectRatio  none  viewBox  0 0 1024 800  instead  It makes a difference in Opera at least  assuming you wanted the svg to stretch to fill the entire region defined by the CSS styles

[css] Using SVG as background image

Examples related to css

Examples related to svg