Skip to content
OverviewSolutions
4
Comments
3
NMT Nabeel
@T-Nabeel

All comments

  • Antoni•170
    @antonistarzynskiSubmitted over 2 years ago

    Hello everybody,

    This is my first attempt to html/css after learning for the past few weeks ( also to GitHub ) so please have mercy :) Two questions from the beginner.

    Questions:

    1. Which option is a better & more elegant: a) css (background-image) b) semantic html ( img src="" )

    2. (units) Which solution is more useful : a) "rems" everywhere ( parent & childs ) b) mixed "rems" ( parents) & "ems" (childs)

    I you have some time to look by more experienced eye at my code ( in general ) I would be very thankful for all kind of advices & remarks.

    Thank you! Antek

    QR card componenet

    1
    NMT Nabeel•80
    @T-NabeelPosted over 2 years ago

    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
    1
  • NMT Nabeel•80
    @T-NabeelPosted over 2 years ago

    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
    1
  • Khairul Fadhli•160
    @kfadhzSubmitted over 2 years ago

    Hi, this my solution for this time. I know it's not 100% same, but comments are welcome to make it better. I use Atom to build this site. For some reason, I don't know why background image not appear, I think I wrote the right code. I intend to learn more and more to make it better and always learning, thank you...

    Clipboard Landing Page Challenge

    2
    NMT Nabeel•80
    @T-NabeelPosted over 2 years ago

    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"); }

    0