The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Background image not showing

View previous topic View next topic Go down

Solved Background image not showing

Post by Anzo on September 29th 2014, 5:47 pm

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
Forumember

Posts : 303
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Background image not showing

Post by Jadster on September 29th 2014, 6:08 pm

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>

Jadster
Forumember

Male Posts : 659
Reputation : 78
Language : English
Location : United States

http://adminvortex.forumotion.com

Back to top Go down

Solved Re: Background image not showing

Post by Anzo on September 29th 2014, 6:11 pm

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
Forumember

Posts : 303
Reputation : 6
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 on September 29th 2014, 6:55 pm

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
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Background image not showing

Post by Anzo on September 29th 2014, 7:40 pm

Oh, I see!

That worked. Thanks, again Smile

Anzo
Forumember

Posts : 303
Reputation : 6
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 on September 29th 2014, 7:49 pm

Topic solved and archived


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


SLGray
Administrator
Administrator

Male Posts : 35659
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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