hi i sliced my site header and body background and added to the index page using CSS, the problem is these images are displayed in editor (DREAMWEAVER 8) and looked fine, but when i try to view the page in browser, background images are not displayed. i wonder how to solver this problem,
can anyone reply with soulution?
shahiduop 0 Newbie Poster
Kraai 56 Senior Poster Featured Poster
Hi
It is not easy to reply with solotions if we cannot see your css style and html code. Post them, so we can have a look at it to see if we can help you.
shahiduop 0 Newbie Poster
hi thanks for reply
im trying to show it through code
I have removed some of the php code from index page, some css code that i wrote recently after facing that problem nad knew that problem was not bcoz of that removed code. here is the main code please check it out,,,,
style.css
/* CSS Document */
body {
background-position: center top;
margin-top:0px;
margin-left:auto;
margin-right:auto;
background-color: #000000;
}
#mainDiv {
width:975px;
margin-left:auto;
margin-right:auto;
background:#FFF;
background:url(images/main_bg.jpg);
background-repeat:repeat-y;
}
/* Header */
.header {
width:975px;
height:152px;
background-image:url(images/top_bg.png);
background-repeat:no-repeat;
background-position:right;
}
.header .logo {
width:508px;
height:111px;
float:left;
background-image:url(images/logo.png);
background-position:left;
}
.sitemap_wrap
{
width:456px;
height:36px;
float:right;
background-image:url(images/top_sitemap_menu.png);
background-repeat:no-repeat;
background-position:left;
}
.header .sitemap {
width:300px;
height:36px;
padding-left:63px;
}
.header .sitemap ul {
list-style:none;
padding:4px 0 0 0;
margin:0px;
text-decoration: none;
}
.header .sitemap li {
display:inline;
padding-left:20px;
}
.header .sitemap li a:link {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 10px;
color: #ffffff;
font-weight:bold;
}
.header .sitemap li a:visited {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 10px;
color:#ffffff;
font-weight:bold;
}
.header .sitemap lia:hover {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 10px;
color:#ffffff;
}
/* Top nav */
.top_menu2_wrap
{
width:712px;
height:32px;
}
.nav {
width:712px;
height:32px;
font-family:Tahoma;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
background-image:url(images/nav_bg.png);
background-repeat:repeat-x;
float:left;
}
.nav ul {
list-style:none;
margin:0px;
padding-left:45px;
padding-top:10px;
text-decoration: none;
}
.nav li {
display:inline;
padding-right:30px;
}
.nav li a:link {
text-decoration: none;
font-family:Tahoma;
font-size: 12px;
color: #FFFFFF;
}
.nav li a:visited {
text-decoration: none;
font-family:Tahoma;
font-size: 12px;
color: #FFFFFF;
}
.nav li a:hover {
text-decoration: none;
font-family:Tahoma;
font-family:Tahoma;
font-size: 12px;
color:#CCCCCC;
}
.nav li a:active {
text-decoration: none;
font-family:Tahoma;
font-size: 12px;
color: #FFFFFF;
}
/* banner */
.banner {
width:712px;
height:173px;
background-image:url(images/banner.jpg);
background-repeat:no-repeat;
float:left;
margin-left:3px;
}
/* Second nav */
.second_nav {
width:975px;
height:120px;
background-image:url(images/second_nav_bg.jpg);
background-repeat:repeat;
}
.second_nav ul {
list-style:none;
padding:0px;
margin:0px;
padding-left:26px;
padding-top:8px;
text-decoration: none;
}
.second_nav li {
display:inline;
padding-right:12px;
}
.second_nav li a:link {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 12px;
color: #FFFFFF;
border:none;
}
.second_nav li a:visited {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 12px;
color: #FFFFFF;
border:none;
}
.second_nav lia:hover {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 12px;
color: #FDEED5;
border:none;
}
.second_nav li a:active {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 12px;
color: #FFFFFF;
border:none;
}
.separator {
height:20px;
}
.clear {
clear:both;
}
a:link {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 14px;
color: #FFFFFF;
}
a:visited {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 14px;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 14px;
color: #FDEED5;
}
a:active {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 14px;
color: #FFFFFF;
}
/* Page content */
.cont_left {
width:710px;
float:left;
color:#5D5D5D;
padding-left:6px;
padding-top:6px;
padding-bottom:6px;
}
.cont_left_top
{
width:713px;
height:21px;
background:url(images/main_content_top.jpg);
background-repeat:no-repeat;
background-position:left;
}
.cont-main_bg
{
width:713px;
min-height:350px;
height:1px;
background:url(images/main_content_bg.jpg);
background-repeat:repeat-y;
background-position:left;
height:100%
}
.cont-writ2us_main_bg
{
width:713px;
min-height:600px;
height:1px;
background:url(images/main_content_bg.jpg);
background-repeat:repeat-y;
background-position:left;
height:100%
}
.left_cont_bottom
{
width:713px;
height:30px;
background:url(images/main_content_footer.jpg);
background-repeat:no-repeat;
background-position:left;
}
.page_title {
width:597px;
height:25px;
text-decoration: none;
font-family:Trebuchet MS;
font-size: 16px;
color:#990000;
font-weight: bold;
text-transform:capitalize;
padding-top:10px;
margin-left:30px;
}
.body_text {
position:static;
width:650px;
text-decoration: none;
font-family:Trebuchet MS;
font-size: 12px;
color:#5D5D5D;
line-height:18px;
padding-left:33px;
padding-top:10px;
text-align:justify;
}
/* Right side links */
.menu_container
{
width:250px;
height:100%;
float:left;
margin-bottom:12px;
}
.links_botton_box
{
width:200px;
height:100%;
float:left;
margin-bottom:3px;
}
/* Right side Conntents */
.cont_right {
width:252px;
height:auto;
float:right;
margin-top:-42px;
}
.content_right_title {
height:20px;
text-decoration: none;
font-family:Trebuchet MS;
font-size: 16px;
color:#FFFFFF;
}
.content_right_body {
width:242px;
height:auto;
background-image:url(images/right_cont_bg.jpg);
background-position:left;
background-repeat:repeat-y;
font-family:Trebuchet MS;
font-size: 12px;
color:#5D5D5D;
padding-left:10px;
}
.content_right_body ul {
list-style:none;
padding:0px;
margin:0px;
padding-top:8px;
text-decoration: none;
}
.content_right_body li {
padding-right:12px;
background-image:url(images/news_bullet.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:15px;
}
.content_right_body li a:link {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 12px;
color: #5d5d5d;
font-weight:bold;
}
.content_right_body li a:visited {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 12px;
color:#5d5d5d;
font-weight:bold;
}
.content_right_body lia:hover {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 12px;
color:#5d5d5d;
}
.content_right_bottom {
width:250px;
height:11px;
background-image:url(images/right_cont_bottom.jpg);
background-position:left;
background-repeat:no-repeat;
}
.content_right_top {
width:250px;
height:13px;
background-image:url(images/right_cont_top.png);
background-position:left;
background-repeat:no-repeat;
}
.right_side_box
{
width:250px;
height:100%;
float:left;
margin-bottom:12px;
}
.content_news_body {
width:242px;
height:auto;
background-image:url(images/right_cont_bg.jpg);
background-position:left;
background-repeat:repeat-y;
font-family:Trebuchet MS;
font-size: 12px;
color:#5D5D5D;
padding-left:10px;
}
.content_news_title {
height:20px;
text-decoration: none;
font-family:Trebuchet MS;
font-size: 16px;
color:#000066;
}
.content_news_body ul {
list-style:none;
padding:0px;
margin:0px;
padding-top:8px;
text-decoration: none;
}
.content_news_body li {
padding-right:12px;
background-image:url(images/news_bullet.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:15px;
padding-bottom:13px;
}
/* Bottom */
.bottom {
width:975px;
height:121px;
background-image:url(images/footer_png.png);
padding-top:20px;
margin-bottom:0px;
}
.bot_left ul {
list-style:none;
padding:0px;
margin:0px;
padding-left:45px;
padding-top:15px;
text-decoration: none;
}
.bot_left li {
display:inline;
padding-right:30px;
}
.bot_left li a:link {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 12px;
color: #FFFFFF;
}
.bot_left li a:visited {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 12px;
color: #FFFFFF;
}
.bot_left li a:hover {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 12px;
color: #FDEED5;
}
.bot_left li a:active {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 12px;
color: #FFFFFF;
}
.bot_right {
width:200px;
float:right;
text-decoration: none;
font-family:Trebuchet MS;
font-size: 12px;
color: #E5B768;
font-weight: bold;
text-align:right;
padding-right:40px;
}
a.bot:link {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 12px;
color: #FDEED5;
}
a.bot:visited {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 12px;
color: #FDEED5;
}
a.bot:hover {
text-decoration: underline;
font-family:Trebuchet MS;
font-size: 12px;
color: #FDEED5;
}
a.bot:active {
text-decoration: none;
font-family:Trebuchet MS;
font-size: 12px;
color: #FDEED5;
}index.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>.::Welcom to WWE::.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mainDiv">
<div class="header">
<div class="logo"></div>
<div class="sitemap_wrap">
<?php include("sitemap.php");?>
</div>
<div class="top_menu2_wrap">
<?php include("top_menu2.php");?>
</div>
</div>
<div class="banner"></div>
<div class="cont_right">
<div class="menu_container">
<?php include("right_menu_links.php");?>
</div>
<div class="right_side_box">
<?php include("news_updates.php");?>
</div>
<div class="right_side_box">
<?php include("right_hotlinks.php");?>
</div>
</div>
<div class="cont_left">
<div class="cont_left_top"></div>
<div class="cont-main_bg">
<div class="page_title">WORLD WIDE EDUCATION. </div>
<div class="body_text">
<div class="advertisement"> <?php include("advertisement.php");?> </div>
PAGE MAIN CONTENTS GO HERE
</div>
</div>
<div class="left_cont_bottom"></div>
</div>
<div class="clear"></div>
<div class="separator"></div>
<div class="bottom">
<div class="bottom_menu_wrap">
</div>
</div>
</div>
</body>
</html> Kraai 56 Senior Poster Featured Poster
OK, Normally, when a image does not display in a browser, it means, the browser cannot find the path to that image. So, my first guess here would be that you did not define the correct path to those images.
An easy way to find the correct path to your image, is to go to the image itself, rightclick the name, go to properties, and copy the path. all you need now to do is to paste it in your code, including the name of the image.
Try this, and let us know.
Profcat 0 Newbie Poster
try to resize the image. In photoshop, etc use "Save for Web" button to save your image to lower your image size. if the image size is bigger than it should be, background image cannot be seen in online web browser.
Kraai 56 Senior Poster Featured Poster
if the image size is bigger than it should be, background image cannot be seen in online web browser.
Now this is news to me. Can you elaborate some more on this? :-O
Borzoi 24 Posting Whiz
You need to encase the links in your css in quotes. For example, your #mainDiv is currently:
#mainDiv {
width:975px;
margin-left:auto;
margin-right:auto;
background:#FFF;
background:url(images/main_bg.jpg);
background-repeat:repeat-y;
}When it should be:
#mainDiv {
width: 975px;
margin-left: auto;
margin-right: auto;
background: #FFF;
background: url('images/main_bg.jpg');
background-repeat: repeat-y;
}I'm pretty sure the spaces I've put after each of the colons aren't needed but as you can see, it makes the syntax highlight better.
try to resize the image. In photoshop, etc use "Save for Web" button to save your image to lower your image size. if the image size is bigger than it should be, background image cannot be seen in online web browser.
That isn't necessarily needed. Not all image editing software has a "Save for Web" option and Photoshop isn't free. The file size would just determine the loading time of the image. If you want to reduce the file size with minimal quality loss, I would recommend a free program called Riot (Radical Image Optimisation Tool). I use it at work and find it very useful.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.