imagem em toda a extensao de um site

[deckards2bibi 1]

bom tenho uma imagem de 1000 x 500

e queria que ela pegasse toda a parte superior do meu site

 

assim independente do monitor ela abrisse toda a tela na parte horizontal da tela. sem que sobre espaço

se alguém soube como fazer pode me da uma ajuda pls.

[Nícolas Luís Huber 14]

Pode ser feito, porém como a imagem tem apenas 1000px ela irá repetir na horizontal, o ideal seria uma imagem maior, porém aumentaria o peso do site. Genericamente o código ficaria assim:

<section class="container">
content
</section>

.container {
width: 100%;
height: 500px;
background: url(caminhodaimagem.jpg) repeat-x;
}

Atenção especial para o caminho da imagem, local para qual a imagem se localiza. Pode ser tanto uma imagem remota ou dentro da raiz, como no exemplo, ou uma imagem externa de outro servidor que deve ser informado a url, por exemplo: http://static.imasters.com.br/imasters/img/portal/header-logo.png (o "http://" é necessário).

 

Aconselho fazer as seguintes leituras para o entendimento dos códigos:

 

:seta: http://maujor.com/tutorial/backtut.php

:seta: http://www.w3schools.com/css/css_background.asp

:seta: http://www.htmldog.com/reference/cssproperties/background/

 

Dica: Se a imagem que você está querendo implementar possuir um padrão de repetição horizontal, você pode seleciona-la e deixar apenas uma repetição, para agilizar o carregando do site.

[André do Vale 76]

CSS3:

background-size: cover;

Ou, plugin:

 

http://nooshu.com/jquery-plug-in-scalable-background-image

http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/

 

Se for imagem diretamente no código:

width: 100%;

[deckards2bibi 1]

gente nao consegui fazer isso. ja aumentei colocando uma class na imagem mas nao da esse efeito

e ja aumentei o tamanho da foto pra 1400 px e nada

 

assim nao sei se vcs conhecem mas eu coloco essa imagem dentro da div do "nivo slide" que da efeito de slide show
desculpa a demora ai pra responde ^^

[André do Vale 76]

mas eu coloco essa imagem dentro da div do "nivo slide"

 

 

https://gist.github.com/1438033

[deckards2bibi 1]

https://gist.github.com/1438033

vlw andre me deu uma ajuda imensa com essa pagina vlw msm