Feature Slider - Full size image

[petegarnish 0]

I'd like to fill the entire feature box with an image, have had a crack at editing the pro.css but I cant seem to get it right. page is here http://www.productionvideo.com.au/index.php Here's the css in question: /* @ FEATURES */ #feature{ margin: 0 0 1em; background: #000 url(../../images/post-bg.gif) repeat-x 0 0 ; height: 300px; position:relative; z-index:0; border:1px solid #333; overflow: hidden; } #feature .thefeature { height: 300px; width: 960px; } .fcontent, .fmedia { } .fcontent { margin-top: 65px; padding: 10px 30px; clear: none; text-shadow: #555 0 0 10px; width: 265px; float: left; } #highlight .fcontent{ margin-top: 20px; } .fcontent h1, .fcontent h2, .fcontent h3, .fcontent h4, .fcontent h5, .fcontent h6{ color:#fff; text-align: left; line-height: 1em; } .fcontent .fheading { margin-top: 1em; margin-bottom: 1.5em; } .fcontent .ftitle{ letter-spacing:-1px; font-size: 40px; } .fcontent .fsub { font-size: 18px; color: #999; } .fcontent p{ text-align: left; font-size: 13px; } .fcontent a { } #feature a.featurelink{ border: none; line-height: 20px; background:transparent url(../../images/morearrow.gif) no-repeat scroll 100% 60%; padding-right:10px; color: #fff; } .featurelink:hover{color:#ccc;} .fmedia { padding: 0; overflow:hidden; float: right; } #feature .fmedia{ text-align: left; float: right; width: 613px; height: 300px; overflow: hidden; padding: 0 0 0 0; } .fmedia img { top: 0; left: 0; } #highlight { position: relative; background: transparent url(../../images/bghighlight.png) repeat-x bottom left; border-right: 1px solid #111; border-top: 1px solid #111; border-left: 1px solid #111; } #highlight .ftitle{margin-bottom: .8em;font-size: 30px;} #highlight .fcontent { float: left; width: 300px; padding: 50px; } #highlight .fmedia { overflow:hidden; float:right; margin:20px 10px; width:520px; } By the way I've removed the feature navigation, if something looks missing Thanks

[petegarnish 0]

by the way, you'll see above that I have changed the height of the Feature area to 300pixels, I've uploaded feature 1 slide graphic which is 960x300, the other slides are just the default ones.

[bryan-hadaway 3]

Let's get a link. Thanks, Bryan

[petegarnish 0]

Link is in the first post productionvideo.com.au/index.php

[bryan-hadaway 3]

Ah, sorry... fixed it. Okay, can you undo the CSS you've added/changed for the feature so I can test from it's default and get you on track? Thanks, Bryan

[petegarnish 0]

Done, Thanks

[bryan-hadaway 3]

Something is wrong, were the images always pushed down like that? Perhaps you're using a caching plugin? Thanks, Bryan

[bryan-hadaway 3]

Okay, I see it correctly now, one moment...

[bryan-hadaway 3]

` body #feature{height:300px} body .fmedia img{ margin-left:-325px; position:absolute} ` Add just that to Custom Code > Custom CSS and let me know if it needs more work. Thanks, Bryan

[petegarnish 0]

No joy, it covers up the feature text

[petegarnish 0]

okay so i pasted the code above and the image was way off to the left. I've removed margin-left:-325px; from above and the image is fine, but the text doesn't show

[bryan-hadaway 3]

Right, so then you'd also want to make the text float. If you aren't using Firebug yet, see: http://www.pagelines.com/docs/changing-colors-fonts It will be extremely helpful in testing what you want to do before ultimately making the changes in Custom CSS. You'll want adjust the height and also make sure when you add images they're ultimately the right width an height. Thanks, Bryan

[petegarnish 0]

Thanks Bryan, I have firebug - just not sure what to change.

[petegarnish 0]

It seems to have been implemented here (from another post) http://shaznyc.com/reviews/

[petegarnish 0]

Another way around this I thought would be to place the image in as a background image, using the css background shorthand field in the feature setup. This way both the image and the text should show up as the image should be behind the text. I have tried this but I doesn't want to work for me either Here's the CSS shorthand I placed in there: body {background-image:url('http://productionvideo.com.au/images/feature_test.jpg');} Any ideas would be very welcome, thanks.