Question

我正在使用带有Kleo主题和Buddypress的WordPress。

我想在单个模板页面（注册页面）上设置背景图像。

现有的CSS很大，我不知道要改变哪些位，但是当它被改变时会导致所有页面都发生变化。

我尝试过设置背景颜色background-color:#f00;，但它可以改变所有网站页面的颜色。

当我使用background-image: url("gen-up-background.png") !important;}时它没有效果。

我想在此页面上设置背景图片：

Page to edit

我不确定我应该使用什么CSS来定位此页面？
上面是正确的CSS来显示图像吗？

现有的CSS：

＆＃13;

.main-color hr, .main-color.container-wrap, #footer.main-color, #socket.main-color, .main-color.social-header, .main-color .top-menu .tabdrop::before, .main-color #top-social .tabdrop::before, .main-color #top-social, .main-color .top-menu > ul, .main-color .kleo-main-header, .main-color .template-page, .main-color .sidebar-right, .main-color .sidebar-left, .main-color .sidebar-extra, .main-color .sidebar-main, .main-color .hr-title, .main-color .nav-tabs, .main-color .nav-pills > li > a, .main-color .kleo-tabs .nav .open > a.dropdown-toggle, .main-color .kleo-tabs .nav .open > a.dropdown-toggle:hover, .main-color .kleo-tabs .nav .open > a.dropdown-toggle:focus, .main-color .kleo-tabs .tabdrop .dropdown-menu, .main-color .dropdown-menu, .main-color .kleo-toggle-menu .kleo-toggle-submenu::before, .main-color #ajax_search_container::before, .main-color #top-social li a, .main-color .top-menu li > a, .main-color .pagination > li > a, .main-color .pagination > li > span, .main-color .callout-blockquote blockquote, .main-color .masonry-listing .post-content, .main-color .list-divider li, .main-color #ajax_search_container, .main-color .form-control, .main-color .feature-item:hover .feature-icon, .main-color .bordered-icons .feature-item.default-icons-size .feature-icon, .main-color .bordered-icons .feature-item.big-icons-size .feature-icon, .main-color input[type="text"], .main-color input[type="password"], .main-color input[type="date"], .main-color input[type="datetime"], .main-color input[type="datetime-local"], .main-color input[type="month"], .main-color input[type="week"], .main-color input[type="email"], .main-color input[type="number"], .main-color input[type="search"], .main-color input[type="tel"], .main-color input[type="time"], .main-color input[type="url"], .main-color textarea, .main-color .activity-timeline, .main-color #buddypress div.item-list-tabs ul li a span, .main-color #buddypress button, .buddypress .main-color a.button, .main-color #buddypress a.button, .main-color #buddypress input[type="submit"], .main-color #buddypress input[type="button"], .main-color #buddypress input[type="reset"], .main-color #buddypress ul.button-nav li a, .main-color #buddypress div.generic-button a, .main-color.bp-full-width-profile div.generic-button a, .main-color #buddypress .comment-reply-link, .main-color #buddypress #whats-new, .main-color #buddypress div.message-search, .main-color #buddypress div.dir-search, .main-color #buddypress .activity-read-more, .main-color #bp-login-widget-submit, .main-color .bbp_widget_login .button.user-submit, .main-color #wp-calendar caption, .main-color .wp-caption, .main-color .widget .woocommerce-product-search, .main-color .widget form#bbp-search-form > div, .main-color .page-content #searchform > div, .main-color .widget_search #searchform > div, .main-color #bp-login-widget-form input[type="text"], .main-color #bp-login-widget-form input[type="password"], .main-color .bbp-login-form input[type="text"], .main-color #buddypress #friend-list .friend-inner-list, .main-color #buddypress #member-list .member-inner-list, .main-color #buddypress #members-list .member-inner-list, .main-color #buddypress #groups-list .group-inner-list, .main-color #buddypress div#item-nav .tabdrop .dropdown-menu, .main-color #buddypress div.profile, .main-color #buddypress #friend-list div.action .generic-button a.send-message, .main-color #buddypress #member-list div.action .generic-button a.send-message, .main-color #buddypress #members-list div.action .generic-button a.send-message, .main-color #buddypress form.standard-form .left-menu img.avatar, .main-color .checkbox-mark, .main-color #buddypress div#group-create-tabs ul li.current a, .main-color .rtmedia-container #rtMedia-queue-list tr td, .main-color #buddypress .standard-form textarea, .main-color #buddypress .standard-form input[type="text"], .main-color #buddypress .standard-form input[type="color"], .main-color #buddypress .standard-form input[type="date"], .main-color #buddypress .standard-form input[type="datetime"], .main-color #buddypress .standard-form input[type="datetime-local"], .main-color #buddypress .standard-form input[type="email"], .main-color #buddypress .standard-form input[type="month"], .main-color #buddypress .standard-form input[type="number"], .main-color #buddypress .standard-form input[type="range"], .main-color #buddypress .standard-form input[type="search"], .main-color #buddypress .standard-form input[type="tel"], .main-color #buddypress .standard-form input[type="time"], .main-color #buddypress .standard-form input[type="url"], .main-color #buddypress .standard-form input[type="week"], .main-color #buddypress .standard-form select, .main-color #buddypress .standard-form input[type="password"], .main-color #buddypress .dir-search input[type="search"], .main-color #buddypress .dir-search input[type="text"], .main-color .bbp-pagination-links a, .main-color .bbp-pagination-links span, .main-color #bbpress-forums li.bbp-body ul.forum, .main-color #bbpress-forums li.bbp-body ul.topic, .main-color form#new-post, .main-color #bbpress-forums .bbp-form input[type="text"], .main-color .quicktags-toolbar, .main-color .wp_themeSkin tr.mceFirst td.mceToolbar, .main-color .quicktags-toolbar input, .main-color .wp-editor-area, .main-color .rtmedia-container .rtmedia_next_prev a, .main-color .rtmedia-activity-container .rtmedia_next_prev a, .main-color #buddypress div.rtmedia-activity-container .rtmedia_next_prev a, .main-color #rtm-gallery-title-container #rtm-media-options, .main-color #rtMedia-upload-button, .main-color #buddypress #item-body .rtmedia-item-comments .rt_media_comment_form textarea, .main-color .rtmedia-container .rtmedia-editor-main dl.tabs dd > a, .main-color .rtmedia-activity-container .rtmedia-editor-main dl.tabs dd > a, .main-color #buddypress div.rtmedia-activity-container .rtmedia-editor-main dl.tabs dd > a, .main-color .rtmedia-container .imgedit-wrap div.imgedit-settings .imgedit-group, .main-color #buddypress .rtmedia-container textarea, .main-color #buddypress .rtmedia-container input[type="text"], .main-color #buddypress .rtmedia-container input[type="text"], .main-color #buddypress .rtmedia-container input[type="color"], .main-color #buddypress .rtmedia-container input[type="date"], .main-color #buddypress .rtmedia-container input[type="datetime"], .main-color #buddypress .rtmedia-container input[type="datetime-local"], .main-color #buddypress .rtmedia-container input[type="email"], .main-color #buddypress .rtmedia-container input[type="month"], .main-color #buddypress .rtmedia-container input[type="number"], .main-color #buddypress .rtmedia-container input[type="range"], .main-color #buddypress .rtmedia-container input[type="search"], .main-color #buddypress .rtmedia-container input[type="tel"], .main-color #buddypress .rtmedia-container input[type="time"], .main-color #buddypress .rtmedia-container input[type="url"], .main-color #buddypress .rtmedia-container input[type="week"], .main-color #buddypress .rtmedia-container select, .main-color #buddypress .rtmedia-container input[type="password"], .main-color .kleo-toggle-menu .kleo-toggle-submenu, .main-color .kleo-toggle-menu a.remove, .main-color .woocommerce .kleo-cart-totals .totals-wrap, .main-color .kleo-toggle-menu .minicart-buttons .btn-default, .main-color .kleo_ajax_results h4, .main-color .ajax_view_all, .main-color #articles-dir-list article.article-container

＆＃13;

Answer 1

我很确定您可以使用网页ID在WordPress上设置特定页面的样式。

例如：

.page-id-1 body {
    background-image: url("gen-up-background.png");
}

以上代码会将ID为1的页面背景设置为提供的图像。

让我知道你是怎么过的。

Answer 2

主题有自己的特色在这里这个主题遵循bootrap col结构。我管理panle你有Visual编辑器去那里并设置背景颜色。对不起，但我在css上很穷。

 .page-id-2833 body #buddypress{
     background-image: url("gen-up-background.png");
    }

案例2：找到并添加此代码检查元素。我已经完成了它的工作。

<div class="template-page col-sm-12 tpl-no" style="
    background-image: url(&quot;http://imagecolony.com/wp-content/uploads/2016/10/Abstract-Background-47D.jpg&quot;);">

案例3： 请先试用，

您的主题有Visual Composer，

https://www.youtube.com/watch?v=_zvLtpksu1o

仅在单个模板页面上设置背景图像

2 个答案: