CSS: Images not showing for JQuery datepicker

Question

I am using the datepicker from here: https://jqueryui.com/datepicker/

I clicked on view source there, then copied the code.

The three below lines:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

I copied the scripts/css and saved them locally, I then downloaded the smoothness template, unzipped it, put the images in /images on my server but the arrows images don't display, this is how it looks: http://postimg.org/image/bcnvipy61/

Have I copied the images in the wrong place or something? (I am not good with CSS)

EDIT (after reading the below comments:

<link rel="stylesheet" href="css/jquery-ui.css">
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery-ui.js"></script>

so the paths are:

css/
js/
images/

Answer 1

This section of the jquery-ui.css file controls all of the icons:

.ui-widget-content .ui-icon {
    background-image: url("images/ui-icons_222222_256x240.png");
}
.ui-widget-header .ui-icon {
    background-image: url("images/ui-icons_222222_256x240.png");
}
.ui-state-default .ui-icon {
    background-image: url("images/ui-icons_888888_256x240.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
    background-image: url("images/ui-icons_454545_256x240.png");
}
.ui-state-active .ui-icon {
    background-image: url("images/ui-icons_454545_256x240.png");
}
.ui-state-highlight .ui-icon {
    background-image: url("images/ui-icons_2e83ff_256x240.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url("images/ui-icons_cd0a0a_256x240.png");
}

It uses ui-icon images as a background and changes the background position.

E.g.:

.ui-icon-arrow-1-e { background-position: -32px -32px; }

to find the right icon.

The point is the the path in the first section is relative so if you css lives in the directory above images it works great.

E.g. Doing something like this:

<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>

but if you want it to live in a css directory in a sibling directory or elsewhere you either have to provide absolute links to the images in the site or skip upward enough directories to indicate where to find that image directory. So just change the jquery-ui.css file appropriately to match what you want to do.

E.g. change to:

.ui-widget-content .ui-icon {
        background-image: url("/images/ui-icons_222222_256x240.png");
 }

or:

.ui-widget-content .ui-icon {
        background-image: url("../images/ui-icons_222222_256x240.png");
}

Sorry, probably too much extraneous info there, but I was on a roll...