Como colocar dois background no blog?

Oii!

Que tal deixar seu blog mais interessante colocando dois background diferentes? Vamos lá?

Olá! Aqui já foi um post bem atrativo, porem, infelizmente com a perda das imagens hospedadas no Tinypic.com, não tenho mais os prints do design do blog em tempo real.

(Post atualizado em 14/09/2021)

Procure por:

body }

irá aparecer assim:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

Código completo:

/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

html body .region-inner {
  min-width: 0;
  max-width: 100%;
  width: auto;
}

a:link {
  text-decoration:none;
  color: $(link.color);
}

a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration:none;
  color: $(link.hover.color);
}

.content-outer .content-cap-top {
  height: ;
  background: transparent $(content.imageBorder.top) repeat-x scroll top center;
}

.content-outer {
  margin: 0 auto;
  padding-top: $(content.margin);
}

.content-inner {
  background:  ;
  background-position: left -$(content.imageBorder.top.space);
  background-color: $(content.background.color);
  padding: $(content.padding);
}

.main-inner .date-outer {
  margin-bottom: 2em;
}

e o que estiver marcado de roxo substitua por este código:

body, html {
height: 670px;
margin: 0;
padding: 0;  }
body {
font: $(body.font);
color: $(body.text.color);
background:#efefef url("url da imagem") no-repeat  scroll top; }
html {
background:#efefef url("url da imagem") repeat scroll; }
html body .content-outer {
min-width: 0;
max-width: 100%;
width: 100%;
}

ficando assim:

/* Content
----------------------------------------------- */
body, html {
height: 670px;
margin: 0;
padding: 0;  }
body {
font: $(body.font);
color: $(body.text.color);
background:#efefef url("url da imagem") no-repeat  scroll top; }
html {
background:#efefef url("url da imagem") repeat scroll; }
html body .content-outer {
min-width: 0;
max-width: 100%;
width: 100%;
}

o que está marcado de rosa fucsia será o tamanho da altura do banner (confira o valor da altura do seu banner e coloque o mesmo pra poder ficar adequado)
o que está marcado de azul será a cor do fundo
o que está marcado de vermelho, você irá colocar a url da imagem.


Créditos á Cherry Bomb

Obrigada!
Beijos