Profile-card-component

Community feedback

• 

  Harmanjot Singh•985

  @arkharman12Posted about 3 years ago

  I would use a <img> tag for card background and for the other background do something like this

  background: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg), var(--your-color);
  background-position: right 51vw bottom 37vh,left 50vw top 45vh;
  background-repeat: no-repeat; 
  

  Hope this helps!

  Marked as helpful

  2

  ---

  

  Juveria Dalvi•1,375

  @Juveria-DalviPosted about 3 years ago

  @arkharman12 thanks can you tell me why the victor background is not getting displayed??

  0

  

  Harmanjot Singh•985

  @arkharman12Posted about 3 years ago

  @juuveria This should make the card background svg to show up <img src="./images/bg-pattern-card.svg">. You can do the styling from there.

  Marked as helpful

  1

  

  Juveria Dalvi•1,375

  @Juveria-DalviPosted about 3 years ago

  @arkharman12 thankyou so much it helped.

  1
• 

  hardy•3,660

  @hardy333Posted about 3 years ago

  Hi, One way to solve your problem with background-images is to first of all remove .pattern-top and .pattern-bottom elements from html, that is not good way to use them. You need to set those images as background of the body in this steps:

  • you can use several(as many as you with) background images in same element, in your case on body, like this: background: url("image 1 url"), url("image 2 url);

  • second step is to position those pictures correct way for that use background-position property, in your case it will be : background-position: left top, right bottom. first - "left top" will apply first image second "right bottom" to second image.

  • you also need to change background-size to 50%, like this: background-size: 50%;

  • and you don't want background to repeat itself so set backgtound-repeat: no-repeat;

  That's all, but inn order to get comfortable with those properties I will suggest you to check this page out .

  4

  ---

  

  Juveria Dalvi•1,375

  @Juveria-DalviPosted about 3 years ago

  @hardy333 thank you so much it was helpful.

  1
• 

  Tafara takaiza•50

  @tafarathedevPosted about 3 years ago

  image not visible because this

  <div class="pattern-top"> <svg width="978" height="978" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1=".779%" x2="50%" y2="100%" id="a"><stop stop-color="#0989B4" stop-opacity="0" offset="0%"/><stop stop-color="#53FFEE" offset="99.94%"/></linearGradient></defs><ellipse fill="url(#a)" transform="rotate(-135 489 489)" cx="489" cy="489" rx="489" ry="488" fill-rule="evenodd" opacity=".5"/></svg> </div>

  contains no rule of it in css

  1

  ---

  

  Juveria Dalvi•1,375

  @Juveria-DalviPosted about 3 years ago

  @tafarathedev I have solved the issue thankyou it means a lot ☺

  0
• 

  Tafara takaiza•50

  @tafarathedevPosted about 3 years ago

  i suggest that you lay out your background images from within you css and manipulate both svg background-position to top right and the other to the bottom left i hope how i restyled your html body section in css will give you a clear hint

  body { background-color: var(--bg-color); background-image:url('./images/bg-pattern-top.svg'),url('./images/bg-pattern-bottom.svg'); background-repeat: no-repeat; background-position: right 51vw bottom 37vh,left 50vw top 45vh;

  height: 100vh; font-family: "Kumbh Sans", sans-serif; }

  1