background: url (../example/example.jpg) funciona no dreamweav

Olá Senhores!

Estou tentando colocar uma imagem de fundo numa div através do CSS. Funciona muito bem no dreamweaver na hora de visualizar, mas no site ela não aparece.

O código css é o abaixo:

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin:0 ;padding-top: 5%; padding-bottom:5%; background: url(../images/Miami.jpg); background-repeat:no-repeat; background-position: center center; width:100% }
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} / Hide the slides before the JS is loaded. Avoids image jumping /
.flexslider .slides img {width: 60%; display: block; margin: auto auto auto auto;}
.flex-pauseplay span {text-transform: capitalize;}

/* FlexSlider Default Theme
*********************************/
.flexslider {position: relative; }
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {}
.carousel li {margin-right: 5px}
/ Direction Nav /
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {

width: 60px;
height: 62px;
margin: -20px 0 0;
display: block;
background: url(../images/p-but.png) no-repeat 0 0;
position: absolute;
top:45%; z-index: 10;
cursor: pointer;
text-indent: -9999px;
opacity: 0; -webkit-transition: all .3s ease;
}

.flex-direction-nav .flex-next {background-position: 100% 0; }
.flex-direction-nav .flex-prev {left: -36px;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

/ Control Nav /
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width:0px; height:0px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev {opacity: 1; left: 0;}
.flex-direction-nav .flex-next {opacity: 1; right: 0;}
}
/* Media Queries
***********************/
@media screen and (max-width: 960px) {
#container {padding: 35px;}
header {width: 380px;}
#main {}
}
@media screen and (max-width: 768px) {
#container {padding: 20px 30px;}
header {width: 100%; float: none; text-align: center;}
header h1 {margin: 0 auto 10px;}
header .button,
header nav {display: none;}
#main {margin-left: 0;}
}
@media screen and (max-width: 500px) {
header h1 {width: 246px; }
}

____________________________________________________________________________________________________

Destaquei em vermelho o local do erro. Alguém pode me ajudar por favor?

Agradeço desde já.