Background image with hover

[system]

Strange. I’ve changed the link so try this one now.

Sigh, I tried your second link didn’t work. I recall a time this worked now I can’t explain why it doesn’t work.

To centre a static block element horizontally you give it a width and use auto side margins.

You can’t automatically center a block element vertically though. Usually you would just apply a margin-top to move it into position (assuming margin-collapse isn’t an issue).

#videos li a {
display:block;
}

I tried {vertical-align:middle} and margin top, which moved the #videos li style.

[system]

Strange. I’ve changed the link so try this one now.

Sigh, I tried your second link didn’t work. I recall a time this worked now I can’t explain why it doesn’t work.

To centre a static block element horizontally you give it a width and use auto side margins.

You can’t automatically center a block element vertically though. Usually you would just apply a margin-top to move it into position (assuming margin-collapse isn’t an issue).

#videos li a {
display:block;
}

I tried {vertical-align:middle} and margin top, which moved the #videos li style.

[PaulOB]

@SiberianHuskey

Sigh, I tried your second link didn’t work. I recall a time this worked now I can’t explain why it doesn’t work.

Yes, there’s something odd going on there as it works for a while and then it seems to just link back to the home page. It’s working at the moment which maybe because I’ve logged in again but its also working from another computer. You’ll just have to be quick before it goes again.

I tried {vertical-align:middle} and margin top, which moved the #videos li style.

Vertical-align only applies to inline elements on the same single line (and table-cells). It will not vertically center block elements unfortunately.

Horizontal centering needs a width on the block element and auto margins.

[system]

Yes, there’s something odd going on there as it works for a while and then it seems to just link back to the home page. It’s working at the moment which maybe because I’ve logged in again but its also working from another computer. You’ll just have to be quick before it goes again.

How Quick ? It’s not working again.

Horizontal centering needs a width on the block element and auto margins.

I want to scale, horizontally and position, vertically so I would get more of the graphic border showing though is that possible ?

[PaulOB]

Hi,

Let me rephrase the question to check if we are talking about the same things and in a language I can understand.

You have this background image here which is 150px x 95px and you want to place it behind [URL=“http://www.thecreativesheep.ca/construction/images/bottleopener_video.png”]this image as though to frame it?

If that is correct then why have you resized this image to be exactly the same size as [URL=“http://www.thecreativesheep.ca/construction/images/3dmoticon.jpg”]this image.

Both are 150px x 95px so placing one image in the background isn’t going to work because the other image will just set on top and hide it.

You need to either make the background image bigger or resize the foreground image smaller.

If for example you resized the foreground image to about 123px x 75px then that would allow the frame to be visible around the image. Just add padding to the anchor to preserve the background space. There is no need for vertical alignment at all and that just seems to be a red herring you through into the mix.

The original question would merely seem to be that you want a background image placed around that video image.

Here is the code to do just that.

Changes are in bold:

#videos li {
    float: left;
    display:block;
[B]    margin: 2px 0 0 0;[/B]
}
#videos a img {
   [B] /*    margin-top: 32px;*/[/B]
    border:none;
 [B]   /*vertical-align:bottom;*/[/B]
}
#videos li a {
    display:block;
   [B] padding:10px 13px;[/B]
}
#videos li a:hover {
    background:url('http://www.thecreativesheep.ca/construction/images/3dmoticon.jpg') [B]0 0 no-repeat;[/B]
}

    <ul id="videos">
                <li> <a class="video_link" title="Caf&#65533; Tour" name="videos/truck.flv" href="http://www.sitepoint.com/forums/images/tour_video.png" rel="gallery"> <img [B]height="75" width="123" [/B]alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"> </a> </li>


etc.... 

The only change in the html was to change the width and height of the image. You should change all the other image sizes for all those other images in that list also to match the above.

This is the full working example that I made locally.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" href="/construction/css/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/fadeinsequence.js"></script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery.flip.min.js"></script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery.flip.js"></script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/flowplayer-3.1.1.min.js"></script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/construction/fancyplayer.js"></script>
<script type="text/javascript">
var videopath = "http://www.thecreativesheep.ca/construction/";
var swfplayer = videopath + "videos/flowplayer-3.1.5.swf";
var swfcontent = videopath + "videos/flowplayer.content-3.1.0.swf";
var swfcaptions = videopath + "videos/flowplayer.captions-3.1.4.swf";
</script>
<script type='text/javascript'>
$(document).ready(function() {
    $("#services_content li,#Serv p").hide().fadeInSequence(2000);
});
</script>
<script type="text/javascript">
jQuery(function ($)
{
    $("#nav").each(function()
    {
        $("a", this).click(function()
        {
            if (this.hash)
            {
                $("#content").children().hide();
                $(this.hash).show();
                var pic = $(".pic",this.hash).html();
                var sil = $("#silhouette");
                sil.animate(
                    {height:"hide"},
                    {duration: 1000, easing: "easeInBounce"});
                    if (pic) {
                setTimeout(function ()
                {
                    sil.html(pic).animate(
                        {height: "show"},
                        {duration: 1500, easing: "easeOutBounce"});
                    }, 1200);
                }
                return false; 
            }
        });
        $("a:eq(2)", this).click();
    });
});


</script>
<style type="text/css">
html, body {
    height: 100%;
}
div#fancy_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #666;
    display: none;
    z-index: 30;
}
* html div#fancy_overlay {
    position: absolute;
 height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
div#fancy_wrap {
    text-align: left;
}
div#fancy_loading {
    position: absolute;
    height: 40px;
    width: 40px;
    cursor: pointer;
    display: none;
    overflow: hidden;
    background: transparent;
    z-index: 100;
}
div#fancy_loading div {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 480px;
    background: transparent url('http://www.thecreativesheep.ca/construction/images/fancy_progress.png') no-repeat;
}
div#fancy_loading_overlay {
    position: absolute;
    background-color: #FFF;
    z-index: 30;
}
div#fancy_loading_icon {
    position: absolute;
    background: url('http://www.thecreativesheep.ca/construction/images/fancy_loading.gif') no-repeat;
    z-index: 35;
    width: 16px;
    height: 16px;
}
div#fancy_outer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    padding: 18px 18px 33px 18px;
    margin: 0;
    overflow: hidden;
    background: transparent;
    display: none;
}
div#fancy_inner {
    position: relative;
    width:100%;
    height:100%;
    border: none;
    background: #FFF;
}
div#fancy_content {
    margin: 0;
    z-index: 100;
    position: absolute;
}
div#fancy_div {
    /* Set a background image for the div where the player will be loaded. Optional.*/
    background: url('http://www.thecreativesheep.ca/construction/images/video_bg.png') no-repeat;
    color: #FFF;
    height: 100%;
    width: 100%;
    z-index: 100;
}
img#fancy_img {
    position: absolute;
    top: 0;
    left: 0;
    border:0;
    padding: 0;
    margin: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
}
div#fancy_close {
    position: absolute;
    top: -12px;
    right: -15px;
    height: 30px;
    width: 30px;
    background: url('http://www.thecreativesheep.ca/construction/images/fancy_closebox.png') top left no-repeat;
    cursor: pointer;
    z-index: 181;
    display: none;
}
#fancy_frame {
    position: relative;
    width: 100%;
    height: 100%;
    display: none;
}
#fancy_ajax {
    width: 100%;
    height: 100%;
    overflow: auto;
}
a#fancy_left, a#fancy_right {
    position: absolute;
    bottom: 0px;
    height: 100%;
    width: 35%;
    cursor: pointer;
    z-index: 111;
    display: none;
    background-image: url(data:image/gif;base64,AAAA);
    outline: none;
}
a#fancy_left {
    left: 0px;
}
a#fancy_right {
    right: 0px;
}
span.fancy_ico {
    position: absolute;
    top: 50%;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    z-index: 112;
    cursor: pointer;
    display: block;
}
span#fancy_left_ico {
    left: -9999px;
    background: transparent url('http://www.thecreativesheep.ca/construction/images/fancy_left.png') no-repeat;
    z-index:9999;
}
span#fancy_right_ico {
    right: -9999px;
    background: transparent url('http://www.thecreativesheep.ca/construction/images/fancy_right.png') no-repeat;
    z-index:9999;
}
a#fancy_left:hover {
    visibility: visible;
}
a#fancy_right:hover {
    visibility: visible;
}
a#fancy_left:hover span {
    left: 20px;
}
a#fancy_right:hover span {
    right: 20px;
}
.fancy_bigIframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}
div#fancy_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 70;
    border: 0;
    padding: 0;
    margin: 0;
}
div.fancy_bg {
    position: absolute;
    display: block;
    z-index: 70;
    border: 0;
    padding: 0;
    margin: 0;
}
div.fancy_bg_n {
    top: -18px;
    width: 100%;
    height: 18px;
    background: transparent url('http://www.thecreativesheep.ca/construction/images/fancy_shadow_n.png') repeat-x;
}
div.fancy_bg_ne {
    top: -18px;
    right: -13px;
    width: 13px;
    height: 18px;
    background: transparent url('http://www.thecreativesheep.ca/construction/images/fancy_shadow_ne.png') no-repeat;
}
div.fancy_bg_e {
    right: -13px;
    height: 100%;
    width: 13px;
    background: transparent url('http://www.thecreativesheep.ca/construction/images/fancy_shadow_e.png') repeat-y;
}
div.fancy_bg_se {
    bottom: -18px;
    right: -13px;
    width: 13px;
    height: 18px;
    background: transparent url('http://www.thecreativesheep.ca/construction/images/fancy_shadow_se.png') no-repeat;
}
div.fancy_bg_s {
    bottom: -18px;
    width: 100%;
    height: 18px;
    background: transparent url('http://www.thecreativesheep.ca/construction/images/fancy_shadow_s.png') repeat-x;
}
div.fancy_bg_sw {
    bottom: -18px;
    left: -13px;
    width: 13px;
    height: 18px;
    background: transparent url('http://www.thecreativesheep.ca/construction/images/fancy_shadow_sw.png') no-repeat;
}
div.fancy_bg_w {
    left: -13px;
    height: 100%;
    width: 13px;
    background: transparent url('http://www.thecreativesheep.ca/construction/images/fancy_shadow_w.png') repeat-y;
}
div.fancy_bg_nw {
    top: -18px;
    left: -13px;
    width: 13px;
    height: 18px;
    background: transparent url('http://www.thecreativesheep.ca/construction/images/fancy_shadow_nw.png') no-repeat;
}
div#fancy_title {
    position: absolute;
    bottom: -33px;
    left: 0;
    width: 100%;
    z-index: 100;
    display: none;
}
div#fancy_title div {
    color: #FFF;
    font: bold 12px Arial;
    padding-bottom: 3px;
}
div#fancy_title table {
    margin: 0 auto;
}
div#fancy_title table td {
    padding: 0;
    vertical-align: middle;
}
td#fancy_title_left {
    height: 32px;
    width: 15px;
    background: transparent url('http://www.thecreativesheep.ca/construction/images/fancy_title_left.png') repeat-x;
}
td#fancy_title_main {
    height: 32px;
    background: transparent url('http://www.thecreativesheep.ca/construction/images/fancy_title_main.png') repeat-x;
}
td#fancy_title_right {
    height: 32px;
    width: 15px;
    background: transparent url('http://www.thecreativesheep.ca/construction/images/fancy_title_right.png') repeat-x;
}
html, body {
    height:100%;/*reference for #wrapper min-height:100%*/
}
body {
    margin:0;
    padding:0;
    background:#555;
    font:100%/1.3 arial, helvetica, sans-serif;
    color:#000;
}
h1 {
    margin:0;
    font-size:1.6em;
    text-align:center;
}
h2 {
    margin:10px 10px 0;
    font-size:1.3em;
}
p {
    margin:10px;
}
#videos a img {
    /*    margin-top: 32px;*/
    border:none;/*vertical-align:bottom;*/
}
#gallery a img {
    margin-top: 32px;
    border:none;
}
/*=== Float Containment and Bug Fixes ===*/
body:before {/*Opera min-height 100% fix*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/*eliminate need for inner non clearing element*/
}
#wrapper:after,  /*#wrapper:after for IE8 min-height:100% Fix*/ #content:after { /*#content:after for Float Containment*/
    clear:both;
    content:"";
    display:block;
    height:1%;/*fix IE8 min-height:100% bug*/
    font-size:0;
}
/*===  Beginning of Layout Structure ===*/
#wrapper { /*do not set overflow:hidden; here, Opera will not comply*/
    width:1160px;
    min-height:100%;
    overflow: hidden;
    margin:0 auto;
    background:#000000;/*BG color for #content*/
    position: relative;
}
#header {
    /*position:relative;/*establish containing block for AP children (#nav)*/
    min-height:120px;/*152px total w/ padding*/
    position:relative;
    background: #FFFFFF;
    padding:2px 0 12px;/*preserve space for #nav and uncollapse child margins*/
    background:#AAA;
    min-width:1160px;
    border-width: medium;
}
.logo {
    background: #008080;
    width: 400px;
    position:absolute;
    height: 109px;
    margin: 6px 25px 0 40px;
}
.partwo {
    background: #FFFF00;
    margin: 20px 0 34px 260px;
    width: 65px;
    height: 50px;
}
/*-- Menu Styles --*/
ul#nav, #nav ul { /*group together for shared styles*/
    display:table; /*webkit fix*/
    margin:-16px 0 0;/*pull up into header div*/
    padding:0;/*remove the defaults*/
    list-style:none outside none;
    white-space:nowrap; /*stop child LI from wrapping*/
    word-spacing:-1em;
}
#nav {
    height: 15px;
    width: 250px;
    color: #0000FF;
}
#nav li {
    position:relative;/*sub UL containing block*/
    display:inline-block;
    vertical-align:top;
    word-spacing:0;/*reset from UL*/
}
* html #nav li {
    display:inline;
} /*IE6*/
*+html #nav li {
    display:inline;
} /*IE7*/
#nav a {
    display:block; /*set dimensions (Only Opera chokes on a min-width float, go figure!)*/
    min-width:95px;/*135px with padding*/
    height:15px;
    margin:0 2px 0 0;/*optional margins*/
    padding:0 15px 0 0;
    color:#FFF;
    font:bold 12px/15px arial;
    text-decoration:none;
    background:#000;
}
* html #nav a {
    width:105px
}/*IE6 min-width*/
#nav a:active, #nav a:focus, #nav a:hover {
    color:#BDF;
    background:#333;
}
#nav ul {
    position:absolute;/*remove from page flow*/
    left:0;
    top:100%;
    margin:0 0 0 -999em;
}
#intro {
    width: 576px;
    height: 408px;
    background: #ff8000;
    margin: 14px 0 0 20px;
}
#nav li:hover ul {
    margin-left:0;
}
/*-- Content Styles --*/
#content {
    width:100%;/*IE6/7 haslayout for future float containment*/
    padding-bottom:80px;/*set a bottom padding to preserve the footer*/
    background:#000000;/*same as #wrapper or none at all*/
    min-height:500px;
}
#content p {
    margin:40px 10px;
}
/*-- Footer Styles --*/
#footer {
    position:fixed;
    width:100%;
    left:0;
    bottom:0;
    height:80px;
    background: #CCC;
}
#gears {
    position: absolute;
    bottom: 34px;
    background: #800000;
    width: 250px;
    height: 112px;
    float: left;
}
.innerfoot {
    width:1120px;
    height:80px;
    margin:0 auto;
    overflow:hidden;/*uncollapse child margins*/
    background:#AAA;
    text-align:center;
}
#silhouette {
    position: fixed;
    margin-left:50px;
    bottom:80px;
    width: 150px;
    height: 285px;/*background: #FF0000;*/
}
#intro img {
    position: relative;
    left: 560px;
    top: 2px;
}
#Serv {
    position: relative;
    background:url('http://www.thecreativesheep.ca/construction/images/bg_services.jpg') repeat-x;
    overflow: hidden;
    padding: 78px 0 90px 268px;
}
.services_info {
    font-size: 24px;
    color: white;
}
#Contact {
    background: #C0C0C0;
    overflow: hidden;
    width: 650px;
    margin: 40px 35px 0 300px;
}
#Serv h1, #Contact h1, #Illus_3D h1, #ThreeDMot h1, #DemoR h1 {
    position: absolute;
    right:24px;
    top:415px;
    color: #FFFFFF;
}
#Contact h1 {
    right:120px;
    top:480px
}
#Illus_3D h1 {
    right:100px;
    top:475px
}
#ThreeDMot h1 {
    right:40px;
    top:480px
}
#DemoR h1 {
    right:40px;
    top:480px
}
#Contact p {
    color: #FFFFFF;
}
#Contact name {
    background: #00FF00;
    font: helvetica;
}
#services_content, p {
    height: 4em;
    font-size: 24px;
    color: white;
}
#contactForm {
    height: 150px;
    width: 250px;
}
#gallery {
    overflow: hidden;
    margin: 30px 0 0 0px;
    padding:0;
    list-style: none;
}
#gallery li a {
background:yellow display:block;
}
.pic {
    display:none;
}
#gallery li {
    display: block;
    float:left;
    margin: 0 0 0 20px;
}
#videos li {
    float: left;
    display:block;
    margin: 2px 0 0 0;
}
#videos a img {
    /*    margin-top: 32px;*/
    border:none;
    /*vertical-align:bottom;*/
}
#videos li a {
    display:block;
    padding:10px 13px;
}
#videos li a:hover {
    background:url('http://www.thecreativesheep.ca/construction/images/3dmoticon.jpg') 0 0 no-repeat;
}
#videos {
    overflow:hidden;
    margin:17px 0 0 220px;
    padding:0;
    list-style:none;
}
#ThreeDMot {
    min-height:0; /*hasLayout Property*/
    /*margin: 0 0 0 220px;*/
    background:url('http://www.thecreativesheep.ca/construction/images/bg_3dmot.jpg') repeat-x;
    background-position: 24%;
}
#Illus_3D {
    min-height:0; /*hasLayout Property*/
    padding: 2px 0 0 220px;
    background:url('http://www.thecreativesheep.ca/construction/images/bg_gallery.jpg') repeat-x;
    position:relative;
}
#DemoR {
    margin:17px 0 0 350px;
    overflow:hidden;
}
#DemoR a img {
    margin-top: 32px;
    border:none;
}
#header, ul#nav {
    position:relative;
    z-index:1;
}
</style>
<!--[if IE 6]>
<style type="text/css">
html {background:#555 url(foo) fixed;}/*fix jitters when using expression (no need for a fake image http request)*/
#wrapper{height:100%;}/*min-height for IE6*/
#footer{/*fixed footer for IE6 using expression*/
    position:absolute;
    top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}
</style>
<![endif]-->
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-21454093-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head>
<body>
<div id="header">
    <div class="logo">
        <div class="partwo"></div>
    </div>
</div>
<ul id="nav">
    <li><a href="#intro">Main {Portfolio}</a>
        <ul class="drop">
            <li><a href="#Illus_3D">Illustrations &amp; 3D Stills</a></li>
            <li><a href="#ThreeDMot">3D Motion</a></li>
            <li><a href="#DemoR">Demo Reel</a></li>
            <!--<li><a href="#">Ready Link</a></li>-->
        </ul>
    </li>
    <li><a href="#Serv">Services</a></li>
    <li><a href="http://www.someone.com">Bio3Design</a></li>
    <li><a href="#Contact">Contact</a></li>
</ul>
<div id="wrapper">
    <div id="content">
        <div id="intro"><img src="http://www.thecreativesheep.ca/construction/block.jpg" alt="LogoGraphic" /></div>
        <div id="Serv">
            <!--Beginning of Service ID -->
            <span class="services_info">The Creative Sheep offers the following design services:</span>
            <ul id="services_content">
                <li>Character Design</li>
                <li>Animation</li>
                <li>Logo Design & more...</li>
            </ul>
            <p><a href="#Contact">Contact</a> for more info!</p>
            <h1>Services</h1>
        </div>
        <!-- end of Service ID -->
        <div id="Contact">
            <h1>Contact</h1>
        </div>
        <div id="Illus_3D">
            <ul id="gallery">
                <li> <a class="video_link" title="Image A" name="" href="http://www.sitepoint.com/forums/images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"> </a> </li>
                <li> <a class="video_link" title="Image A" name="" href="http://www.sitepoint.com/forums/images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"> </a> </li>
                <li> <a class="video_link" title="Image A" name="" href="http://www.sitepoint.com/forums/images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"> </a> </li>
                <li> <a class="video_link" title="Image A" name="" href="http://www.sitepoint.com/forums/images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"> </a> </li>
                <li> <a class="video_link" title="Image A" name="" href="http://www.sitepoint.com/forums/images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"> </a> </li>
                <li> <a class="video_link" title="Image A" name="" href="http://www.sitepoint.com/forums/images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"> </a> </li>
                <li> <a class="video_link" title="Image A" name="" href="http://www.sitepoint.com/forums/images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"> </a> </li>
                <li> <a class="video_link" title="Image A" name="" href="http://www.sitepoint.com/forums/images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"> </a> </li>
                <li> <a class="video_link" title="Image A" name="" href="http://www.sitepoint.com/forums/images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"> </a> </li>
                <li> <a class="video_link" title="Image A" name="" href="http://www.sitepoint.com/forums/images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"> </a> </li>
                <li> <a class="video_link" title="Image A" name="" href="http://www.sitepoint.com/forums/images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"> </a> </li>
                <li> <a class="video_link" title="Image A" name="" href="http://www.sitepoint.com/forums/images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"> </a> </li>
            </ul>
            <div class="pic"><img src="http://www.thecreativesheep.ca/construction/img/one.jpg" alt="one" width="150" height="250" /></div>
            <h1>Illustrations & 3D Stills</h1>
        </div>
        <div id="ThreeDMot">
            <ul id="videos">
                <li> <a class="video_link" title="Caf&#65533; Tour" name="videos/truck.flv" href="http://www.sitepoint.com/forums/images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"> </a> </li>
                <li> <a class="video_link" title="Gorilla" name="videos/gorilla.flv" href="http://www.sitepoint.com/forums/images/gorilla_video.png" rel="gallery"> <img height="75" width="123" alt="gorilla" src="http://www.thecreativesheep.ca/construction/images/gorilla_video.png"> </a> </li>
                <li> <a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="http://www.sitepoint.com/forums/images/bottleopener_video.png" rel="gallery"> <img height="75" width="123" alt="bottleopener" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"> </a> </li>
                <li> <a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="http://www.sitepoint.com/forums/images/bottleopener_video.png" rel="gallery"> <img height="75" width="123" alt="bottleopener" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"> </a> </li>
                <li> <a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="http://www.sitepoint.com/forums/images/bottleopener_video.png" rel="gallery"> <img height="75" width="123" alt="bottleopener" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"> </a> </li>
                <li> <a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="http://www.sitepoint.com/forums/images/bottleopener_video.png" rel="gallery"> <img height="75" width="123" alt="bottleopener" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"> </a> </li>
                <li> <a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="http://www.sitepoint.com/forums/images/bottleopener_video.png" rel="gallery"> <img height="75" width="123" alt="bottleopener" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"> </a> </li>
                <li> <a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="http://www.sitepoint.com/forums/images/bottleopener_video.png" rel="gallery"> <img height="75" width="123" alt="bottleopener" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"> </a> </li>
                <li> <a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="http://www.sitepoint.com/forums/images/bottleopener_video.png" rel="gallery"> <img height="75" width="123" alt="bottleopener" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"> </a> </li>
                <li> <a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="http://www.sitepoint.com/forums/images/bottleopener_video.png" rel="gallery"> <img height="75" width="123" alt="bottleopener" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"> </a> </li>
                <li> <a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="http://www.sitepoint.com/forums/images/bottleopener_video.png" rel="gallery"> <img height="75" width="123" alt="bottleopener" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"> </a> </li>
                <li> <a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="http://www.sitepoint.com/forums/images/bottleopener_video.png" rel="gallery"> <img height="75" width="123" alt="bottleopener" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"> </a> </li>
            </ul>
            <div class="pic"><img src="http://www.thecreativesheep.ca/construction/img/two.jpg" alt="one" width="150" height="250" /></div>
            <h1>3D Motion</h1>
        </div>
        <div id="DemoR"> <a class="video_link" title="Place Holder" name="videos/bottleopener.mp4" href="http://www.sitepoint.com/forums/images/bottleopener_video.png" rel="gallery"> <img height="260" width="525" alt="Place Holder" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"> </a>
            <div class="pic"><img src="http://www.thecreativesheep.ca/construction/img/two.jpg" alt="one" width="150" height="250" /></div>
            <h1>Demo Reel</h1>
        </div>
    </div>
    <div id="silhouette"></div>
</div>
<!-- end wrapper -->
<div id="footer">
    <div id="gears"></div>
</div>
</div>
</body>
</html>

[system]

Hi, Paul. That solved it, well that and the background:hover having some positioning. FireBug displays the block size as 123x107, I design the image in those dimensions but if I don’t have background-positioning on the a:hover it will be too big. One mistake I do admit to not doing was resizing the image in the HTML code

The background image on #ThreeDMot I want to position vertically but adding vertical positioning to the background image does not move it.

[PaulOB]

@SiberianHuskey

The background image on #ThreeDMot I want to position vertically but adding vertical positioning to the background image does not move it.

#ThreeDmot is only as tall as the content it holds and the background will only show within the dimensions that the element occupies. Therefore it is already being vertically centered within those videos because that’s all the space there is for it to show.

If you want #threeDmot to be taller then you owuld need to give it some sort of minimum height.

#ThreeDMot {
  background: url("http://www.thecreativesheep.ca/construction/images/bg_3dmot.jpg") repeat-x scroll 50% 50% ;
  [B]min-height: 450px;[/B]
}