Dara theme background size

  • Unknown's avatar
    dpelaezpogi · Member ·

    Hi

    I’m currently using Dara theme on our website.
    The recommended background size is 1180px wide.

    Just like to know the following size so we can create the correct background image.

    1) What is the width of the center page – where all the web contents are shown (e.g. images, text etc).
    2) What is the side (left and right) panel size?

    Regards
    Dman

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Hi Dman, that actually depends on what screen size you’re using. At max width on a large screen, the “main” are is 1180px wide. The sidebar, when it’s enabled, is 250px wide. And the left content area is 675px wide. The site background is all of the space to the sides of that, so I recommend using a test image just so you can see what changes.

    If you use a smaller screen, those numbers get scaled down.

    For what it’s worth, you can use your browser’s “inspect element” tool to determine these numbers with different screen widths and what not. We have a how-to here:
    https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

  • Unknown's avatar
    dpelaezpogi · Member ·

    Hi Supernovia

    Thanks for the update. Just like to clarify the items below as I’m new to WordPress.

    The “main” is the current web content area colour white space is 1180px on my main website, is this correct?

    If I enable the sidebar, the size of this is 250px wide and left (which will be the main area is reduce to 675px wide)? If my calculation is correct this added together is 925 px wide. What happens to the remaining 255px? Does it get added to the left and right black area which is currently on my main page?

    Regards
    Dman

  • kokkieh · Staff ·

    You can find the dimensions for your theme at the bottom of the theme description page, here:

    https://wordpress.com/theme/dara

    The main area @supernovia refers to is the entire white background area/featured image, so everything that’s inside the black background.

    The actual content area column is is 675px if you have a sidebar visible, or 778px in the full-width view.

    What happens to the remaining 255px? Does it get added to the left and right black area which is currently on my main page?

    Any remaining space appears as “white-space” on your site, empty space between elements for the sake of readability and aesthetics.

  • Unknown's avatar
    dpelaezpogi · Member ·

    Hi Kokkieh

    Thanks for the update. The 1180 px wide size now make sense.

    So if I want to fill the black background left and right (i.e. background image), what would be the recommended image size? The header image can stay.

    I understand @supernovia mentioned about mobile & tablet screen size. Happy for it to be cut off since it won’t fit. Just aiming to target PC users (both MAC and Windows). From a 13″ to 24″/27″ screen or monitor size.

    Regards
    Dman

  • kokkieh · Staff ·

    There’s no recommended size for a background image, as the “background size” of the site will depend on the size screen someone would be using to view your site. New ultra-wide monitors are up to over 5000 pixels wide. Uploading any image that big to a website is not a great idea, though, as an image that size will take very long to load, and eat up the bandwidth of anyone viewing your site on a metered internet connection.

    Additionally, if you use a single image and center/stretch it, only the right and left edges will stick out behind the body section of the website.

    For background images, best practice is to use something neutral, rather than an image with a clear subject. Then you can use a smaller image, no bigger than, say 800px, and set it to repeat so it forms a pattern in the background instead.

  • Unknown's avatar
    dpelaezpogi · Member ·

    Thanks for the update, this all makes sense now.

  • The topic ‘Dara theme background size’ is closed to new replies.