javascriptcssimage-rendering

NodeJS+Bootstrapp+CSS : home buildup thumbnail gallery add white background to images

I have a container named mainContainer. In this container, I want to create a thumbnails gallery. Unfortunately, when I modify my CSS, I have some issues, I have some white background color instead of the background color for my mainContainer.

Here is the result page : thumbnail gallery with unexpected white background Here is the code of my page. 

<html lang='fr'>
  <head>
    <% include includes/head-global %>
    <% include includes/head-bootstrap %>
  </head>
  <body onload="buildUpPage()">
    <div class = "container mainContainer" id = "mainContainer">
      <div class="row" id="galleryTargets">  <!-- Row : thumbnail          -->
      </div>
  </body>

  <% include tools/thumbnail %>
  <script>
  function buildUpPage() {
    var universData = <%- universData %>
    createThumbnail(universData.targets, "galleryTargets", "/" + univers.name + "/")
  }
  </script>

Express JS code for function createThumbnail :

<script>
  function addOneCaptionToContainer (item, containerDOM, baseImgTargetUrl) {
    var thumbnail = document.createElement("div")
    thumbnail.setAttribute("class", "thumbnail col-xs-4")

    var ref = document.createElement("a")
    ref.setAttribute("href", baseImgTargetUrl + item.name)
    ref.setAttribute("class", "thumbnail")
    thumbnail.appendChild(ref)

    var img =  document.createElement("img")
    img.setAttribute("src", "/"+item.backgroundImage)
    img.setAttribute("class", "imgThumbnails")
    ref.appendChild(img)

    document.getElementById(containerDOM).appendChild(thumbnail)
  }
  function createThumbnail(itemsList, containerDOM, baseImgTargetUrl) {
    for (let u of itemsList) {
      addOneCaptionToContainer(u, containerDOM, baseImgTargetUrl)
    }

  }
</script>

Now the CSS part :

.mainContainer{
 background-color: #A6A4AA;
 } 
.imgThumbnails {
 /*for the thumbnails in the gallery */
  margin: 0px;
  border-style:solid;
  border-width: medium;
  border-color: #2C3756;  
  border-radius: 10px;
 }

I will appreciate an explanation. What must I do to remove these white background colors ?

The inheritance seems to cause problems : see Properties not taken into account

Solution

  • You have to remove the padding otherwise there will be empty space if you make the background-color transparent. 

    .thumbnail{
   padding: 0;
 }