|
HTML - Help! Background Image Is Not Displaying In *any* Browsers
Hello everybody, I hope you can help me before I pull my hair out!
I was about to create a site in Dreamweaver CS3 and decided to add a background image to it via CSS. But whenever I try to preview the index page, I do not see the background image. I have tried to preview it on Firefox, Internet Explorer 7, and Safari. But I cannot see the image at all. What's more frustrating is that the background image displays just fine on the Dreamweaver design preview. I feel like it is taunting me. I have also tried to upload the specific files to a webserver and it still does not display. I have tried to change the image from a jpeg to a png to a gif and still no luck. Before I go on about what else I have tried let me give you some information about my site. I have 3 files: index.html layout.css bg.png Site layout as follows: /index.html /css/layout.css /images/bg.png index.html contains - -------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/layout.css" rel="stylesheet" type="text/css" /> </head> <body> asdf </body> </html> ------------------------ layout.css contains- ------------------------ @charset "utf-8"; /* CSS Document */ body { background: url("/images/bg.png"); margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } and bg.png is the background image in question. and heres a link to an online upload: http://www.geocities.com/cssnoob69/ What I don't understand is that another site I have built in Dreamweaver with the same CSS background-image declaration works just fine. I have even tried to use the background for that site on the new site but even that does not work. I have tried to find help on google but nothing I found helped. Any help is appreciated and thanks to all who tries to help me out! Similar TutorialsHere is the link: http://www.averytrips.com/socal.html I've got a TR with a background image applied to it. The background image is supposed to look like this: http://www.averytrips.com/trbg.png Clearly the TDs are messing it up, but I can't for the life of me figure out why. Im losing it over a minor error that I dont know how to resolve, If you compare chrome with IE and FF you will see that the button on the bottom/ left is being displayed too much to the right on chrome! (the entire section that appears when hovered on that button also!!) Any suggestions? Problem number 2 is a problem with IE, the section that appears when hovering over the button on the bottomleft is cut off if you look closely. The entire right area is cut off. Both FF and even chrome dont cutt off the part.. IE does. Im stuck, advice needed, thank you. Have a look at the situation here . The button is called "OVER MIJ", thanks Hello, I am trying to solve a problem with my site. The banner for links in the top frame is supposed to be framed by two horizontal black lines. It appears the way it should in Safari and FireFox (both mac and PC versions) however in the PC version of IE versions 7 and under (8.0 works fine), the bottom line begins after the last part of the banner ends.....so it sticks way out to the right side of the page rather than dropping down and being flush with the left side of the page. I've tried including it in the table, making it part of its own table and leaving it as an independent image element which is how it is now. Nothing seems to work. Granted, I do not have a ton of experience with website development and was hoping someone here could let me know what I've done wrong and how to fix it. I've included an image of how it should look. The website is poizner.com The html code is below: Thanks! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Alan Poizner Photography </title> <SCRIPT LANGUAGE="JavaScript"> image1 = new Image(); image1.src = "portraits02.gif"; image2 = new Image(); image2.src = "editorial02.gif"; image3 = new Image(); image3.src = "weddings02.gif"; image4 = new Image(); image4.src = "digital02.gif"; image5 = new Image(); image5.src = "etc02.gif"; image6 = new Image(); image6.src = "contact02.gif"; // End --> </script> </HEAD> </head> <body link="white" vlink="white"> <div id=EchoTopic> <img src="topbar.gif"> <br> <table cellspacing="0" cellpadding="0" border="0" align="left"> <tr> <td valign="top"> <img src="alanpoizner.gif"> </td> <td> <img src="spacer.gif" hspace="75"> </td> <td> <a href="portraits2010/index.htm" target="mainFrame" onmouseover="image1.src='portraits02.gif';" onmouseout="image1.src='portraits01.gif';"> <img name="image1" src="portraits01.gif" border=0></a> </td> <td> <img src="divider.gif"> </td> <td> <a href="editorial/index.htm" target="mainFrame" onmouseover="image2.src='editorial02.gif';" onmouseout="image2.src='editorial01.gif';"> <img name="image2" src="editorial01.gif" border=0></a> </td> <td> <img src="divider.gif"> </td> <td> <a href="weddings2010/index.htm" target="mainFrame" onmouseover="image3.src='weddings02.gif';" onmouseout="image3.src='weddings01.gif';"> <img name="image3" src="weddings01.gif" border=0></a> </td> <td> <img src="divider.gif"> </td> <td> <a href="digital/index.htm" target="mainFrame" onmouseover="image4.src='digital02.gif';" onmouseout="image4.src='digital01.gif';"> <img name="image4" src="digital01.gif" border=0></a> </td> <td> <img src="divider.gif"> </td> <td> <a href="etc/index.htm" target="mainFrame" onmouseover="image5.src='etc02.gif';" onmouseout="image5.src='etc01.gif';"> <img name="image5" src="etc01.gif" border=0></a> </td> <td> <img src="divider.gif"> </td> <td> <a href="contact2010/index.htm" target="mainFrame" onmouseover="image6.src='contact02.gif';" onmouseout="image6.src='contact01.gif';"> <img name="image6" src="contact01.gif" border=0></a> </td> </tr> </table> <br> <img src="topbar.gif"> </body> </html> This is giving me serious grief. I've set up an index page containing a number of thumbnail graphics. One of the images (the 12th) loads fine in IE7 and Safari, but not in Firefox 3 or Opera. Here's the link: http://www.pragma.pwp.blueyonder.co....ono/index.html Any thoughts? Is it possible to put a smaller background image on top (like in layers) of my old background image? I have a background image, but I want to put a smaller image on top of that one, but for it to be treated also as background image. This image is a black vertical rectangle, but is faded on the edges to give a transparency, so its a .png. So ultimately what I am trying to do is put this black rectanlge on top of my original background image and with the transparency on the edges of this image, be able to see my original background image. How can I do so? Also what I was thinking was that this faded background would be scaled to fit different screen sizes, so do "width: 75%"? Just so that it ALWAYS stays at 75% no matter what screen size it is viewed on. Is this the right approach towards getting this result? I recently developed the following site: www.stripburgerlv.com If you view it in Firefox it may look just fine. However, in Safari, Opera or IE you'll notice that the right side of the white bounding box disappears. I dont understand?! Part of the image file includes that white edge so why would it not show up in those browsers? Thanks! Hey all, I've been trying to fix up my carpet cleaning website. The bee.png image in the top left of my menu bar is giving me problems with older browsers & most hand-held devices, e.g., iTouch, cellphones, etc. Is there any kind of trick (hack) I could use so that it will properly align with all devices? Website: www.honeydocarpetcare.com Also, please let me know if you are noticing things that are out of place. If so, please tell me what browser and version you are using! Thanks all! Hey guys. I need a little help with my HTML image rotator. Everything works fine, except the images don't show up on the right slide. All 4 images show up on the first slide. I can't figure out what's wrong. Any help will be greatly appreciated. Code: <!DOCTYPE html>
<html>
<head>
<title>...</title>
<style>
#sliderwrap {
height: 403px;
}
#sliderleft {
width: 10px;
height: 100%;
float: left;
background: #efefef;
border: 1px solid #ccc;
}
#sliderleft div {
height: 100px;
border-bottom: 1px solid black;
}
#slidercontent {
position: relative;
width: 650px;
height: 100%;
float: left;
border: 1px solid black;
overflow: hidden;
}
#sliderimages {
position: absolute;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#sliderimages img {
display: block;
}
.s0 #slide0,
.s1 #slide1,
.s2 #slide2,
.s3 #slide3 {
background: #ccc;
}
.s0 #sliderimages {top: 0 }
.s1 #sliderimages {top: -500px}
.s2 #sliderimages {top: -1000px}
.s3 #sliderimages {top: -1500px}
</style>
<script>
var slide = 0;
var interval_id = 0;
function stop_timer() {
clearInterval(interval_id);
if (this.getAttribute("data-slide")) {
slide = parseInt(this.getAttribute("data-slide"));
document.getElementById("sliderwrap").className = "s" + slide;
}
}
function start_timer() {
clearInterval(interval_id);
interval_id = setInterval(
function() {
slide = (slide + 1) % 4;
document.getElementById("sliderwrap").className = "s" + slide;
},
3000
);
}
window.onload = function() {
start_timer();
var el = document.getElementById("slidercontent");
var divs = document.getElementById("sliderleft").getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].onmouseover = stop_timer;
divs[i].onmouseout = start_timer;
}
el.onmouseover = stop_timer;
el.onmouseout = start_timer;
}
</script>
</head>
<body>
<div id="sliderwrap" class="s0">
<div id="sliderleft">
<div id="slide0" data-slide="0"></div>
<div id="slide1" data-slide="1"></div>
<div id="slide2" data-slide="2"></div>
<div id="slide3" data-slide="3"></div>
</div>
<div id="slidercontent">
<div id="sliderimages">
<img src="http://i.imgur.com/8iWz6.jpg">
<img src="http://i.imgur.com/1d2U6.jpg">
<img src="http://i.imgur.com/8iWz6.jpg">
<img src="http://i.imgur.com/1d2U6.jpg">
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
http://goldenworldgoods.awardspace.com/ Hello again, I did this site in Dreamweaver, looked fine in my dreamweaver editor, uploaded it and voila everything goes nuts. List of Problems: The Links are not positioned properly, not big enough plus the drop downs to the bottom and not to the right. That was properly my fault since I just copied a suckerfish method... But can someone help with this. If you study the News Header in the CSS, it says it has a background image, how ever it doesn't show when I uploaded it. I know the url and the pic is correct cause it worked in Dreamweaver... The background for "welcome" is all the way up there which isn't supposed to happen, it supposed to be right on top of the Hello text but that isn't happening either. The hello and welcome are supposed to be aligned to the left of the right header. Thats about it, please can someone help me. I've changed the format of this like 3 times just to get it correctly done, but nothings working. Thank you And don't worry I got it all validated and what not Hi! I've been working with html for a couple of years, but working with XML, C#, ASP.Net for the past three months and I may be exhausted, but for the life of me I cannot see why the image is not displaying for this page. See code below: <table width="100%" border="0"> <tr> <td align="center"><font face="Times, Arial, Helvetica"><a href="picLHVSMFP.htm" target="main"><img src="../images/picSHVSMFP.jpg" width="324" height="500" alt="Harmony Village - Sheppard - Main Floor Plan" border="0"> </a></font></td> </tr> <tr> <td> </td> </tr> <tr> <td align="center"><font color="#000000">Harmony Village - Sheppard - Main Floor Plan</font></td> </tr> <tr> <td> </td> </tr> <tr> <td align="center"><a href="picHVSFP4.htm"><img src="../images/rightarrow.gif" width="11" height="10" border="0"></a> <font color="#003333"><a href="future.htm">Future Projects</a></font> <a href="picHVSFP2.htm"><img src="../images/leftarrow.gif" width="11" height="10" border="0"></a> </td> </tr> </table> I have underlined and bolded the image that is not displaying. The other images on the page are displaying and the links work and I have triple-checked the spelling and opened the image with Adobe Photoshop multiple times. I have even tried decreasing the image size, although larger images have displayed on the website without problems. Is there a syntax problem that I am just not seeing? I have attached the image as well. Thanks!!! I've had a few different problems with this page. In an earlier version, I had the bottom content contained in a div called 'bottom'; however, in IE this created an unwanted gap between the two top divs and the bottom one that I couldn't figure out how to get rid of. So I tried something else, and I thought I had it figured out. This layout works well enough in FF ((still needs a bit of work, but nothing I don't already know how to do, just haven't gotten to it yet)), but it displays weird in IE. I know that adding the proper doctype fixes the problem, but I don't have that option. The webhost I have to work with isn't the best, and thus I need a way to make this display properly in quirks mode in IE. My problem is the image that appears on it's own row in the middle of the page, it should be in the same row as the two images directly below it. Here's my code: Code:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>Berean Baptist Church</title>
<style type="text/css">
#all{
width: 755px;
}
img{
border: 0px;
}
a.default:hover{
cursor: default;
}
#D_1091040261286 {
display: none;
}
#firstright{
float: right;
height: 230px;
width: 240px;
}
#firstleft{
float: left;
height: 230px;
width: 504px;
}
#bottom{
text-align: center;
height: 560px;
width: 762px;
}
#tablist{
padding: 0px 0px 3px 0px;
margin-top: 5px;
margin-left: 1px;
font: bold 10px Verdana;
}
.buttons{
font: bold 10px Verdana;
}
#tablist li{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a{
color: white;
text-decoration: none;
padding: 3px;
margin-left: 0px;
border: 1px solid black;
background-color: #69090A;
}
#tablist li a:hover{
color: #b1272a;
background-color: #efefd1;
cursor: pointer;
}
#linkboxes {
background-color: transparent;
border: 1px solid black;
}
#linkboxes td {
border: 1px solid;
}
#beforeyouattend a {
background: url(/images/10000/3000/914BE/user/beforeyouattend.gif);
display: block;
width: 220px;
height: 28px;
}
#beforeyouattend a:hover {
background: url(/images/10000/3000/914BE/user/beforeyouattendhover.gif);
display: block;
width: 220px;
height: 28px;
}
#weeklybulletin a {
background: url(/images/10000/3000/914BE/user/weeklybulletin.gif);
display: block;
width: 220px;
height: 28px;
}
#weeklybulletin a:hover {
background: url(/images/10000/3000/914BE/user/weeklybulletinhover.gif);
display: block;
width: 220px;
height: 28px;
}
#volunteeropportunities a {
background: url(/images/10000/3000/914BE/user/volunteeropportunities.gif);
display: block;
width: 220px;
height: 28px;
}
#volunteeropportunities a:hover {
background: url(/images/10000/3000/914BE/user/volunteeropportunitieshover.gif);
display: block;
width: 220px;
height: 28px;
}
#pastorsblog a {
background: url(/images/10000/3000/914BE/user/pastorsblog.gif);
display: block;
width: 220px;
height: 28px;
}
#pastorsblog a:hover {
background: url(/images/10000/3000/914BE/user/pastorsbloghover.gif);
display: block;
width: 220px;
height: 28px;
}
#employmentopportunities a {
background: url(/images/10000/3000/914BE/user/employmentopportunities.gif);
display: block;
width: 220px;
height: 28px;
}
#employmentopportunities a:hover {
background: url(/images/10000/3000/914BE/user/employmentopportunitieshover.gif);
display: block;
width: 220px;
height: 28px;
}
#enter a {
background: url(/images/10000/3000/914BE/user/enter.gif);
display: block;
width: 14px;
height: 28px;
}
#enter a:hover {
background: url(/images/10000/3000/914BE/user/enterhover.gif);
display: block;
width: 14px;
height: 28px;
}
#photo {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="all">
<div id="firstright">
<div align="center">
<form style="margin-bottom: 5px;" method="get" action="http://www.google.com/search">
<input id="google" name="q" type="text" size="20" maxlength="255" value="Google search" onfocus="select();" /><img src="/images/10000/3000/914BE/user/google.gif" style="margin:0px; padding:0px;"/>
<div style="margin-top: 7px; margin-bottom: 8px;"><input type="submit" value="Search" />
<input type="checkbox" name="sitesearch" value="bbcfnc.org"/><font size="2">only search </font>
</div>
</form>
<table cellspacing="2" cellpadding="0" id="linkboxes" width="240">
<tr>
<td align="center" valign="middle"><div id="beforeyouattend"><a href="/10000/3000/914BE/welcome"></a></div></td>
<td width="14px" height="28"><div id="enter"><a href="/10000/3000/914BE/welcome5"></a></div></td>
</tr>
<tr>
<td align="center" valign="middle"><div id="weeklybulletin"><a href="/images/10000/3000/914BE/user/ThisWeeksBulletin.pdf"></a></div></td>
<td width="14px" height="28"><div id="enter"><a href="/10000/3000/914BE/ministry10"></a></div></td>
</tr>
<tr>
<td align="center" valign="middle"><div id="volunteeropportunities"><a href="/10000/3000/914BE/floating4"></a></div></td>
<td width="14px" height="28"><div id="enter"><a href="/10000/3000/914BE/floating4"></a></div></td>
</tr>
<tr>
<td align="center" valign="middle"><div id="pastorsblog"><a href="http://pastorseansblog.blogspot.com/"></a></div></td>
<td width="14px" height="28"><div id="enter"><a href="http://pastorseansblog.blogspot.com"></a></div></td>
</tr>
<tr>
<td align="center" valign="middle"><div id="employmentopportunities"><a href="/10000/3000/914BE/floating6"></a></div></td>
<td width="14px" height="28"><div id="enter"><a href="/10000/3000/914BE/floating6"></a></div></td>
</tr>
</table>
</div>
</div>
<div id="firstleft">
<div>
<a id="links" class="pointer" href="#links"><img width="500" height="200" id="photo" src="/images/10000/3000/914BE/user/homepagegallery01.gif" /></a>
<ul id="tablist">
<li><a class="buttons" id="previousbutton" onclick="prev()" onmouseover="number=1; changecontent();" onmouseout="number=2; changecontent();">PREVIOUS</a></li>
<li><a class="buttons" id="pausebutton" onclick="pause()" onmouseover="number=3; changecontent();" onmouseout="number=4; changecontent();">PAUSE</a></li>
<li><a class="buttons" id="nextbutton" onclick="next()" onmouseover="number=5; changecontent();" onmouseout="number=6; changecontent();">NEXT</a></li>
<li><a class="buttons" id="servicetimes" onmouseover="number=7; changecontent()" onmouseout="number=8; changecontent()" href="/10000/3000/914BE/floating5"> SUNDAY WORSHIP SERVICES: 8:30am, 10:45am, 6:00pm</a></li>
</ul>
</div>
</div>
<img align="middle" height="3px" width="185px" src="/images/10000/3000/914BE/user/blank.png"/><br>
<a href="http://www.e-giving.org/start.asp?id=1556"><img src="/images/10000/3000/914BE/user/egiving.gif" alt="E-giving" align="middle" width="185" height="185" hspace="0" vspace="0" ></a>
<a href="/10000/3000/914BE/staff1"><img id="welcome" align="middle" onmouseover="number=9; changecontent()" onmouseout="number=10; changecontent()" height="187px" width="370px" src="/images/10000/3000/914BE/user/Welcome-To-Berean.gif"/></a>
<a href="http://www.bbcfnc.org/media/media/recent.php"><img id="sermonconnect" onmouseover="number=11; changecontent()" onmouseout="number=12; changecontent()" src="/images/10000/3000/914BE/user/sermonsonline.gif" alt="Connect" title="Connect" align="middle" width="185" height="185" hspace="0" vspace="0" ></a><br/>
<img align="middle" height="5px" width="740px" src="/images/10000/3000/914BE/user/blank.png"/><br>
<a href="/10000/3000/914BE/history"><img src="/images/10000/3000/914BE/user/UPWARD-box.gif" alt="Upwards" align="middle" width="185" height="185" hspace="0" vspace="0" /></a>
<a href="/10000/3000/914BE/ministry5"><img src="/images/10000/3000/914BE/user/Berean-Baptist-Academy.gif" alt="Berean Baptist Academy" align="middle" width="185" height="185" hspace="0" vspace="0" /></a>
<a href="/10000/3000/914BE/ShowCalendarMonth"><img src="/images/10000/3000/914BE/user/calendar.gif" alt="Calendar" align="middle" width="185" height="185" hspace="0" vspace="0"/></a>
<a href="/10000/3000/914BE/ministry6"><img src="/images/10000/3000/914BE/user/AWANA-box.gif" alt="Awana" align="middle" width="185" height="185" hspace="0" vspace="0" /></a><br>
<img align="middle" height="5px" width="740px" src="/images/10000/3000/914BE/user/blank.png"/><br>
<div align="center"><img src="/images/10000/3000/914BE/user/BereanCampusPanorama.JPG" width="753" height="172"></div>
</div>
</body>
</html>
I need a solution that doesn't cause the page to display wrong in Firefox, and I'd prefer not to have to use a browser-detection script to document.write different HTML in. I know that would work and I could do that, but I think it would work just as well to stick to the table-based layout that's up on our site now rather than bothering with extra scripts. Hi. I have a question regarding my site. If you click on the link using IE you will see that the images in my tables are cut off on the right, and haven't been scaled at all... In Google Chrome they appear fine. Here is the HTML code snippet: Code: <table>
<tbody>
-snip-
<table>
<tr>
<td>
<div class="large">
<a href="http://picasaweb.google.com/lh/photo/QnqiMcSvmlR_osQplmz-Iw?authkey=Gv1sRgCNbCzI295-KBIg&feat=directlink" target="_blank">
<img class="large" src="http://lh3.ggpht.com/_lPPWxJaDX_0/S1tmkLXjmBI/AAAAAAAAAVA/782xI-SkNVQ/s640/step1-2.jpg" alt="CashCrate offers page." title="CashCrate offers page.">
</img>
</a>
</div>
</td>
</tr>
</table>
-snip-
</tbody>
</table>
And here is some css code: Code: div.large {
width: 100%;
height: 200px;
border: none;
margin-top:6px;
margin-bottom:6px;
overflow: auto;
}
img.large {
width: 98%;
height-max: 600px;
padding: 2px;
border: ridge;
border-color: #66E066;
}
I'm wanting to know what I need to add/change to make the images appear right in all browsers(I've only tested in IE and Chrome). If you need any more info about my page, ask . Thanks. Hello all, I am not understanding the coding for the relative path for my image from the index.html page. I have an image which I gave the name "jesus.jpg" and this image is located in my pc in the folders c://mike'sdocs/websites/church/churchimages/jesus.jpg The index.html file is in the "church" folder and the image itself "jesus.jpg" is in the "churchimages" folder. so the code I am using is <img src="churchimages/jesus.jpg" /> but it does not show in Firefox's browser, help please? I tried other images in that same folder but same result, what could be wrong here please? This is a mixed html, database, and php question. I found this image: http://img.gsmarena.com/vv/pics/sams...eternity-1.jpg And I would like to display it so that the screen part is 240x400 and I would like to run a java app in the screen part. I also want the "?app=whatever" at the end of the url to find the link to "whatever" in a database and use that link for the address to the java app. Finally, I want to set up this database so it contains the name, description, category, link to jad file, and link to jar file of each app. This is my first post here by the way. I myself am a beginner at html, and I was wondering if someone could (if possible) make it so that when a user clicks an image, the image will change to another image and will change back when someone clicks it again? I am looking for a way so that when a user clicks this: It turns into this: And back again when clicked again. I need this to show for all users too. So if a user on 1 computer clicks the button, it switches, and then a user on another comp sees the images clicked, and can click it to change it back to normal. Is there a way this is possible? In Javascript, PHP, or mysql? Thx Hello .. First I must say "Excuse me" if I posted in a wrong room...... I searched many threads for some information regarding the best programming technologies for displaying an image slideshow on a home page. Please let me know if you have any do's or dont's related to this. With some many technologies available to display an image slideshow I want to make sure I choose the right method so SE's dont stumble when indexing my site. Thank You ! Hi, I'm a complete newb and html-challenged, so please forgive my stupid questions. This is what I want for the personal website I'm making: a fixed image as the background that covers the entire screen regardless of what screen resolution a user's computer has - this much I've managed with CSS...I think (like this right? http://www.geocities.com/serenamonster/index.htm ) clickable regions on this background image to use for navigation to various parts of the site. Or in other words, the background image as an image map. - this I'm having trouble with, because you have to designate the picture as a set # of pixels in dimension to make an image map right? and if I do that to my background image, then it may display too big or too small depending on the person's screen resolution right? So does anyone know how I can have clickable regions on my fixed background image without the image being too big for low resolutions or too small for high resolutions? (he http://www.geocities.com/serenamonster/map.html the background image is fixed at 800x400. I want to make each star on the image a hyperlink to a different part of the site). I read somewhere that standard is 800x600 to fill a person's browser right? But on my computer the image only covers about 2/3 of the browser screen which is too small. How can I make it so that it fills 100% of any viewer's screen regardless of resolution? How does it look on your computer? I know these are probably just really stupid questions because I'm missing something really fundamental...but any help would be greatly appreciated! Thanks! ~Serena P.S. is it possible to do mouseovers for certain coordinates on an image map? Hello All, I hope this is a good place to ask my question. I was working on a a webpage and tinkering with two different screen capturing software to capture my website then all of a sudden I realized I can no longer see the background of my webpage. I can go online and see background images of someone else webpage but no the webpages stored on my computer. If anyone has any idea about the cause of the problem please help. |
|||||||