CODEWITHSUNDEEP
css
Youssef Mehili
Youssef Mehili

Reputation: 11

How to put a background image at right bottom?

I wanted to do something like this:

design

But I don't know how to put the circle at the right bottom (It's an SVG image so I can't send it here)

I've done this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
    
    <title>Frontend Mentor | Profile card component</title>

    <style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
    body {
        background-color: hsl(185, 75%, 39%);
        background-image: url("file:///C:/Users/Alex/Desktop/profile-card-component-main/images/bg-pattern-bottom.svg"); background-repeat: no-repeat;
        background-position: bottom 50%;
    }
    </style>
</head>
<body>
    Victor Crest
    26
    London

    80K
    Followers

    803K
    Likes

    1.4K
    Photos
    <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Youssef</a>.
    </div>
</body>
</html>

Upvotes: 1

Views: 95

Answers (2)

Jatin Gupta
Jatin Gupta

Reputation: 927

You are missing 2 things:

  • background-position
  • min-height on body - as your body has no content it's not taking sufficient height

Paste the following code in your style tag, it should fix the issue:

.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
body {
  background-color: hsl(185, 75%, 39%);
  background-image: url("file:///C:/Users/Alex/Desktop/profile-card-component-main/images/bg-pattern-bottom.svg"); background-repeat: no-repeat;
  background-position: right bottom;
  min-height: 100vh;
}

Upvotes: 1

Vora Arshit
Vora Arshit

Reputation: 40

Use this following property :

background-position: bottom right;

Upvotes: 0

Related Questions