Background image not showing
3 posters
Page 1 of 1
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:
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>
Re: Background image not showing
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.
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>
Guest- Guest
Re: Background image not showing
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
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
Re: Background image not showing
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.
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 }
Re: Background image not showing
Topic solved and archived
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum