{"id":898,"date":"2020-03-01T13:25:23","date_gmt":"2020-03-01T13:25:23","guid":{"rendered":"https:\/\/html5-chat.com\/blog\/?p=898"},"modified":"2020-03-01T13:25:25","modified_gmt":"2020-03-01T13:25:25","slug":"how-to-add-picture-to-background","status":"publish","type":"post","link":"https:\/\/html5-chat.com\/blog\/how-to-add-picture-to-background\/","title":{"rendered":"How to add picture to background ?"},"content":{"rendered":"\n

This is a common question we receive. The answer is obvious to who knows some CSS.
I recommend to read the post about customizing the design with CSS.<\/a><\/p>\n\n\n\n

For people who do not have CSS knowledge<\/h2>\n\n\n\n

First, it is really important you learn CSS since design on web is totally related to CSS. Let add a background image for you chat step by step<\/p>\n\n\n\n

  1. Prepare Picture
    You background picture should have a good size (ex: 1024x800px) and should be available somewhere on the web accessible through HTTPS
    ex:
    https:\/\/c.pxhere.com\/images\/d1\/a4\/ccfdcc5bc5f116abc867b0e9c7f7-1458005.jpg!d<\/a>
    <\/li>
  2. With your editor (notepad for instance) create a file with .css extension ex: myCss.css<\/strong><\/li>
  3. Edit this file and insert that code inside
    <\/li><\/ol>\n\n\n\n
    #container {
        background-image<\/em>: url(\"https:\/\/c.pxhere.com\/images\/d1\/a4\/ccfdcc5bc5f116abc867b0e9c7f7-1458005.jpg!d\");
        background-size<\/em>: cover<\/strong>;
    }
    #tabs .nav-tabs {
        background-color<\/em>: inherit<\/strong>;
    }
    #roomsContainer2, #usersContainer2, #friendsContainer2 {
        background-color<\/em>: inherit<\/strong>;
    }

    #footer {
        background-color<\/em>: inherit<\/strong>;
    }

    #tabs .tab-pane  {
        background-color<\/em>: inherit<\/strong>;
    }

    #tabs {
        background-color<\/em>: inherit<\/strong>;
    }
    #usersContainer {
        background-color<\/em>: inherit<\/strong>!important<\/strong>;
    }<\/pre>\n\n\n\n
    1. Save that file and upload it to YOUR server so it is accessible with HTTPS
      ex: https:\/\/www.mysite.com\/myCss.css<\/li>
    2. Go to you chatadmin<\/a>, go to config <\/strong>and then choose design\/layout<\/strong> tab and insert that link ( https:\/\/www.mysite.com\/myCss.css) in the  Link to external CSS to customize your chat <\/strong> field
      <\/li><\/ol>\n\n\n\n
      \"\"
      inside config <\/figcaption><\/figure>\n\n\n\n
      6. and that’s all: the background image should be inside your chat<\/p>\n\n\n\n
      This is also the procedure to change the design of any element of your chat. With CSS you can customize EVERYTHING you want, including the layout.<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"
      This is a common question we receive. The answer is obvious to who knows some CSS. I recommend to read the post about customizing the design with CSS. For people who do not have CSS knowledge First, it is really important you learn CSS since design on web is totally related to CSS. Let add […]<\/p>\n","protected":false},"author":1,"featured_media":909,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,1],"tags":[],"class_list":["post-898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-theme","category-uncategorized"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts\/898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/comments?post=898"}],"version-history":[{"count":8,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts\/898\/revisions"}],"predecessor-version":[{"id":916,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts\/898\/revisions\/916"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/media\/909"}],"wp:attachment":[{"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/media?parent=898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/categories?post=898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/tags?post=898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}