|
HTML - Background Image Not Showing Up
Im using an email newsletter with a few inline css styles.
I have a side background and looks like this <td width="145" valign="top" background="http:www.etcetc.com/images/BLsidegrey.gif"></td> NOW.this shows up fine in web based email like hotmail and gmail. HOwever the w3c validator says it not right to use the background part etc. So i tried the format below <td width="145" valign="top" style="background: url('http://www.etcetc.com/images/BLsidegrey.gif')" ></td> and the validator says great! ure html code is good. But the browser based emails dont show the image.However, when i download it to my mail program the image shows up. So im taking its the web based emails that r having an issue with it since most ppl just read it online and in their mail programs like outlook etc I even tried the bottom creating a seperate style and same issue and they dont show up. also i create a table in my newsletter and the text seems to be squishing to the sides of my coloumns in gmail. Similar TutorialsThe two td backgrounds wont show, does anyone know why? The background images is untitled-1.png and untitled-2.png Here's the code HTML Code: <head>
<title>Morfian - Main</title>
</head>
<body link="#FFCC00" alink="#FFCC00" vlink="#FFCC00" bgcolor="#101010">
<font color="#FFCC00">
<table width="1010" height="300" border="0" bgcolor="#000000" align="center">
<tr>
<td width="1004" height="102"><img src="pix/morfian_banner.png" width="1004" height="100"></td>
</tr>
<tr>
<td height="300" align="center"><table width="998" height="314" border="0" cellpadding="0" cellspacing="0">
<tr>
<th width="104" background="pix/Untitled-2.png" scope="row"></th>
<td width="791"></td>
<td width="105" background="pix/Untitled-3.png"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="40"><img src="pix/morfian_footer(3).png" width="1004" height="66" /></td>
</tr>
</table>
</td>
</tr>
</table>
</font>
</body>
ref. URL: http://www.monmount.com/Default_prev...emplatename=60 screenshot: what it currently looks like a sloppily photoshopped approximation of what it should look like explanation: Basically I've laid the top nav. bar and the search box inside one div together (div id="nav_search_div") and I want the background of the nav. bar to display behind both of them. This is a Volusion cart store so I'm somewhat limited b/c I have to keep the content required to keep their auto-fill-in junk able to auto-fill-in. I can change the background image for the nav menu in one of the .css files provided with the volusion template, but if I use that then it applies it only to the nav. bar, not to the search box. Setting the nav. and the search field into a div together was supposed to be my work-around for this problem, but for some reason the background simply isn't displaying. Any help or explanation would be appreciated. p.s. I know that the page doesn't pass validation, but all the errors generated are from volusion code that I can't change and which shouldn't have any impact on this particular problem. 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'm not sure if this is an IE issue, css, html... I have all icons and images showing a broken image" red X OVER the actual image? I've never seen this on any other sites or even on any other sites i've done. They are all .png images but I use .png files successfully all the time? Anyone encounter this? Here's the HTML surrounding the image file: HTML Code: <div class="header logo2"> <!-- Logo begins here --> <a href="index.php" title=""><img src="images/logo.png" alt="" /></a> </div> <!-- END Logo --> Here's the CSS surrounding the image with no other images or backgrounds being called??? HTML Code: .header {
height: 41px;
}
.logo2 { text-align: right; }
See Image Attached... Hello All, I am a nubie to HTML. On this website: http://www.shareselfhelp.org/ After the first "Get Free Monthly Meeting Directory by Email" The E shows up. But on the second: "Get Free Monthly Meeting Directory by Email" The E is not visible. It is there, I can click on it. Right next to the word Email. If I click on it and hold the button down, I can see the little square dotted line box, outlining the image, but I can't see the image. Thanks in Advance, Laurence I want to display an imagw which is an Icon. When I view it with IE noi mage. When I view the page with Firefox, it works fine. Does IE require something else? Here is the code I am using. <img src=./graphics/c3.ico HEIGHT="40" WIDTH="40"> Hi, I designed and sliced my website in Photoshop CS4 and then tweaked the code as needed in Dreamweaver CS4. Can someone tell me why the image (seen below) isn't showing up on my company's web page, supposed to be on bottom left of my web page: http://www.majorleaguemotoring.com? I'm guessing it has something to do with the iframe code from Facebook? http://www.majorleaguemotoring.com/i...industries.gif I am working on the site rachelsnotary.com and I cannot get the images in 6 of the divs to show up. The other ones all look fine and work fine, but those couple dont work in IE (they do work in firefox though). Any advice? Its probably best to look at the site to see what I am talking about. thanks in advance! Hi all, first post so please be kind! I have a toy and comic fansite here http://www.bloodforthebaron.com I have just discovered that my IMG BORDER="3" code is not working in Internet Explorer and AOL, please view using Firefox for the proper version. Please could someone advise? Don't worry about being patronising, I am self-taught and oftimes dense. How would i show a random image? When people come onto my site, i want the header to be random out of about, 6 different ones. When you refresh the page, it changes the image. (for more explaingin, ha) How would i go about doing this? Hi Team, I placed this html code into my web editor by first uploading and saving the image as a .png file. Here is the code I used: <a href="http://www.awin1.com/cread.php?awinmid=2208&awinaffid=107642&clickref=&p=http%3A%2F%2Fwww.1staudiovisual.co.uk%2Fcatalog% 2Fsamsung-ue46b7020ww-inch-p-7066.html"><img src="1stAudioVisual.png" alt="IstAudioVisual.png" title="Samsung UE46B7020WW" /></a> As you can see I put the img src in the same way that I saved it in my files..When I go to the page it comes up without the image and just says what's written in the alt section How do I get the image to show up? Thanks. Sunil. Hi, I'm probably missing something really obvious, but I'm having a stumbling block on why for this page, you can see the image with the wreath when viewing it in Firefox, but not in Internet Explorer. I always use Firefox, but my bosses tend to use IE 6, so they were confused on why they couldn't see the image today. I also can't see the image in IE 7. hi all, I'm trying to just put an image in a table but for the life of me can't see where i've gone wrong. here is the code: <table id=table1 align=center background=weddingband/weddingcard.gif></table> The image is in the corresponding folder. this is the css: #table1 { border: )0px solid blue;} #table1 td{ border: 0px ;} help appreciated, thanks, r Hi. Not sure if this should go in HTML thread or FLash Dev, but here goes.... I have made some movies in flash, but i understand that people with old versions of flash player, will not be able to see them. Is it possible to show an image instead of the flash movie if the recommended flash player is not installed?? i.e. my movies are 320px height and 426px wide, if the flash player is not installed i would like to show a photo (320px * 426px) instead. Thanks Leroy Hi guys Just joined and hoping someone can offer some advice on an issue. I want a black border around images which show up jsut fine in IE but some reason the border does not appear in FF. The below is an example of what i am doing. <IMG STYLE="position:absolute; TOP:110px; LEFT:610px; WIDTH:180px; HEIGHT:190px" src="Optimized-027edited.jpg" style="border-style: solid; border-color: black;"/> Does anyone have any advice on where what I can do to make the border show up in both browsers? Any help appreciated. Cheers Hello, I'm using Kubuntu Linux. My Website is warp.net16.net Here is the coding that I used to try and put my image up, as you can see it is not showing. <H1 ALIGN=CENTER><U>W.A.R.P</U></H1> <P ALIGN=CENTER>(Work, Assisted, Resource, Program)</P> <P ALIGN=CENTER> <img src="file:///home/esprit/My Website/images/chokurei_spiritmatter.jpeg"/> </P> Thank you for your time and help, I really appreciate it. Hi! I have just reuploaded my site, which contains 3 image flips, and I am only seeing the outline of where the images should be in both Safari and Internet Explorer. This is strange because before re-uploading, this functioned just fin. Any ideas? Thanks! Here is the problem area: http://www.lolaandcricket.com/loe/index.html Hi all -- I'm having a problem. I have a series of 8 images that make up my navigation bar for the website I'm making. Each image has an <a href=" ... > </a> tag around it. I have zeroed out all of the padding/margins/borders on all of the images (in CSS and HTML). The problem I'm having is that a 2-3px padding is showing up to the left of each image, but only in Internet Explorer. Firefox and Chrome do not show the padding. To clarify, I DO NOT want the padding to be displayed. Here is my CSS: Code: <style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/nav/blue/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
padding: inherit
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
padding: 0px;
border: 0px;
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
a img {
border:none;
padding:0;
margin:0;
float:left;
}
a:link {
color: #009;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000053;
}
a:hover {
text-decoration: underline;
color: #009;
}
a:active {
text-decoration: none;
color: #009;
}
-->
</style>
and the <img src=" ... "> code: Code: <!-- MAIN NAVIGATION BANNER -->
<!--HOME-->
<a href="index.php"><img src="images/nav/blue/home_select.png" alt="home" name="home" width="82" height="30" border="0" id="home" onmouseover="document.images.home.src='images/nav/blue/home_over.png'" onmouseout ="document.images.home.src='images/nav/blue/home_select.png'"/></a>
<!--PROGRAMS-->
<a href="programs.php"><img src="images/nav/blue/programs.png" alt="programs" name="programs" width="111" height="30" border="0" id="programs" onmouseover="document.images.programs.src='images/nav/blue/programs_over.png'" onmouseout ="document.images.programs.src='images/nav/blue/programs.png'"/></a>
<!--SCHEDULE OF EVENTS-->
<a href="schedule.php"><img src="images/nav/blue/scheduleofevents.png" alt="schedule of events" name="scheduleofevents" width="189" height="30" border="0" id="scheduleofevents" onmouseover="document.images.scheduleofevents.src='images/nav/blue/scheduleofevents_over.png'" onmouseout ="document.images.scheduleofevents.src='images/nav/blue/scheduleofevents.png'"/></a>
<!--CONTACT US-->
<a href="contact.php"><img src="images/nav/blue/contactus.png" alt="contact us" name="contactus" width="119" height="30" border="0" id="contactus" onmouseover="document.images.contactus.src='images/nav/blue/contactus_over.png'" onmouseout ="document.images.contactus.src='images/nav/blue/contactus.png'"/></a>
<!--DOWNLOADS-->
<a href="downloads.php"><img src="images/nav/blue/downloads.png" alt="downloads" name="downloads" width="267" height="30" border="0" id="downloads" onmouseover="document.images.downloads.src='images/nav/blue/downloads_over.png'" onmouseout ="document.images.downloads.src='images/nav/blue/downloads.png'"/></a>
<!--FACEBOOK-->
<a href="javascript:void(0)"
onclick="window.open('http://www.facebook.com/pages/Delhi-NY/Delaware-County-Public-Health-Nursing-Service/247460644781?ref=ts')"><img src="images/nav/blue/facebook.png" alt="facebook" name="facebook" width="90" height="30" border="0" id="facebook" onmouseover="document.images.facebook.src='images/nav/blue/facebook_over.png'" onmouseout ="document.images.facebook.src='images/nav/blue/facebook.png'"/></a>
<!--TWITTER-->
<a href="javascript:void(0)"
onclick="window.open('http://www.twitter.com/dcphns')"><img src="images/nav/blue/twitter.png" alt="twitter" name="twitter" width="67" height="30" border="0" id="twitter" onmouseover="document.images.twitter.src='images/nav/blue/twitter_over.png'" onmouseout ="document.images.twitter.src='images/nav/blue/twitter.png'"/></a>
<!--BLOGGER-->
<a href="javascript:void(0)"
onclick="window.open('http://dcph.blogspot.com')"><img src="images/nav/blue/blogger.png" alt="blog" name="blogger" width="75" height="30" border="0" id="blogger" onmouseover="document.images.blogger.src='images/nav/blue/blogger_over.png'" onmouseout ="document.images.blogger.src='images/nav/blue/blogger.png'"/></a>
I know it's a bit of a mess.. but regardless, I cannot figure out why this happens.. any ideas? |
|||||||