473,386 Members | 1,766 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > html / css > questions > i have a problem with my html and css, some background images are not showing up

Join Bytes to post your question to a community of 473,386 software developers and data experts.

I have a problem with my html and CSS, some background images are not showing up

Hi guys, I'm not really advanced in html or css, and I'm having a problem that is really getting me out of my nerves. So I redesigned my portfolio site with dreamweaver as my main html css editor. But with the Web developer toolbar I modified things to take the final choises.
In fact my site is just a html file with a flash file with my portfolio, and a modal box with the contact form.

The problem I'm having is that my wrapper background is not showing up, this background is the same i'm using in the modal box, but it isn't showing up there either. And some other images i put on the modal box are just not there. And my footer background isn't showing either, at first i thought the files weren't uploaded correctly but i direct link to one of themm and they are uploaded.

I tried to solve this problem but didn't make it, in dreamweaver preview in Firefox, Safari, IE and Flock my site looks fine but in the real network doesn't work.

PS: my site is in spanish, because it's my native language. but i think that doesn't matter because the html and css are universal code.

my site is www.aleksey.net23.net hosted free in 000webhost.

and here is the Html. validated in w3c
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
  6. <title>Alexei Prada Nagai | Portafolio Web</title>
  7. <link rel="stylesheet" href="style.css" type="text/css" />
  8. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  9. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
  10. </script>
  11. <script type="text/javascript" src="contact.js">
  12. </script>
  13. <script src="../../Scripts/swfobject_modified.js" type="text/javascript">
  14. </script>
  15. </head>
  16. <body>
  17. <div id="wrapper">
  18. <div id="header_wrap">
  19. <div id="header"></div>
  20. </div>
  21. <div id="main">
  22. <div id="portfolio"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="650" id="FlashID" title="Portafolio"><param name="movie" value="preloader.swf" />
  23. <param name="quality" value="high" />
  24. <param name="wmode" value="opaque" />
  25. <param name="swfversion" value="6.0.65.0" />
  26. <!-- Esta etiqueta param indica a los usuarios de Flash Player 6.0 r65 o posterior que descarguen la versión más reciente de Flash Player. Elimínela si no desea que los usuarios vean el mensaje. -->
  27. <param name="expressinstall" value="../../Scripts/expressInstall.swf" />
  28. <!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocúltela a IE mediante IECC. -->
  29. <!--[if !IE]>-->
  30. <object type="application/x-shockwave-flash" data="preloader.swf" width="1000" height="650"><!--<![endif]-->
  31. <param name="quality" value="high" />
  32. <param name="wmode" value="opaque" />
  33. <param name="swfversion" value="6.0.65.0" />
  34. <param name="expressinstall" value="../../Scripts/expressInstall.swf" />
  35. <!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. -->
  36. <div>
  37. <h4>El contenido de esta página requiere una versión más reciente de Adobe Flash Player.</h4>
  38. <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" width="112" height="33" /></a></p>
  39. </div>
  40. <!--[if !IE]>--></object> <!--<![endif]--></object></div>
  41. <div id="quotes">
  42. <div id="intro"></div>
  43. <div id="quote1">
  44. <p>"La mirada llega primero que las palabras. Los niños miran y reconocen las cosas antes de poder hablar"</p>
  45. <h2>- John Berger, Modos de Ver</h2>
  46. </div>
  47. <div id="quote2">
  48. <p>"El diseño es la inteligencia hecha visible"</p>
  49. <h2>- Alina Wheeler</h2>
  50. <p>"Menos es más"</p>
  51. <h2>- Robert Browning</h2>
  52. </div>
  53. <div id="container">
  54. <p><a class="modal" href="#"><img src="Images/contact_box.png" alt="Contact" width="300" height="272" /></a>.</p>
  55. </div>
  56. </div>
  57. </div>
  58. <div id="contact">
  59. <div id="social">
  60. <div id="email2">
  61. <h3>Email</h3>
  62. <p>alexei.nagai@gmail.com</p>
  63. <h3>Redes Sociales</h3>
  64. <p><a href="http://www.facebook.com/alexei.nagai" target="_blank"><img src="Images/FB.png" width="42" height="42" alt="Facebook" /></a> <a href="http://twitter.com/#!/AlekseyNa" target="_blank"><img src="Images/twit.png" width="42" height="42" alt="Twitter" /></a></p>
  65. </div>
  66. </div>
  67. <div id="close"></div>
  68. <div id="contact_header"></div>
  69. <p class="success">Gracias! Tue mensaje ha sido enviado.</p>
  70. <form action="send.php" method="post" name="contactForm" id="contactForm">
  71. <p><input name="name" id="name" type="text" size="30" value="Nombre" /></p>
  72. <p><input name="email" id="email" type="text" size="30" value="Email" /></p>
  73. <p>
  74. <textarea name="comment" id="comment" rows="5" cols="40">
  75. Mensaje
  76. </textarea></p>
  77. <p><input type="submit" id="submit" name="submit" value="" /></p>
  78. </form>
  79. </div>
  80. <div id="mask"></div>
  81. <div id="footer_wrap">
  82. <div id="footer">
  83. <p>Copyright © 2011 | Alexei Prada Nagai</p>
  84. </div>
  85. </div>
  86. </div>
  87. <!-- www.000webhost.com Analytics Code -->
  88. <script type="text/javascript" src="http://analytics.hosting24.com/count.php">
  89. </script><noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript><!-- End Of Analytics Code -->
  90. </body>
  91. </html>
  92.  
and the css also validated only with warnings of CSS3 not supported in some browsers or versions of CSS
Expand|Select|Wrap|Line Numbers
  1. /* CSS Document */
  2.  
  3. body {
  4. margin:0px; 
  5. padding: 0px;
  6. }
  7.  
  8. #wrapper {
  9. width: 100%;
  10. margin-top: 0px;
  11. margin:auto;
  12. background: url(images/bgwrap.jpg);
  13.  
  14. }
  15.  
  16. #header_wrap{
  17.     position: relative;
  18.     width: 100%;
  19.     height:200px;
  20.     margin:auto;
  21.     background-image: url(Images/bkgd.png);
  22.     background-repeat: repeat-x;
  23.     background-position:center center;
  24. }
  25.  
  26. #header{
  27.     width:1100px;
  28.     height:200px;
  29.     margin:auto;
  30.     background-image: url(Images/alexei.png);
  31.     background-repeat: no-repeat;
  32.     background-position: center center;
  33. }
  34.  
  35. #main {
  36. width:1100px;
  37. margin:auto;
  38. overflow:hidden;
  39. clear:none;
  40.  
  41. }
  42.      #portfolio{
  43.     width:1000px;
  44.     height:650px;
  45.     margin:auto;
  46.  
  47.     }
  48.  
  49.     #quotes{
  50.     height:350px;
  51.     width:1100px;
  52.     margin:auto;
  53.         }
  54.  
  55.         #intro {
  56.         width:1100px;
  57.         height:25px;
  58.  
  59.         }
  60.         #quote1{
  61.     float:left;
  62.     width:300px;
  63.     height:300px;
  64.     margin-bottom:25px;
  65.     margin-left:50px;
  66.  
  67.  
  68.         }
  69.  
  70.         #quote2{
  71.     float:left;
  72.     width:300px;
  73.     height:300px;
  74.     margin-bottom:25px;
  75.     margin-left:50px;
  76.  
  77.  
  78.         }
  79.  
  80.  
  81.         #quote1 p{
  82.             font-family:"garamond", "Times New Roman", Times, serif;
  83.             font-style:italic;
  84.             padding: 20px;
  85.             font-size:25px;
  86.             margin-top:0;
  87.  
  88.             }
  89.  
  90.         #quote2 p{
  91.             font-family:"garamond", "Times New Roman", Times, serif;
  92.             font-style:italic;
  93.             padding: 20px;
  94.             font-size:25px;
  95.             margin-top:0;
  96.  
  97.             }
  98.  
  99.         #quote3 p{
  100.             font-family: "calibri", Arial, Helvetica, sans-serif;  
  101.             font-size:15px;
  102.             margin-top:0;
  103.             text-align:right;
  104.  
  105.             }
  106.  
  107.         #quotes h2{
  108.             font-family:  "calibri", Verdana, Geneva, sans-serif;
  109.             font-size:20px;
  110.             padding:10px;
  111.             color: #003366;
  112.             text-shadow: 0px 2px 1px white;
  113.             margin-top:0;
  114.             line-height:2px;
  115.             text-align:right;
  116.  
  117.             }
  118.  
  119.     #footer_wrap{
  120.     background-image: url(images/footerbg.png);
  121.     background-repeat: repeat-x;
  122.     background-position:center center;
  123.     height:250px;
  124.     width:100%;
  125.     line-height:2em;
  126.  
  127.     }
  128.  
  129.         #footer{
  130.         height:100px;
  131.         width:1100px;
  132.         margin:auto;
  133.  
  134. }
  135.             #footer p{
  136.             font-family:helvetica, arial, verdana, sans-serif;
  137.             font-size:12px;
  138.             text-align:center;
  139.             color:white;
  140.             margin-top:0;
  141.             padding-top:15px;
  142.             text-shadow: 0px 2px 1px black;
  143.  
  144.  
  145.  
  146. }
  147. /* CSS Contact Form */
  148.  
  149. #container {
  150.     float:left;
  151.     width:300px;
  152.     height:300px;
  153.     margin-bottom:25px;
  154.     margin-left:50px;
  155.     border:none;
  156.  
  157.     }
  158.  
  159.     /*contact form*/
  160.     #mask {
  161.     background-color:#000;
  162.     display:none;
  163.     left:0;
  164.     position:absolute;
  165.     top:0;
  166.     width:100%;
  167.     height:1450px;
  168.     z-index:9000;
  169.     }
  170.  
  171.     #contact {
  172.     background:url(images/bgwrap.jpg);
  173.     display:none;
  174.     left:50%;
  175.     margin-left:-300px;
  176.     position:absolute;
  177.     top:90px;
  178.     width:600px;
  179.     z-index:9999;
  180.     border-radius:10px;
  181.     -moz-border-radius:10px;
  182.     -webkit-border-radius:10px;
  183.     padding:20px 20px 0px;
  184.     }
  185.     #social {
  186.     width:200px;
  187.     position:absolute;
  188.     left:370px;
  189.     top:120px;
  190.     padding-left:30px;
  191.     border-left: 2px solid #663333;
  192.     border-radius:10px;
  193.     -moz-border-radius:10px;
  194.     -webkit-border-radius:10px;
  195. }
  196. #email2 {
  197.     font-family: Verdana, Geneva, sans-serif;
  198.     font-size:10pt;
  199.     font-style:italic;
  200.     text-align:left;
  201.     color: #663333;
  202.     }
  203. #email2 h3 {
  204.     font-family: "Courier New", Courier, monospace;
  205.     font-size:14pt;
  206.     font-style:normal;
  207.  
  208.     }
  209.  
  210.  
  211.     #close {
  212.     background:url(images/close.png) no-repeat right;
  213.     cursor:pointer;
  214.     height:24px;
  215.     width:24px;
  216.     position:relative;
  217.     left:605px;
  218.     bottom:30px;
  219.     }
  220.  
  221.     #contact_header {
  222.     background:url(images/contact_header.png) no-repeat left;
  223.     font-family:arial, sans-serif;
  224.     font-size:30px;
  225.     font-weight:700;
  226.     line-height:50px;
  227.     padding:5px 5px 10px 60px;
  228.     height:40px;
  229.     }
  230.  
  231.     /* form components */
  232.     input,textarea {
  233.     border:1px solid silver;
  234.     background-color:#fff;
  235.     color:#404040;
  236.     font-size:10px;
  237.     font-family:Verdana, Arial, sans-serif;
  238.     text-transform:regular;
  239.     border-radius:5px;
  240.     -moz-border-radius:5px;
  241.     -webkit-border-radius:5px;
  242.     margin:10px 0;
  243.     padding:10px;
  244.     }
  245.  
  246.     input:hover[type=text],input:focus[type=text],textarea:hover,textarea:focus {
  247.     background-color:#E0E0E0;
  248.     border:1px solid #000;
  249.     }
  250.  
  251.     input[type=text],textarea {
  252.     width:300px;
  253.     }
  254.  
  255.     #submit {
  256.     border:none;
  257.     width:181px;
  258.     height:54px;
  259.     background:url(images/submit.png);
  260.     }
  261.  
  262.     #submit:hover {
  263.     cursor:pointer;
  264.     }
  265.  
  266.     /* alert messages */
  267.     .success,.error {
  268.     color:#000;
  269.     display:none;
  270.     font-size:15px;
  271.     font-weight:700;
  272.     border-radius:4px;
  273.     -moz-border-radius:4px;
  274.     -webkit-border-radius:4px;
  275.     padding:5px 10px 5px 10px;
  276.     margin-bottom: 10px;
  277.     }
  278.  
  279.     .success {
  280.     background-color:#9F6;
  281.     border:1px solid #0F0;
  282.     width:300px;
  283.     }
  284.  
  285. .error {
  286. background-color:#F66;
  287. border:1px solid red;
  288. width:300px;
  289.  
  290. }
  291.  
it should have a lot of mistakes but thats why i'm asking for help.

PD: Something curious is that the header background and another png in the header are showing perfectlly.



PROBLEM SOLVED, MY MISTAKE IN THE CSS CODE LOL.
Mar 19 '11 #1
2 4621
VijaySofist
107 100+
Hi,

Could n't able to trigger out exact, but you should give the image url within single quotes and try adding a '/' (Slash) symbol before the images folder.

All the Best

Regards
Vijay.R
Mar 30 '11 #2
Thanks for your reply but if you read the main post I solved the problem long ago, and the sigle quotes weren't the problem and weren't needed also. Thanks Again
Mar 30 '11 #3

Sign in to post your reply or Sign up for a free account.

Similar topics

3
a:links background images and image links...
by: MediaDesign | last post by:
so there's the problem: my text links have background images and when I put links around images on my page, they too get the background image treatment which I do not...I have tried several...
HTML / CSS
3
css problem with background images
by: ribinha | last post by:
Hi all, I am having problems loading background images on my pages. I have created a css to display the images. It works just fine on my test box, but when I tried on real pages it wont upload any...
HTML / CSS
0
Dilemma with background images (putting borders on DIVs)
by: Jeb Hunter | last post by:
Well, how can I describe this succinctly? I have a page with DIVs that us background images to produce a border effect. It works perfectly well, but I want to make up (for now) 3 different...
HTML / CSS
1
Problem with displaying background images in Firefox table
by: simct | last post by:
As part of my learning, I wrote the following codes to display 2 background images side-by-side: <head> <style type="text/css"> .image1 {background-image: url(images/sw1.jpg); ...
HTML / CSS
6
capture ALL image urls used in document including background images
by: Rob | last post by:
Hello, I'm sure this has come up before. I have need for a collection of all elements/objects in an HTML document that have any kind of an attribute (HTML or CSS) that is making use of a URL to...
Javascript
7
Need help with a css problem involving divs and background images
by: arupfrancis | last post by:
Hi, I am trying to create a colored box using background images. I am able to do it easily using tables but doing it in divs is proving to be an issue. Moreover IE and Mozilla also seems to be...
HTML / CSS
0
Making resizable Background Images
by: aak | last post by:
Hi, I Am Working On A Simple Fixed Width Layout With Using Background Images. And I Want That Background Image Should Be Resizable With Every Resolution, And That Background Image Is Shaded....
Visual Basic .NET
0
Problem with tables and multiple background images
by: Arkayem | last post by:
I am having some trouble getting my background images to show. I do not know what I am doing wrong, because I just started getting into the web page building thing a couple of months ago, and I...
HTML / CSS
1
background images
by: tlonthedl | last post by:
Hi, I am designing a theme for a wordpress blog and I am having some problems with repeating background images. Specifically, the background image will not show or repeat in the body, or in the...
HTML / CSS
4
Help With HTML Background Repeat
by: NYXX | last post by:
I'm designing a webpage from a template that I bought. I'm trying to edit this line of text. <td width="50%" valign="top" style="background:url(images/px_left.jpg) top repeat-x"></td> The...
HTML / CSS
0
Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
General
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!