The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Background image not showing

3 posters

Go down

Solved Background image not showing

Post by Anzo September 29th 2014, 18:47

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>
Anzo
Anzo
Forumember

Posts : 365
Reputation : 8
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Background image not showing

Post by Guest September 29th 2014, 19:08

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>
avatar
Guest
Guest


Back to top Go down

Solved Re: Background image not showing

Post by Anzo September 29th 2014, 19:11

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
Anzo
Anzo
Forumember

Posts : 365
Reputation : 8
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Background image not showing

Post by Ange Tuteur September 29th 2014, 19:55

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 }
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Background image not showing

Post by Anzo September 29th 2014, 20:40

Oh, I see!

That worked. Thanks, again Smile
Anzo
Anzo
Forumember

Posts : 365
Reputation : 8
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Background image not showing

Post by SLGray September 29th 2014, 20:49

Topic solved and archived


Background image not showing Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51463
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum