Skip to content
OverviewSolutions
7
Comments
9

Karrar Hussein

@Karrar-Hussein220 points

Frontend developer, always looking for more knowledge to gain.

Latest solutions

View more solutions

Latest comments

  • Karrar Hussein•220
    @Karrar-Hussein

    In order to add multiple background images, you just need to write their urls in the background-image property and add a comma between the two images, just like this:

    background-image: url(images/bg-pattern-top.svg),
                  url(images/bg-pattern-bottom.svg);
    Marked as helpful
  • Karrar Hussein•220
    @Karrar-Hussein

    Nice solution, for your card image instead of using a div with a background color you just need to add an img tag with the image provided <img src="bg-pattern-card.svg"> and give it width: 100% and also don't forget to add an overflow: hidden to your card container to keep the edges round.

    And for your circles pattern rather than adding them in html you just need to set them as two background images and position them with the right values using the background-position property, it should be something like this:

    body {
  background-color: var(--clr-Dark-cyan);
  background-image: url(images/bg-pattern-top.svg),
                    url(images/bg-pattern-bottom.svg);
  background-repeat: no-repeat, no-repeat;
  background-position: right 49vw bottom 45vh, left 49vw top 50vh;
}

    That should fix your problems✨

    Happy coding😁🔥

    Marked as helpful
  • Karrar Hussein•220
    @Karrar-Hussein

    The reason that your buttons are expanding when hovering over them is because that you're creating the border in the :hoverstate, instead you should be adding it along with your button styles.

  • Karrar Hussein•220
    @Karrar-Hussein

    And for the circles in the background, you just need to position them with the right values you could try something like this: background-position: right 49vw bottom 45vh, left 49vw top 50vh;

    and I hope that fix your problem .

    happy coding😁🔥

    Marked as helpful
  • Karrar Hussein•220
    @Karrar-Hussein

    One easy way to fix it is to set the circles as two background images and position them using the background-position property it should be something like this:

    body {
  background-color: var(--clr-Dark-cyan);
  background-image: url(images/bg-pattern-top.svg),
                    url(images/bg-pattern-bottom.svg);
  background-repeat: no-repeat, no-repeat;
  background-position: right 49vw bottom 45vh, left 49vw top 50vh;
}

    Now you're good to go😁🔥

    happy coding✨

    Marked as helpful
  • Karrar Hussein•220
    @Karrar-Hussein

    Hi, nice solution 🔥. For your problem you don't really need a padding, you just need to add a white border around your image something like this border: 3px solid white; and you're good to go!✨

    Marked as helpful
View more comments