setembro 14, 2011

Tutorial - Propriedade Backgrounds entenda sobre

Oi meus docinhos de morango com pepino (meedo '-') neste tutorial vou tentar mostrar para vocês as propriedades dos Backgrounds, é bem complicado para alguns blogueiros, as vezes fazemos um background em imagem lindo e não fica posicionado da forma que queremos, então preste bem atenção são várias regrinhas.

Poderosos: aqui em cima porque o post é grande demais ^^
http://pinkpimenta.blogspot.com/  http://lovetdixu.tk/
http://girlteen-s2.blogspot.com/  http://reinokawaii.blogspot.com/
(abaixo segue o tuto, continue lendo)

1. Primeiro vamos entender sobre as cores:
Background: #000000; ou Background-color: #000000; é o que usamos quanto queremos colocar um fundo apenas com cor, sem imagem. Nesta propriedade podemos acrescentar uma borda se quisermos, mas a edição nesta propriedade quase não existe, veja o exemplo abaixo:

Background-color: #000000; /* plano de fundo com cor normal /*
Background-color: transparent; /* plano de fundo transparent /*

2 .Agora Vamos entender sobre imagens
Background-image: url(URL DA IMAGEM); é o que usamos quando queremos colocar um fundo com imagem em nosso blog. Nesta propriedade usamos várias formas de edição, por exemplo: Se quisermos fazer uma imagem se repetir(repeat) várias vezes, ou só na horizontal, ou nenhuma vez faremos assim:

Background-repeat: no-repeat; /*se quiser que ela nao se repita /*
Background-repeat: repeat; /* se quiser que ela se repita /*
Background-repeat: repeat-x; /* se quiser que ela se repita apenas na horizontal /*
Background-repeat: repeat-y; /* se quiser que ela se repita apenas na vertical /*

3. E também podemos escolher a posição(position) dela, no topo, embaixo, a esquerda ..

Background-position: center; /* imagem centralizada, no centro /*
Background-position: center top; /* imagem centralizada no topo /*
Background-position: center bottom; /* imagem centralizada no rodapé /*

Background-position: left; /* imagem a esquerda /*
Background-position: left top; /* imagem a esquerda no topo /*
Background-position: left bottom; /* imagem a esquerda no rodaté /*

Background-position: right; /* imagem a direita /*
Background-position: right top; /* imagem a direita no topo/*
Background-position: right bottom; /* imagem a direita no rodapé /*

4. Podemos escolher o tamanho(size) que o backgrounde devera ter:
(obs: perde a qualidade da imagem se não alterar com precisão) 

Background-size: 100px 200px; /*  a largura e a altura que esse fundo vai ter /*

5. Ou tambem se quiser fixar o background ou deixar rolar com a pagina

Background-attachment: fixed; /* imagem fixa /*
Background-attachment: scroll; /* imagem rolando com a pagina /*

Montando um exemplo útil para usar:
Background-image: url(url da sua imagem); 
Background-position: center; /* altere pela posição que preferir /*

As principais propriedades para você usar, o resto não é muito importante, mas postei para que não aja duvidas. Bom depois deste tutorial bem comprido o melhor a fazer é descansar rs' essas são algumas propriedades do Background, existem mais, mas não acho que sejem uteis, e são meio complicadas, espero ter ajudado tenham um boa noite,bisous.

13 comentários:

  1. Realmente essas são as mais importantes, eu já sabia sobre todas, mas tem muita gente que não sabe, então foi bem útil !
    Boa noite *--*

    visita? Lovetdixu.tk ou link alternativo

    ResponderExcluir
  2. Bem foi muito útil e eu captei a mensagem ! haha^^

    www.theatrevidos.blogspot.com

    ResponderExcluir
  3. Gostei muito, eu não sabia de alguns, foi muito útil.
    girlteen-s2.blogspot.com

    ResponderExcluir
  4. Oi!

    Vim avisar que tem uma tag para você lá no meu blog.Passa lá para pegar :)

    Bjs!

    http://blaircfanfics.blogspot.com/

    ResponderExcluir
  5. *u* gostei do post, eu mesma n sabia... SUUUUPer util!
    http://fearless-girls.blogspot.com/

    ResponderExcluir
  6. amigaa preciso falar com vc, quero me explicar sobre minha falta irresponsável dessa terça...

    ResponderExcluir
  7. BlairC: obrigada vou ver *0*
    Vih pareja: Oi vih, te mandei um email ta? dai agente conversa ^^

    ResponderExcluir
  8. Frôooo, o LL tá com fan page agora. *-*
    Curte?
    pode compartilhar lá qqr coisa se quiser Q

    ResponderExcluir
  9. Oi Karol, tudo bom? Você poderia dar algumas dicas de blogs com calendário que tenham hora e etc? Mesmo que sejam daqueles bem cute cute ok? kkk Beijos!

    http://trasshygirl.blogspot.com

    ResponderExcluir
  10. Mandy: Claro ^^
    Trashy Girl: não conheço ç.ç mas vou pesquisar se achar te aviso

    ResponderExcluir
  11. (:

    me intrometendo no coment acima.
    conheço um daqueles sites xing lings
    já até tive um reloginho no blog XD

    http://www.wretch.cc/blog/ihappyu88

    só ir fuçando que encontra *-*

    bjubju

    ResponderExcluir
  12. Estamos participando de um concurso nesse blog: http://theattitudeincluded.blogspot.com/ e logo na primeira postagem tem lá Votações blog vs blog 2 , e tem uma enquete, aperte CTRL+F procure por Saladadefrutasbr, e vote nele ? estou precisando muito de sua ajuda, quero ganhar esse concurso !

    saladadefrutasbr.blogspot.com
    Segue lá e avisa q eu vou retribuir !

    ResponderExcluir
  13. Equipe Saladadefrutasbr: votei flor, estou seguindo ^^

    ResponderExcluir