Image looks different in jsfiddle compared to codepen

HTML-CSS
1

codepen: Image fills the whole screen

jsfiddle: Image does not fill the whole screen.
https://jsfiddle.net/jofq3zg5/

Why does one fill the whole screen and the other does not?

How would I get it to fill the whole screen in jsfiddle?

I don’t understand why the image is not filling the whole screen in jsfiddle.

How do you get height to be 100%?

https://jsfiddle.net/yLhm97og/2/

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <pattern id="pattern" width="100" height="500" patternUnits="userSpaceOnUse">
        <circle r="506"/>
        <path d="M25 0H50V500H25M75 0H100V500H75M-50 500L50 0L150 500L50 150" fill="#e83"/>
    </pattern>
    <filter id="filter">
        <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="3"/>
        <feDisplacementMap in="SourceGraphic" yChannelSelector="R" scale="60"/>
    </filter>
    <rect x="-10%" y="-10%" width="120%" height="120%" fill="url(#pattern)" filter="url(#filter)"/>
</svg>
2

by setting the height of body to 100vh and reset the margin and padding to 0(zero) for all

3

That won’t increase the size of the <svg> though.

@javascriptcoding5678 If you check the HTML settings for that pen, you’ll see there’s some styles added in the head (not sure why they’re hiding them there):

body {
  margin:0;
}
body > svg {
  display: block;
  width: 100vw;
  height: 100vh;
}
1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.