Member Avatar for arvindikchari

Hello

I have a mock up of a Zencart layout but I am unable to identify an image.
The CSS Code is as below:

body{
padding:0px;
margin:0px;
background:#FFFFFF url(images/t-dr.gif) repeat-x top;
text-align:center;
}

a:hover{text-decoration:none;}

img { border:0px;}

.dt { display:table; width:100%;}

.dr { display:table-row; width:100%; height:100%;}

.dc { display:table-cell; text-align:left; vertical-align:top; width:100%; }

.main_text, input, textarea, body, font, select
	{
		font-family: Tahoma; 
		font-size:11px;
		line-height:13px;
		color:#32434A;
	}
	
a {color:#E92100;}

font { color:#71980E; font-weight:bold;}

ul { margin:0px; padding:0px; list-style: none;}

.ul1 { margin-top:-5px;}
.ul1 li { background: url(images/a.gif) no-repeat left; margin:0px; padding-left:9px;}
.ul1 li a { font-size:10px; color:#262932; line-height:16px; text-decoration:none;}
.ul1 li a:hover { text-decoration:underline;}

.ul2 li { background:url(images/h-l1.gif) repeat-x bottom; margin:0px; padding: 3px 0px 3px 0px;}
.ul2 li a { background:url(images/bul.gif) no-repeat left; padding-left:12px; color:#3A4750; text-decoration:none; line-height:14px;}
.ul2 li a:hover { color:#EA4E00;}

.ul3 li { background:url(images/h-l.gif) no-repeat bottom left; margin:0px; padding: 3px 0px 3px 0px;}
.ul3 li a { background:url(images/bul.gif) no-repeat left; padding-left:12px; color:#3A4750; text-decoration:none; line-height:14px;}
.ul3 li a:hover { color:#EA4E00;}

input { vertical-align:middle;}

.main { width:754px; margin:auto;}

.header1 { height:54px;}
.header1_c1 { width:314px;}
.header1_v_l { width:1px; background:url(images/v-l.gif) repeat-y;}
.header1_c2 { width:227px; text-align: right;}
.header1_c2 img { vertical-align:middle;}
.header1_c3 { width:37px;}
.header1_c4 { width:36px;}
.header1_c5 { width:137px;}
.header1_text { color:#34464D; font-size:10px; font-weight:bold;}
.header1_sel { width:119px; color:#58646A; vertical-align:middle;}

.header2_c1 { width:194px; background:url(images/t.gif) no-repeat;}
.header2_c2 { width:560px;}

.input1 { width:91px; height:18px; padding-left:5px;}

.footer { height:68px;}

.footer_c1 { width:27px;}
.footer_c2 { width:544px;}
.footer_c3 { width:179px;}

.footer_text, .footer_text a { color:#59676F; text-decoration:none;}
.footer_text a:hover { text-decoration:underline;}

.m_t_dr { background:url(images/p.gif) repeat-x top;}
.m_t_r { background: url(images/m-r-t.gif) no-repeat right;}
.m_l { background:url(images/p.gif) repeat-y left;}
.m_r { background:url(images/p.gif) repeat-y right;}
.m_b_dr { background:url(images/p.gif) repeat-x bottom;}
.m_b_r { background: url(images/m-r-b.gif) no-repeat right;}

.m_pad { padding: 0px 2px 0px 2px;}
.m_pad1 { padding: 0px 1px 0px 1px;}

.m_h_l { background:url(images/m2-m-dr.gif) repeat-x top; height:4px;}

.m_top { background:url(images/m2-t-dr.gif) repeat-x top;}
.m_top_pad { padding: 13px 10px 10px 16px;}

.m_bot { background:url(images/m2-b-dr.gif) repeat-x top;}
.m_bot_pad { padding: 10px 33px 10px 15px;}

.m_h_text { color:#EA4E00; font-size:12px; line-height:12px; text-transform:uppercase; font-weight:bold; padding-left:8px; background:url(images/a3.gif) no-repeat left;}

.m_h1_text { color:#71980E; font-size:12px; line-height:12px; text-transform:uppercase; font-weight:bold; padding-left:8px; background:url(images/a1.gif) no-repeat left;}

.b_br { background:url(images/b-dr.gif) repeat-x top; height:100%;}

.col1 { width:559px;}
.col2 { width:3px;}
.col3 { width:192px;}

.cont_col1 { width:178px;}
.cont_col2 { width:3px;}
.cont_col3 { width:378px;}

.m1_dr { background:url(images/m1-dr.gif) repeat-y;}
.m1_t { background:url(images/m1-t.jpg) no-repeat top;}
.m1_b { background:url(images/m1-b.gif) no-repeat bottom; height:100%;}
.m1_pad { padding: 18px 10px 15px 19px;}
.m1_h_text { color:#294817; font-size:12px; line-height:12px; text-transform:uppercase; font-weight:bold; padding-left:8px; background:url(images/a4.gif) no-repeat left;}

.sel1 { width:143px; color:#3A4750;}

.col3_cell1 { height:86px;}

.cont_col3_cell1_c1 { width:154px;}
.cont_col3_cell1_c2 { width:220px;}
.cont_col3_cell1_c2_margin { margin: 14px 13px 10px 17px;}
.cont_col3_cell1_c2_text1 { font-weight:bold; text-transform:uppercase; line-height:12px;}
.cont_col3_cell1_c2_text2 { color:#EA4E00; font-size:12px; line-height:12px;}
.h_l { height:2px; background:#CFD2D3;}

.m3_dr { background:url(images/m3-dr.gif) repeat-x top #FFBF00;}
.m3_pad { padding:9px 10px 7px 12px;}
.m3_h_text { color:#FFFFFF; font-size:12px; line-height:12px; text-transform:uppercase; font-weight:bold; padding-left:8px; background:url(images/a2.gif) no-repeat left;}

.main_cell_h_l { background:#B3B4B6; height:3px;}

.main_cell_c1 { width: auto; padding: 9px 42px 12px 34px;}
.main_cell_c2 { width:216px;}
.main_cell_c2_margin { margin: 5px 30px 10px 0px;}

.price_block { width:180px; }
.price_block .c1 { width:106px; padding-top:4px;}
.price_block .c2 { width:auto;}
.price_text { font-size:12px; color:#EA4E00; font-weight:bold;}

.categor_text { color:#32434A;}
.categor_text a, .categor_text font { color:#EA4E00; font-weight:normal;}
.categor_text a:hover { color:#32434A; font-weight:bold;}

.prod_main_cell_margin { margin-right:25px; margin-top:7px;}

.prod_link { color:#3A4750; text-decoration:none; background:url(images/bul.gif) no-repeat left; padding-left:8px;}
.prod_link:hover { text-decoration:underline;}

.prod_margin { margin: 13px 30px 9px 34px;}

.product1_c1 { width:63px;}
.product1_c2 { width:56px;}
.product1_c3 { width: auto;}

.product_input { width:47px; height:17px; border-color:#CDCDCD; border-bottom-width:1px;  border-right-width:1px; background-color:#ffffff; padding-left:5px; color:#2B2D2F; line-height:11px; padding-top:0px; }

.prod_text { font-size:10px;}

.cart_cell { text-align:center; padding: 1px 0px 1px 0px;}
.cart_cell_w1 { width:1px; background: url(images/3-v-l.gif) repeat-y;}
.cart_cell1 { width:101px;}
.cart_cell2 { width:111px;}
.cart_cell3 { width:69px;}
.cart_cell4 { width:90px;}

.cart_cell_h_text { color:#71980E; font-size:11px; line-height:11px;}

.cart_h_l { background:#CBCAC5; height:1px;}

.cart1_cell { text-align:center; padding: 11px 0px 3px 0px; }
.cart1_cell_w1 { width:1px; background: url(images/3-v-l.gif) repeat-y;}
.cart1_cell1 { width:101px; padding: 11px 0px 7px 0px; }
.cart1_cell2 { width:111px;}
.cart1_cell3 { width:69px; padding: 11px 0px 7px 0px; }
.cart1_cell4 { width:90px;  padding: 11px 0px 7px 0px;}

.cart_cell_margin { margin-left:16px;}

.cart_cell5 { width:283px; text-align: right;}
.cart_cell6 { width:89px;}

.cart_cell5_margin { margin: 10px 11px 10px 8px;}

.cart_price_text {color:#E65E00; font-size:11px; line-height:11px; font-weight:bold;}

.cart_input { width:30px; height:14px; border: 1px #989797 solid; color:#636363; font-size:11px; text-align: left; padding-top:0px;}

.cart_text { font-size:10px; text-decoration:none; font-weight:bold; color:#32434A;}
.cart_text:hover { text-decoration:underline;}

.pop_main { width:417px; height:462px; margin:auto;}

.pop_head { height:79px;}
.pop_head_c1 { width:296px;}
.pop_head_c2 { width:121px;}
.pop_head1 { height:0px; background:#262626;}

.pop_head_text, .pop_head_text a { color: #4C4C4C; text-decoration:none; font-size:11px;}
.pop_head_text a:hover { text-decoration:underline;}

.pop_margin { margin: 0px 10px 15px 9px;}

.pop_main_text { color:#3A4750; line-height:14px;}

.pop_cell_margin { margin: 0px 20px 15px 15px;}

.pop_bot_padding { padding: 12px 10px 13px 16px;}

.pop_bot_text { color:#59676F;}

I basically want to identify the background image behind the title 'Information; in the column which is at the left side of the template
The same image is used as the bg image for the two right side columns titled 'Information' and 'Bestsellers'
The template can be seen at

  • 3 Contributors
  • 2 Replies
  • 124 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MJ Pieterse

Dani AI

Generated

correctly pointed to the graphic used for the column headings and flagged the usual path problem. The fastest way to confirm which file is being used and why it might not load is to inspect the element and the network requests in your browser — that will show the exact URL the CSS is asking for and any 404s.

Quick troubleshooting steps:

  • Right‑click the heading and choose Inspect (DevTools → Elements). In the Styles or Computed pane look for the background / background-image rule and the URL it references.
  • Open DevTools → Network, filter by Images, then reload the page. Missing graphics show up as failed requests (status codes) and reveal the path the browser tried to load.
  • If the heading shows only part of a larger image, check background-position (it may be a sprite).

If the path is wrong, there are three clean fixes: correct the relative path from the stylesheet, use a root‑relative path that starts at the site root, or use an absolute URL. Example patterns:

/* root-relative */
.col-title { background: url("/assets/img/header-bg.png") repeat-x top; }

/* absolute */
.col-title { background-image: url("https://example.com/assets/img/header-bg.png"); }

Extra checks: confirm file name case matches exactly (servers can be case‑sensitive), ensure file permissions allow public read, and clear browser cache after changes. For detail on how CSS resolves url() and on using the inspector, see the MDN docs: background-image and Page Inspector / DevTools guidance.

Recommended Answers

All 2 Replies

Member Avatar for cfajohnson


images/m2-t-dr.gif

Member Avatar for MJ Pieterse

agreed. make sure your images are stored in the same location as the page you are referecing it from. if you did put the images in another file, perhaps called images...you would maybe want to try ../images/m2-t-dr.gif;

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.