Skip to content
OverviewSolutions
4
Comments
3

NMT Nabeel

@T-Nabeel80 points

Hey! 👋 I'm a Frontend Developer and a Software Engineering student. My fields of work are Frontend Development, Designing and Artworks. In my profile, you can check my solutions for the given designs. 👍

I’m currently learning...

Mobile Application Development 📱👨‍💻

Latest solutions

Latest comments

  • NMT Nabeel•80
    @T-Nabeel

    Hey Antoni, Great job on your first challenge! 🤙

    Answer to your first question, which one better, IMG or CSS Bg? It really depends on the work you trying to do, follow this stack, you can get a better idea. Click here

    Answer to your second question, Both rem and em have their strengths and weaknesses depending on again, the use case. So it is up to you to choose the suitable unit which will work best.

    • em is relative to the font-size of parent.
    • rem is relative to the HTML (root) font-size.

    Hope this helps, Keep up the good work! 👍

    Marked as helpful
  • NMT Nabeel•80
    @T-Nabeel

    Hey, Nice work on the first challenge.

    I did took a look into your code. Try adding the following code after body selector. It will work.

    body::before,
body::after {
  content: '';
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  transform: translate(-50%, -50%);
}

body::before {
  z-index: -1;
  background: url("/bg-pattern-top.svg") no-repeat bottom right;
  top: 0;
  left: 0;
}

body::after {
  z-index: -1;
  background: url("/bg-pattern-bottom.svg") no-repeat top left;
  top: 100%;
  left: 100%;
}

    Hope this helps! 👍

    Marked as helpful
  • NMT Nabeel•80
    @T-Nabeel

    When uploading files to github, create a repository and push the work files to that repository.

    For your question, to display the background image, change the code like this. 👇 It should work.

    #logo-header { background-image: url("../images/bg-header-desktop.png"); }