CSS 記事に背景画像＋新しい記事にNEW!マーク

記事に背景画像 をチョット応用

前に書いた新しい記事にNEW!マークをつけちゃおう を使って

公開24時間以内の新しい記事に背景をつけてみます

※24時間たてば何もしなくても消えます

少しウザそうですがわかりやすくこんな画像を繰り返して使ってみます

記事が読みにくくならないような画像を使ってください

もちろん繰り返さないで1つの画像だけでもOKです

いつものようにCSSの最後に

/*NEW 記事の背景画像*/
.entry.new{
background-image:url(画像のURL);
background-repeat:repeat-y;
}

NEW 画像を記事のジャマになりにくい右側に表示します

/*NEW 記事の背景画像*/
.entry.new{
background-image:url(画像のURL);
background-repeat:repeat-y;

background-position:right top;
}

background-repeat:　

background-position:

は、自由に設定下さい

.entry {background-image:url(画像のURL);}/*NEWの記事背景*/
.entry .contents {background-image:url(画像のURL);}/*記事の背景*/
あるいは
.entry {background-image:url(画像のURL);}/*記事の背景*/
.entry .contents {background-image:url(画像のURL);}/*NEWの記事背景*/
にすると記事の背景にいつも背景画像が表示されていて24時間以内は＋NEW画像も表示されます

.entry {background-image:url(画像のURL);}/*普段の記事背景*/
.entry.new {background-image:url(画像のURL);}/*NEWの記事背景*/
にすると24時間以内はNEW画像が表示されて、それ以後は普段の記事背景が表示されます

↓わかりにくいですが白字のNEW透過処理画像を使って

.entry{
width:97%;
border:3px solid #00ff00;
background-color:#ccffcc;
}
.entry.contents{
background-image:url(画像のURL);
background-position: 90% 80%;
background-repeat:no-repeat;
}
.entry.new{
background-image:url(画像のURL);
background-repeat:repeat-y;
}
.contents #advertising2{
background:none !important;
}

※.entry{
　background-image:url(画像のURL);
　}

　で、記事の背景をすでに設定している場合はコレより後ろに加えてください