CODEWITHSUNDEEP
htmlcssbootstrap-4frontend
hphp
hphp

Reputation: 2272

How to set Background image fit to the element

I have an image for my button's background image. but, the image is not fit to the element inside <li> tag. But if I placed my button inside ouside <li>, it will resulting the expected result.

Here's example for image inside <li>

Result

and this is the image outside <li>

enter image description here

here's my <html> code:

<ul class="dropdown-menu dropdown-menu-right p-2 text-center w-20em" aria-labelledby="userDropdown">
            <li>
                <img src="~/images/user.png" class="rounded-circle img-fluid p-3 w-50">
                <p>
                    Someone's Name
                </p>
            </li>
            <li>
                <!-- Here's the link code -->
                <div class="row">
                    <div class="col-md-6">
                        <a class="btn-gold form-control" asp-page="/Password/Edit">Change</a>
                    </div>
                    <div class="col-md-6">
                        <a class="btn-gold form-control" asp-page="/Auth/Logout">Logout</a>
                    </div>
                </div>
            </li>
        </ul>

and this is my custom class for btn-gold

.btn-gold {
  background: url(/images/button.png);
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
  color: white;

  &:hover {
      cursor: pointer;
  }
}

can someone help me to fit the image inside <li> tag? Thanks

Upvotes: 1

Views: 1335

Answers (2)

Dr Jfrost
Dr Jfrost

Reputation: 134

If what you want to achive is a rounded corner style, the best way to achieve that is by styling the button with css using the border-radius and the bootstrap btn class properties.

see this link for more info. Do not forget to add the !important value on css if you want to make changes over bootstrap clases.

Note that it's a better practice to make the use of styles and classes instead of images, since images will make your application less responsive and more rigid to handle. see this for more info.

.round{
border-radius: 30px !important;
}
<!-- Bootstrap importation -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<button type="button" class="btn btn-primary">Basic</button> This has default bootstrap round corners<br>

<br>if somehow you are using links try the link tag:<br>

<br><a href="#" class="btn btn-primary" role="button" aria-disabled="true">this is a link</a> here we made use of the "role" option and the bootstrap classes<br>

<h2> Changing round corners</h2><br>

<button type="button" class="btn btn-primary round">Basic</button> 30px round corner. notice how we also made the use of "!important" property on css in order to override bootstrap's default css properties<br>

Upvotes: 0

Saravana
Saravana

Reputation: 3496

Just remove the form-control class for button type and add the padding to visible the button background image. Hope this solution will be helpful.

.btn-gold {
  background: url('http://www.clker.com/cliparts/I/Z/c/6/W/I/small-button-md.png');
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
  color: white !important;
  padding: 8px 20px 12px 20px;
  cursor:pointer;    
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<ul class="p-2 text-center w-20em" aria-labelledby="userDropdown">
    <li>
        <img src="~/images/user.png" class="rounded-circle img-fluid p-3 w-50">
        <p>
            Someone's Name
        </p>
    </li>
    <li>
        <!-- Here's the link code -->
        <div class="row">
            <div class="col-md-6 mb-3">
                <a class="btn-gold" asp-page="/Password/Edit">Change</a>
            </div>
            <div class="col-md-6 mb-3">
                <a class="btn-gold" asp-page="/Auth/Logout">Logout</a>
            </div>
        </div>
    </li>
</ul>

Upvotes: 1

Related Questions