Kevin Powell - Community•13mo ago

What should I do to this svg background (I'm new here and still learning)

it seems like this svg image that I'm going to put it to the background of my heading section seems a bit smaller than my screen (Svg background seems fit only 1440x but my screen is 2048x. And What should I do or design to make this 'svg' perfect?. I'm quite really hard and new thing for me to design this

4 Replies

ASTRICKOP•13mo ago

I had tried width: 100% or fit content but it doesn't fit to my responsive

~MARSMAN~•13mo ago

either delete the width="1440" height="911" from your svg element and add the sizes in your CSS like this:

.header-bg svg {
  width: 100%;
  height: 100%;
/* So it takes the whole width of its parent make sure to give the parent a size */
}

.header-bg svg {
  width: 100%;
  height: 100%;
/* So it takes the whole width of its parent make sure to give the parent a size */
}

or swab their values with 100% in the HTML. I personally prefer adding the sizes in CSS for later adjustments if needed but for future reference, any styling in the HTML will override your CSS file

capt_uhu•13mo ago

another way to get this design is to throw your background color on the element and use a clip-path to create the angle. Something like this:

clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 20px));

clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 20px));

Gaming

Programming

What should I do to this svg background (I'm new here and still learning)