Correct code for image url

Hey Experts.  I am trying to add a new feature to my website but I can't seem to get this code right (line #13, 18 and 24 below).  

/* This css requires Moving Boxes v2.02+ */

/* Inside slider shadow */
.mb-left-shadow, .mb-right-shadow {
	background: repeat-y scroll 0 0;
	height: 100%;
	position: absolute;
	top: 0;
	width: 10px;
}

.mb-left-shadow {
	background-image: url("files/webslider/demo/leftshadow.png");
	left: 0;
}

.mb-right-shadow {
	background-image: url("files/webslider/demo/rightshadow.png");
	right: 0;
}

/*** Left & Right Navigation Arrows ***/
a.mb-scrollButtons {
	background: url("files/webslider/demo/arrows.gif") no-repeat;
	margin: 0;
	top: 40%;
	/*  the margin-top below may be causing problems, so adjust the % above... */
	/*  margin-top: -29px; if you change the arrow images, you may have to adjust this (1/2 height of arrow image) */
	zoom: 1;
}

Open in new window


This one works for another section of the web page but I'm not sure how to use this portion of code to ref the location of the file for the one above.
img src="files/webslider/demo/1.jpg" alt="picture"

Open in new window


Thanks Experts!
LVL 9
samiam41Asked:
Who is Participating?
 
COBOLdinosaurConnect With a Mentor Commented:
Actually there should not be any quotes at all.  If removing them does not work then the problem is the path.  depending on the hierarchy of your file system you may have to do an absolute url right from the root, or a full url including the http:// or possibly ../files/

Without seeing the actual file system structure it is a guess, but clearly it is just a incorrect path that the browser can resolve that is the problem.

Cd&
0
 
Melih SARICAOwnerCommented:
in css trying using ' instead of "

/* This css requires Moving Boxes v2.02+ */

/* Inside slider shadow */
.mb-left-shadow, .mb-right-shadow {
	background: repeat-y scroll 0 0;
	height: 100%;
	position: absolute;
	top: 0;
	width: 10px;
}

.mb-left-shadow {
	background-image: url('files/webslider/demo/leftshadow.png');
	left: 0;
}

.mb-right-shadow {
	background-image: url('files/webslider/demo/rightshadow.png');
	right: 0;
}

/*** Left & Right Navigation Arrows ***/
a.mb-scrollButtons {
	background: url('files/webslider/demo/arrows.gif') no-repeat;
	margin: 0;
	top: 40%;
	/*  the margin-top below may be causing problems, so adjust the % above... */
	/*  margin-top: -29px; if you change the arrow images, you may have to adjust this (1/2 height of arrow image) */
	zoom: 1;
}

Open in new window

0
 
samiam41Author Commented:
Thanks for the response experts.

Here is my question.  Is there a way to use the "img src" command in the top portion of code?
.mb-left-shadow {
	background-image: url('files/webslider/demo/leftshadow.png');
	left: 0;
}

.mb-right-shadow {
	background-image: url('files/webslider/demo/rightshadow.png');
	right: 0;

Open in new window


I would rather not use the the whole URL because the webhost makes it tricky.
0
 
Melih SARICAConnect With a Mentor OwnerCommented:
css style url gets under css files path

so .. if ur css file is under

/css then
ur

background-image: url('files/webslider/demo/leftshadow.png');

code means

/css/files/webslider .... etc

as u see if ur files/webslider is under root path try adding / infront of files

like this


background-image: url('/files/webslider/demo/leftshadow.png');
0
 
samiam41Author Commented:
10-4  Thanks non_zero.  Testing it now.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.