Background image not showing

I'm creating a new widget for our portal; however, the background image i added for the div element isn't showing, I could use some help.

This is the widget's code:

Code:

<style>
div#mainstuff {
background-image: url("http://i.imgur.com/8b0qUns.png");
background-repeat: repeat;
}

.firstrow{
float: left;
padding-left: 30px;
}
.secondrow{
float:left;
padding-left: 30px;
}
.thirdrow{
float: left;
padding-left: 30px;
}
.fourthrow{
float: left;
padding-left: 30px;
}

#imgscale {
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: 1s;
}
#imgscale:hover{
-ms-transform: scale(1.1,1.1); /* IE 9 */
-webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */
transform: scale(1.1,1.1);
}
</style>
<div id="mainstuff">
          
    <div class="firstrow">
              
        <div class="firstrowimage">
               <a href="http://www.duelacademy.net/f134-pro-decklists"><img id="imgscale" src="http://i.imgur.com/5vTc3sp.png" /></a>   
            <p class="fristrowparg">
                    This is some text here   
            </p>
                  
        </div>
              
    </div>
          
    <div class="secondrow">
              
        <div class="secondrowimage">
               <a href="http://www.duelacademy.net/h9-da-guide"><img id="imgscale" src="http://i.imgur.com/JBdFdTy.png" /></a>   
            <p class="secondrowparg">
                    This is some text here 2   
            </p>
                  
        </div>
              
    </div>
          
    <div class="thirdrow">
              
        <div class="thirdrowimage">
               <a href="http://www.duelacademy.net/f4-introductions"><img id="imgscale" src="http://i.imgur.com/5dPyeNR.png" /></a>   
            <p class="thirdrowparg">
                    This is some text here 3   
            </p>
                  
        </div>
              
    </div>
          
    <div class="fourthrow">
              
        <div class="fouthrowimage">
               <a href="http://www.duelacademy.net/h7-tournaments-schedule"><img id="imgscale" src="http://i.imgur.com/EkCgpFP.png" /></a>   
            <p class="fourthrowparg">
                    This is some text 4   
            </p>
                  
        </div>
              
    </div>
</div>

Hello Anzo,
Could you please provide a link to your portal so we can see the widget. Also, I do not think you need "div" in front of the #mainstuff. So try using the following code and see what happens.

Code:

<style>
#mainstuff {
background-image: url("http://i.imgur.com/8b0qUns.png");
background-repeat: repeat;
}

.firstrow{
float: left;
padding-left: 30px;
}
.secondrow{
float:left;
padding-left: 30px;
}
.thirdrow{
float: left;
padding-left: 30px;
}
.fourthrow{
float: left;
padding-left: 30px;
}

#imgscale {
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: 1s;
}
#imgscale:hover{
-ms-transform: scale(1.1,1.1); /* IE 9 */
-webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */
transform: scale(1.1,1.1);
}
</style>
<div id="mainstuff">
           
    <div class="firstrow">
               
        <div class="firstrowimage">
               <a href="http://www.duelacademy.net/f134-pro-decklists"><img id="imgscale" src="http://i.imgur.com/5vTc3sp.png" /></a>    
            <p class="fristrowparg">
                    This is some text here    
            </p>
                   
        </div>
               
    </div>
           
    <div class="secondrow">
               
        <div class="secondrowimage">
               <a href="http://www.duelacademy.net/h9-da-guide"><img id="imgscale" src="http://i.imgur.com/JBdFdTy.png" /></a>    
            <p class="secondrowparg">
                    This is some text here 2    
            </p>
                   
        </div>
               
    </div>
           
    <div class="thirdrow">
               
        <div class="thirdrowimage">
               <a href="http://www.duelacademy.net/f4-introductions"><img id="imgscale" src="http://i.imgur.com/5dPyeNR.png" /></a>    
            <p class="thirdrowparg">
                    This is some text here 3    
            </p>
                   
        </div>
               
    </div>
           
    <div class="fourthrow">
               
        <div class="fouthrowimage">
               <a href="http://www.duelacademy.net/h7-tournaments-schedule"><img id="imgscale" src="http://i.imgur.com/EkCgpFP.png" /></a>    
            <p class="fourthrowparg">
                    This is some text 4    
            </p>
                   
        </div>
               
    </div>
</div>

I didn't work.

Also, I'm not testing live on the portal, I'm testing on a second portal. So not sure whether this link can actually works on your side or not: http://www.duelacademy.net/?pid=3

Hello Anzo,

You're floating your child elements. When doing this their dimensions isn't taken into account by the parent. You must hide the overflow on the parent, so it takes the floated element dimensions( height ) into account.

Code:

#mainstuff { overflow:hidden }

Oh, I see!

That worked. Thanks, again