如何定義你的WordPress博客背景

轉自:仍然网


其实翻译这篇文章本来没有什么心情的,但是因为觉得这些内容都是很基本的,所以也就强忍着耐心给大家翻译了过来,特别针对需要改背景的同志。

就如我们所知道的,WordPress是一个强大的博客程序。。。(废话一些),当我们选择了一款自己感觉很不错的主题使用以后,是否觉得其背景或者是Logo部分是自己不满意的呢?但是很多朋友可能不懂得怎么样来修改,因为并不是所有使用WordPress的朋友都知道html和css代码的,所以这篇文章的一些方法可能对你有用,别错过了。

1.是需要一种颜色的背景

假如你只需要你的博客背景只有一种颜色,那么很简单,在此你只需要找到相应主题的css部分,一般是style.css,找到如下代码:

    body


  1. {
  2. background-color:#000000;
  3. }

修改其中的颜色值就可以了,如果你没有一个好的意见,不妨去这里搭配下吧。

 2.重叠出来的背景

这样的背景其实是最多见的,因为简单,所以很适用,其实还有种比较偷懒的办法,也就是用图片替换,而这里则是说明其具体意义罢了。同样是在相应主题的style.css中找到代码:

    body


  1. {
  2. background-image:url(‘http://wpcrowd.com/wp-content/themes/alexvorn/img/136.gif’)
  3. }

然后是准备一张图片,一般是png格式的:

136

最后看效果图吧:

image-repeat1

去欣赏一些例子:

Line25 Web Design Blog

line25-web-design-blog

Graphic Design & Web Design Blog

graphic-design-web-design-blog

Desizn Tech

desizn-tech

3.垂直重复一张背景图片

这个意思呢,也就是这图会从上面重复到下面,其实这意思看着有点模糊,大家看例子也就明白了。还是先在相应的主题style.css中寻找代码:

    div.content


  1. {
  2. background-image:url(‘http://www.heyjosh.com/assets/images/binder-bg.png’);
  3. background-repeat:repeat-y;
  4. }

当然,你肯定也得有张准备好的图片:

binder-bg1

最后效果图:

你也可以去他的站点看看Hey Josh

hey-josh

4.横着重复一张背景图片

这个有个地方要提醒大家,这样做背景只能有一个头部的背景,按照个人需要还应该添加一个背景色。首先还是在style.css中找到代码:

    body


  1. {
  2. background-image:url(‘http://blogspoon.s3.amazonaws.com/wp-content/themes/SpoonGraphics_V4/images/body-bg.jpg’);
  3. background-repeat:repeat-x;
  4. }

然后是准备张图片:

body-bg

最后结果:其实你也可以去他的博客欣赏,很牛逼的英国设计师。Blog.SpoonGraphics



blog

例子欣赏:

Shizucor

shizucor

Naldz Graphics

naldz-graphics

Hein Maas

hein-maas

5.只有一张大背景在Top

声明,这是我个人的说法,因为比较直接,很多朋友能够看懂,其实也是大家最喜欢的形式,只是很多朋友不知道如何做而已,这个应该是重点。找到代码:

    body


  1. {
  2. background-image: url(‘http://www.webdesignerwall.com/wp-content/themes/wdw/images/main-bg.jpg’);
  3. background-repeat: no-repeat;
  4. background-position: center top;
  5. }

没有太多的介绍,直接看例子:

Web Designer Wall

web-designer-wall

Webdesigner Depot

webdesigner-depot

Assault Blog

assault-blog

Tutorial9

tutorial9

UGSMAG

ugsmag

By Marina

by-marina

:: ilovecolors ::

ilovecolors

Starcatcher

starcatcher

6.固定的背景图片

也就是把背景固定住了。这种适合E.T人群。。。。找到代码:

    body


  1. {
  2. background-image: url(‘http://buildinternet.com/wp-content/themes/buildinternet-v2/images/watercolor-bg.jpg’);
  3. background-position: center top;
  4. background-attachment: fixed;
  5. }

去这里看例子:

Burger King Studio
Build Internet!

最后,博主找到了一些和背景图片相关的网站,希望能够对想要改背景的同学有帮助:):mrgreen:

  • Background Labs (推荐)
  • Squidfingers / Patterns
  • Fractured Sanity
  • ava7 patterns (推荐)
  • everyday icons – Patterns
  • PatternCooler (推荐)