Submitted about 2 years ago

Profile card component using HTML and CSS

develoba•270

@develoba

Preview site View code

This is a solution for...Profile card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

The main difficulty I found in this challenge is to apply the two background images. After thinking, reading some other developer's code and some documentation, I came out with the solution of adding two div containers for each image and add them with an absolute position.

I would like to know if there is another possible solution for this.

The code I used to add these images is the following:

<body>
  <div class="bg-img top-img"></div>
  <div class="bg-img bottom-img"></div>
  .
  .
  .
</body>

.bg-img {
    width: 250px;
    height: 450px;
    position: absolute;
    z-index: -1;
}

.top-img {
    background: url('./images/bg-pattern-top.svg');
    background-position: 100% 100%;
    top: 0;
}
.bottom-img {
    background-image: url('./images/bg-pattern-bottom.svg');
    bottom: 0;
    right: 0;
}

Please feel free to post any suggestions to improve any part of my code!

Community feedback

Melvin Aguilar 🧑🏻‍💻•61,140
@MelvinAguilarPosted about 2 years ago
Hi @develoba 👋, good job completing this challenge! 🎉

It is not recommended to have empty <div> elements in your html code. You could use the CSS backgrounds properties to set the background directly in the body element :

body { . . . background-color: var(--bg-color); background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg); background-repeat: no-repeat, no-repeat; background-position: right 52vw bottom 35vh, left 48vw top 52vh; }

background-color Set the background color

background-image Set a background image

background-repeat Sets if a background image will be repeated along the horizontal and vertical axes, or not repeated at all.

background-position Sets the starting position of a background image. More information

You can also specify the size of the background image with background-size

The background property is shorthand for all the properties mentioned above but for now. It is better to understand them separately.

The background-position for me worked with the vw (viewport width) and vh (viewport height) units, but you can also use percentages. It's just a matter of trial and error to place them as you wish.

References:

CSS background Property |

Background property

Background-repeat (MDN)

I hope those tips will help you! 👍

Good job, and happy coding! 😁
Marked as helpful
3
develoba•270
@develobaPosted about 2 years ago
@MelvinAguilar thank you so much for your recommendation! I will apply it to my code!

Happy coding to you as well!
1

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord