• Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
v3.5.2 Latest
Buy Hosting

Add background image to forum landing page

Scheduled Pinned Locked Moved Feature Requests
6 Posts 3 Posters 3.2k Views
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • meetdilipM Offline
    meetdilipM Offline
    meetdilip GNU/Linux
    wrote on last edited by
    #1

    Can this be done with current set up ? I would like add a jpg/png image to it.

    1 Reply Last reply
    0
  • psychobunnyP Offline
    psychobunnyP Offline
    psychobunny
    wrote on last edited by
    #2

    You could add a background image via the custom CSS tab. Maybe upload an image to your server (or on imgur for example), and then paste something like

    body {
      background: url('//i.imgur.com/YibieyO.jpg');
    }
    

    lmao, try the above and see what happens XD

    trevorT meetdilipM 2 Replies Last reply
    2
  • trevorT Offline
    trevorT Offline
    trevor Plugin & Theme Dev Anime Lovers GNU/Linux
    replied to psychobunny on last edited by trevor
    #3

    @psychobunny said:

    You could add a background image via the custom CSS tab. Maybe upload an image to your server (or on imgur for example), and then paste something like

    body {
      background: url('//i.imgur.com/YibieyO.jpg');
    }
    

    lmao, try the above and see what happens XD

    You can alternatively do it this way (which is what I prefer);

    background-image: url('http://i.imgur.com/xUpBlph.jpg');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    

    Provided you have an image that is high quality as well.

    1 Reply Last reply
    1
  • meetdilipM Offline
    meetdilipM Offline
    meetdilip GNU/Linux
    wrote on last edited by
    #4

    Does is slow down page loading ? It is already at 6 seconds.

    trevorT 1 Reply Last reply
    0
  • meetdilipM Offline
    meetdilipM Offline
    meetdilip GNU/Linux
    replied to psychobunny on last edited by
    #5

    @psychobunny said:

    You could add a background image via the custom CSS tab. Maybe upload an image to your server (or on imgur for example), and then paste something like

    body {
      background: url('//i.imgur.com/YibieyO.jpg');
    }
    

    lmao, try the above and see what happens XD

    he he

    1 Reply Last reply
    0
  • trevorT Offline
    trevorT Offline
    trevor Plugin & Theme Dev Anime Lovers GNU/Linux
    replied to meetdilip on last edited by
    #6

    @meetdilip said:

    Does is slow down page loading ? It is already at 6 seconds.

    Hmm, 6 seconds isn't good nor is it bad. Where are you getting this number by the way?

    So yeah, it just depends really on what you're trying to accomplish. If you optimize delivery by compressing the image and using a CDN service (optional), you should be okay. Make sure the image isn't huge or more than 2000px in size. Remember the larger the image, the longer it takes for the end user to download.

    1 Reply Last reply
    1

Copyright © 2023 NodeBB | Contributors
  • Login

  • Don't have an account? Register

  • Login or register to search.
Powered by NodeBB Contributors
  • First post
    Last post
0
  • Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development