StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

What's the trick to reduce background photo size?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Community Forums › Forums › Archived Forums › Design Tips and Tricks › What's the trick to reduce background photo size?

This topic is: not resolved
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 13, 2013 at 7:33 am #78790
    gregpayette
    Participant

    What's the trick to using a smaller image size (of a photo, for example) that fills the entire top area of the site?

    I'd say the way it works in Agency Pro...where even if the image is tiny it blows up. Or in minimum (which I don't use) which I would assume doesn't require a large file size.

    So, I'd upload the image via background, limit the height...and be able to place text over the top. But the way I'm doing it requires close to a 500K photo.

    Thanks for any help.

    Greg

    December 14, 2013 at 12:35 am #78995
    Sridhar Katakam
    Participant

    Can you provide the URL of your site?

    Which theme are you using?

    Genesis Tutorials | Follow me on Twitter

    December 14, 2013 at 7:27 am #79010
    gregpayette
    Participant

    Sridhar, I actually did more digging and found some great info. Coincidentally...on your site! 🙂

    All I'm wondering (and it's not specific to a single site) is how to (a) reduce image size used in a wide background (widgets or the actual site background)?

    Looks like there are some plugins and you showed some code for a specific theme (I forget which one).

    I'm using both executive and epik.

    The agency theme is the perfect example of using a smaller photo image and it blows it up to fill the entire screen.

    Wondering how that works.

    Thank you Sridhar.

    Greg

    December 16, 2013 at 12:08 am #79409
    Sridhar Katakam
    Participant

    Backstretch script is being used to make the background image take up the full page. As to the image size, the one used in Agency Pro demo site is 1600 x 1000px. Make sure you use an optimized image saved for web. In case of standard photos like the one used in Agency Pro, use jpg format at 60 quality (High) setting in Photoshop. Also if you overlay a layer on top of the photo and reduce the opacity it will look good in the background with more focus on the content.

    There's a WP plugin for Backstretch. Lets you actually have rotating full screen background images. http://wordpress.org/plugins/easy-backstretch/

    You can also just use CSS to make the body background image go full screen. See this post.

    Genesis Tutorials | Follow me on Twitter

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.