WordPress站点添加背景图的两种方法

投稿   懿古今  2017-11-14 07:28:26  105 人阅读  39 条评论

投放广告联系   诚邀合作伙伴   赞助我们   垃圾评论惩罚

WordPress 主题大多数都自带有添加背景图功能,不过部分主题为了可能觉得添加一张大大的背景图会拖慢网页加载速度,所以就没有集成这个更换背景图功能,比如 Nana主题Blogs主题。不过既然有用户需要,那么今天就跟大家说一说如何为我们的 WordPress 站点添加背景图。

WordPress站点添加背景图的两种方法 WordPress 第1张

Blogs主题添加背景后的效果图

方法一:直接修改 style.css 文件

这个方法很简单,只需要将以下代码添加到当前主题的 style.css文件即可。

  1. body {
  2.     background-imageurl(http://localhost/wordpress/wp-content/uploads/2017/11/timg.jpg);
  3.     background-positioncenter center;
  4.     background-size: cover;
  5.     background-repeatno-repeat;
  6.     background-attachmentfixed;
  7. }

记得修改代码中的图片为自己的图片地址,图片大小建议为大图片,比如1920X1080。这个方法直接适用于 Nana主题和 Blogs主题,其他主题也同样适用。

方法二:在后台显示『背景』按钮

确保当前主题的 body 标签中有 body_class() 函数,没有就按方法一的方法直接添加(Nana主题和 Blogs主题可忽略此步骤)

将以下代码添加到当前主题的 functions.php 文件当中

  1. //添加背景按钮
  2. add_theme_support( 'custom-background');

此时,在我们 WordPress 站点后台 >> 外观 >> 背景 >> 背景图像 >> 添加背景图,然后设置为填满屏幕并保存发布即可。

WordPress站点添加背景图的两种方法 WordPress 第2张

如果文章对你有帮助,请赞赏支持作者继续创作!

历史上的今天:

文章标签: ,   ,  
原文地址:https://yigujin.cn/1385.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 懿古今 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
淘宝天猫无门槛专享优惠券

 发表评论


  1. 姜哥说
    姜哥说 【状元】 @回复

    一般在body改,background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    能否注解下

    • 懿古今
      懿古今【村长】2017-11-15 20:41  回复

      @姜哥说这些比较基本的CSS,想要了解含义和左右,直接百度比留言更快,百度说得更加清楚

  2. 值品
    值品 【小白】 @回复

    用了第一种方法,小图,然后重复平铺,不错。

  3. 灵异世界网
    灵异世界网 【进士】 @回复

    有背景可大气。

  4. 在线看小说
    在线看小说 【进士】 @回复

    我也想添加个背景

  5. 黎叔
    黎叔 【举人】 @回复

    两种我都会都亲自操作过,啊哈哈

  6. 小萝博客
    小萝博客 【状元】 @回复

    这个可以换一张小图,类似于某宝店铺的背景图

  7. 清秋暖冬
    清秋暖冬 【书童】 @回复

    已添加,第二个不适用我现在的主题

  8. 好会吃
    好会吃 【小白】 @回复

    已经用上了,感谢博主 [给力]

  9. 奇闻趣事
    奇闻趣事 【秀才】 @回复

    这个博文很有参考价值,谢谢博主分享

  10. 小白蜀黍网赚
    小白蜀黍网赚 【小白】 @回复

    感谢分享,很实用

  11. 夏日博客
    夏日博客 【进士】 @回复

    还是直接在公众CSS样式中添加比较好,如果在WP背景中添加会在每个页面加载一次背景图片。

    • 懿古今
      懿古今【村长】2017-11-14 15:33  回复

      @夏日博客还有这种说法?看来还是直接在style中添加比较好,想要更换,直接后台编辑这个文件的图片地址即可。

  12. 龙笑天
    龙笑天 【状元】 @回复

    特殊日子用上适合的背景图片,还是能为网站增色很多的哦~

  13. 春熙路
    春熙路 【尚书】 @回复

    好久好久都没尝试折腾了

  14. saisai
    saisai 【小白】 @回复

    不错,学习了。 [赞] 需要的话,关键是背景图片要选好,符合网站特色就更好了。 [思考]

    • 懿古今
      懿古今【村长】2017-11-14 15:36  回复

      @saisai选择一张合适的图片真的不容易,所以我一般不折腾背景

  15. 我爱动感单车网
    我爱动感单车网 【尚书】 @回复

    这个看个人喜欢了,有人喜欢这样显得酷炫,而有人觉得花哨和影响了速度。

  16. 米扑博客
    米扑博客 【书童】 @回复

    恩,有背景图比较好看 [太开心]

  17. 重蔚自留地
    重蔚自留地 【书童】 @回复

    我觉得方法一可以学习下。以后也许会用的到

    • 懿古今
      懿古今【村长】2017-11-14 15:40  回复

      @重蔚自留地其实方法一更简单,直接后台》外观》编辑,添加代码,如果想换图片只需要修改里面的图片地址即可,挺好的

  18. 雅兮网
    雅兮网 【尚书】 @回复

    还是有不少网站是启用背景图片的,特别是有时候搞节日气氛

  19. 99八十一
    99八十一 【进士】 @回复

    我只在登陆界面设置背景图,只有自己能看到 [嘻嘻]

    • 懿古今
      懿古今【村长】2017-11-14 15:51  回复

      @99八十一[赞] 孤芳自赏的我就懒得折腾的,所以后台登录和后台的我都不折腾,反正只是自己看而已

  20. 明月登楼
    明月登楼 【王爷】 @回复

    这个背景其实能用上的时候真的不多!

  21. 万正远洋
    万正远洋 【小白】 @回复

    不错,有机会找几个合适的背景试试去!

  22. 网赚乎
    网赚乎 【举人】 @回复

    添加背景图会让页面漂亮,但也会让加载时间延长,这个取舍在于自己看重哪一方面。

  23. 辩论吧
    辩论吧 【尚书】 @回复

    背景图用的不多,加了反而会影响体验

  24. 沈唁志
    沈唁志 【秀才】 @回复

    主题自带了 但是也用不着

  25. 阿财博客
    阿财博客 【举人】 @回复

    这个可以学习一下,有点用

  26. 靠谱学生兼职网
    靠谱学生兼职网 【尚书】 @回复

    一般很少要背景图,会耗流量的吧,每个访问都加载

  27. 里维斯社
    里维斯社 【进士】 @回复

    背景图影响网站响应速度吧,暂时还是先不考虑背景了