To answer my own post. Sheesh CSS is easier than i thought. I add a style sheet with this.
#our-wedding-dashboard {
background: url(https://davidlovescecilia.com/wp-content/uploads/2014/10/pink_heart.png);
background-size: 300px 110px;
background-position: center;
background-repeat: no-repeat;
padding-bottom: 110px;
padding-right: 40px;
padding-left: 40px;
}
.TIE-fighter-weeks_dash {
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
.TIE-fighter-days_dash {
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
.TIE-fighter-hours_dash {
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
.TIE-fighter-minutes_dash {
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
.TIE-fighter-seconds_dash {
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
This gives me a nice background with the counter in the center. If anyone has a better way to do this I would enjoy learning more!
Plugin Author
Baden
(@baden03)
why now wrap it in a div with a class and give that class a background image?
example:
css:
.my_wrapping_class {
background: transparent url('url_to_your_image/your_image.png') 0 0 no-repeat;
}
shortcode:
<div class="my_wrapping_class">[tminus t="+3 minutes"/]</div>
Please let us know if that resolves this issue for you.
