CODEWITHSUNDEEP
htmlcsscss-selectors
Mizlul
Mizlul

Reputation: 2290

contain background size not working

I have the following html declared inside a render() function using Reactjs

 <div className={"companyImages"}>
    <div className={"thubm"} style={{background:'url(https://lumiere-a.akamaihd.net/v1/images/character_mickeymouse_home_mickey_notemplate_3a0db1b2.jpeg?region=0,0,600,600&width=320)'}}></div>
</div>

and my CSS looks as below:

.companyImages div {
  display: inline-block;
  margin:4px;
  width:51px;
  height:51px;
}

.companyImages .thubm {
  border-radius: 3px;
  background-size: contain;
  background-repeat: no-repeat;
}

Current state: only a small part of the image is shown.

Exptected: Whole image resized and fit the div.

Screenshot:

enter image description here

while you can look the image link and see whole image separately in new tab.

Upvotes: 1

Views: 5935

Answers (2)

Ankit Jaiswal
Ankit Jaiswal

Reputation: 274

.companyImages div {
      display: inline-block;
      margin: 4px;
      width: 51px;
      height: 51px;
    }
    .thubm {
        background: url("https://lumiere-a.akamaihd.net/v1/images/character_mickeymouse_home_mickey_notemplate_3a0db1b2.jpeg?region=0,0,600,600&width=320");
        background-repeat: no-repeat;
        background-size: contain;
        border-radius: 3px;
    }
  
     <div class="companyImages">
      <div class="thubm"> </div>
    </div>

Upvotes: 0

Michael W. Czechowski
Michael W. Czechowski

Reputation: 3455

The inline style overrides all your by CSS provided stylings. You have to specify it by background-image.

.companyImages div {
  display: inline-block;
  margin: 4px;
  width: 51px;
  height: 51px;
}

.companyImages .thubm {
  border-radius: 3px;
  background-size: contain;
  background-repeat: no-repeat;
}
<div class="companyImages">
  <div class="thubm" style="background-image: url(https://lumiere-a.akamaihd.net/v1/images/character_mickeymouse_home_mickey_notemplate_3a0db1b2.jpeg?region=0,0,600,600&width=320)"> </div>
</div>

In your case the right react code would look like this:

<div className={"companyImages"}>
    <div className={"thubm"} style={{background-image:'url(https://lumiere-a.akamaihd.net/v1/images/character_mickeymouse_home_mickey_notemplate_3a0db1b2.jpeg?region=0,0,600,600&width=320)'}}></div>
</div>

Explanation:

Your CSS styles include background-size and background-repeat, which will be overwritten by the inline style background.

Further reading:

The property is a shorthand that sets the following properties in a single declaration: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.

stephaniehobson, mfuji09, mfluehr et. al.: background - CSS: Cascading Style Sheets

Upvotes: 8

Related Questions