CODEWITHSUNDEEP
htmlcssbootstrap-4
Anonymousss
Anonymousss

Reputation: 37

How to implement css code over scss code?

This is my design, using google developer tools when I uncheck this scss code(marked) the background image fits in the rounded card.

I want to fit the background image in the card header which has a border-radius: 15px but the background image of the card header is still out. When I go to google developer tools and uncheck the scss code it fits. How do I implement it in my editor so the image-fitted design can be saved?

Here's my code:

.card{
  margin: 125px 500px;
  border-radius: 15px;
}
.card-header{
  border-radius: 15px 15px 0 0;
  height: 120px;
  padding: 0;
  background-image: url("images/bg-pattern-card.svg");
  background-size: cover;
}

Upvotes: 1

Views: 32

Answers (1)

Bart Hofland
Bart Hofland

Reputation: 3905

When trying it out in a JS fiddle and checking out the DOM structure and styling in the browser's HTML inspector, I noticed that Bootstrap also seems to define a CSS rule for .card-header:first-child. If you set/override the border radius for that as well, it might just work. (At least it did in the fiddle.)

.card {
  margin: 125px 500px;
  border-radius: 15px;
}
.card-header,
.card-header:first-child {
  border-radius: 15px 15px 0 0;
}
.card-header {
  height: 120px;
  padding: 0;
  background-image: url("images/bg-pattern-card.svg");
  background-size: cover;
}

Upvotes: 1

Related Questions