Two images in header

[Scott]

Hi guys,

I have two images in my header, I want the right image to be random and crop from the right as the page shrinks, kinda like on here, any ideas how to achive this?

Code: Select all

div#header {
   height: 111px; 
   background: #fff;
}

div#hleft_image {
    width:140px;
}

div#hleft_image h1 a {
     background:  url(uploads/images/home_002a.jpg) no-repeat 3px 3px; 
     display: block;
     height: 111px;
     text-indent: -700em;
     margin: 0;
     padding: 0;
     text-decoration:none;
}

div#hright_image {
         position: absolute;
         left: 150px;
         right:3px;
         top:3px;
}

Code: Select all

<div id="header">
           <div id="hleft_image">
                  <h1>{cms_selflink dir="start"}</h1>
           </div>
           <div id="hright_image">
                         {random_image folder="images/header/" height="108px"}
           </div>
   <hr class="accessibility" />
   </div>

[Scott]

I'm only having trouble now with ie firefox is fine when I set overflow hidden.

[Leav]

just have the left image as the background of the box/table or whatever and have the right image in an tag so it is an element.
align it to the right and your done...
-Leav

[Dr.CSS]

Try setting header position:relative