Hey everyone. This one has me stuck.
I need the ability to center an image (1598px wide) in a DIV at 100% width and overflow is Hidden.
I cannot use the background-url CSS with background-position CSS and background-repeat CSS as I have in the past. The reason why is because I will be replacing the img with a slideshow. I need the slideshow fill the whole screen like a background would. Here is an example
This is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body bgcolor="#090000" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0">
<div class="slide"><img src="images/sampleslide.jpg" width="1598" height="433" /></div>
Its so close! I have it 100% so the image takes up the whole screen, I have the overflow hidden so there will be no left and right scrolling for monitors smaller then 1598pixels (width of image) but I need the hidden overflow to be equal on the left and right side making the image centered.
I hope someone can crack this one. I searched for a long time and maybe I'm not searching the right keywords but I can't get the answer.
Thank you in advance!