background-image; Erro ao colocar Background-image em div.

[tecnorenato 0]

Boa noite senhores, perdoem a minha simples dúvida, mas agora que estou começando a desenvolver sites.

 

Estou tentando por uma imagem de fundo em uma div, mas a mesma dá um erro.

O único jeito que consegui foi assim:

 

background-image:url(file:///C|/Users/Renato/Documents/Trabalhos%20com%20Hotspots/ACS/images/Miami.JPG);

 

Entretanto se eu subir o site assim a imagem não aparecerá.

 

Estou usando o editor Dreamweaver CC.

 

Obrigado!

[Electronic 124]

pode usar o caminho relativo que é mais curto

se a imagem esta numa pasta no mesmo nivel da pasta como css

você tem que subir um nivel (em relacao ao arquivo css) antes de querer entrar na pasta de imagens

 

pra isso você coloca ../ no inicio do caminho para voltar um nivel na hierarquia de pastas

[victor2dm 2]

Provavelmente, o erro é de diretório.

Evite usar caminhos absolutos, como c://tralala/tralala, isso na hora de subir o site dará uma dor de cabeça ..

trabalhe com caminhos dentro da pasta do projeto mesmo.

 

Exemplo:

 

Se você tem uma estrutura de projeto da seguinte forma:

 

Pasta raiz

- CSS

- Imagens

- Index.html

 

Para seu background funcionar, você teria que usar:

 

background-image:url('../imagens/nomedoarquivo.extensão');

 

../ Volta um diretório.

[tecnorenato 0]

Obrigado pela atenção e desculpem a demora senhores.

 

Eu entendi o que disseram e no dreamweaver funcionou enquanto eu visualizo o site que está no meu computador.

Entretanto, quando eu subo o site pra web, a imagem não aparece.

 

Segue código:

 

/* FlexSlider Necessary Styles

*********************************/

.flexslider {margin:0 ;padding-top: 5%; padding-bottom:5%; background-image: 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; }

}

_______________________________________________________________________

Obrigado pela colaboração.

[Fábio BN 17]

Oi.

 

Vá fazendo testes, colocando (./images/Miami.jpg) ou (../../images/Miami.jpg) ou (/images/Miami.jpg) ou (images/Miami.jpg)

 

 

Abraços!

[tecnorenato 0]

Olá senhores. Nada ainda de a imagem aparecer. Tentei desde "(/images/Miami.jpg)" até "(../../../../images/Miami.jpg)".

Até coloquei a imagem na pasta raiz e escrevi apenas"(Miami.jpg)" e não tive sucesso. Só funciona no dreamweaver.

 

Alguém tem mais alguma ideia?

 

O site em que estou fazendo a alteração é o www.acssantos.com.br

 

A imagem é pra ficar debaixo dos slides.

 

Eu poderia colocar na a imagem na div. Entretanto, quando faço isso ela não redimensiona na tela. Se o monitor é pequeno ela corta parte da imagem. Se eu conseguir fazer ela redimensionar lá tbm vale.

[Fábio BN 17]

Oi.

 

Oi.

Uma vez tive um problema semelhante, e resolvi da seguinte forma abaixo

 

Usando esse formato:
background: url('http://www.seu_site.com.br/imagens/sua_imagem.gif')

Coloque o caminho completo com o http://, e coloque entre aspas o LINK.

 

Veja se funciona!

 

Abraços - Fábio!

[Electronic 124]

cara

vc tem que pensar na sua estrutura de pasta, o caminho vai ser baseado nisso

[tecnorenato 0]

Olá de novo pessoal.

 

Eletronic, estou pensando nas estruturas de pasta, tanto é que no dreamweaver ela si perfeita só de por

background: url(../images/Miami.jpg')

Mas no site ela não aparece.

 

Fábio BN, obrigado e estou tentando sua dica. Pelo o que você disse eu tenho de colocar

background: url('http://www.acssantos.com.br....Miami.jpg') ? Desse modo não deu.

Lembro aos senhores que a imagem está na raiz da pasta.

 

Um caso que me intriga é que no mesmo documento tem o seguinte código que se trata dos botões do slide:

background: url(../images/p-but.png) no-repeat 0 0;

Está funcionando normal. A imagem de fundo está na mesma pasta do botão.

 

Agradeço a ajuda e paciência de vocês.

[Fábio BN 17]

Oi.

 

Eu dei uma olhada no seu código fonte, mas não localizei o link da imagem, pois testei e estava quebrado o link.

Vi isso no seu CSS:

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {margin:0 ;padding-top: 5%; padding-bottom:5%; background: url('http://www.acssantos.com.br...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;}

[tecnorenato 0]

É isso mesmo. Se quiser posso zipar o arquivo e te enviar. Mas onde está o erro ai?

A imagem Miami.jpg tá na pasta raiz do site. Deveria funcionar?

[tecnorenato 0]

É isso mesmo. Se quiser posso zipar o arquivo e te enviar. Mas onde está o erro ai?

A imagem Miami.jpg tá na pasta raiz do site. Deveria funcionar?

[tecnorenato 0]

http://www.acssantos.com.br...miami.jpg

[Fábio BN 17]

Oi.

 

Coloca o miami.jpg com a ( m ) minúsculo e veja se funciona.

 

www.acssantos.com.br/miami.jpg

.flexslider {margin:0 ;padding-top: 5%; padding-bottom:5%;
background: url('http://www.acssantos.com.br/miami.jpg');
background-repeat:no-repeat; background-position: center center; width:100% }

Abraços!

[tecnorenato 0]

:)

Fábio, muito obrigado!

Espero que Deus retribua sua paciência comigo.

[tecnorenato 0]

Fabio, se eu conseguir arrumar isso agora é lucro, mas ainda sim a imagem, de acordo com a tela ela é cortada. Sabe que propriedade eu uso para que ela se ajustar a tela e aparecer por inteira?

[Fábio BN 17]

Oi.

 

Faça isso que funciona:

.flexslider {margin:0 ;padding-top: 5%; padding-bottom:5%; background: url('http://www.acssantos...br/miami.jpg'); background-repeat:no-repeat; background-position: center center; width:100%;
 -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
}

Abraços - Fábio!

 

Abraços!

[tecnorenato 0]

Tenho somente que te agradecer mesmo. Três dias perdendo o sono por isso.

 

Valeu.

[Fábio BN 17]

De nada.

 

Eu também de vez em quando passo horas para solucionar problemas simples! Com o tempo vamos ficando mais experientes, e resolvendo com mais rapidez.

 

Abraços

Fábio!

[Electronic 124]

É isso mesmo. Se quiser posso zipar o arquivo e te enviar. Mas onde está o erro ai?

A imagem Miami.jpg tá na pasta raiz do site. Deveria funcionar?

 

Meu deus cara vc vai mesmo fazer o servidor buscar por HTTP uma imagem que esta na própria pasta?

a imagem estava o tempo todo na raiz do site e vc procurando no pasta images ?

po se a imagem ta na raiz então era só usar

background: url(../miami.jpg')

 

isso não tem como a gente adivinhar, só vc sabia que ela estava lá

 

:wacko: