• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

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

Prose Background Image Giving Me Fits

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.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Prose Background Image Giving Me Fits

This topic is: not resolved

Tagged: background, image, Prose

  • This topic has 9 replies, 2 voices, and was last updated 9 years, 7 months ago by UmpquaWeb.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 14, 2013 at 7:40 am #56281
    UmpquaWeb
    Participant

    I purposely purchased a large image for the background but I can't get it to work properly.

    If I add a smaller image to Appearance > Background, it tiles it and you can see the seams.
    If I add the larger image to Appearance > Background, it looks like it's under a microscope (it's an image of oats)
    If I add it the the style.css file, it doesn't show up at all.

    http://umpquawebdesign.com/oats/

    I currently have a smaller image (409 x 271) tiled.

    I know I could try my hand at making it a repeatable image, but I thought I wouldn't have to do that if I bought a large image.

    http://umpquawebdesign.com/oats/
    August 14, 2013 at 8:34 am #56297
    eamonmoriarty
    Participant

    I can't see your css file properly but somewhere you have something like this:

    body.custom-background
    {
    background-image: url("http://umpquawebdesign.com/oats/wp-content/uploads/2013/08/sample-bg.jpg");
    background-repeat: repeat;
    background-position: left top;
    background-attachment: scroll;
    }

    You need to replace 'sample-bg.jpg' with your full size image (having uploaded it) and
    replace 'background-repeat: repeat;' with 'background-repeat: no-repeat;' and either
    'background-position: center;' or remove that line altogether.

    If it looks like it’s under a microscope it probably means that it is a smallish image being stretched to fill the browser window.
    Your image should be probably at least 1600px wide to fit most windows but to be sure that it fits higher resolution screens you would need to put
    background-size: 100% in the css file.

    The downside of using one large image as a background is that the file size will be much larger causing the site to load slower. Ideally you should reduce the file size of the image as much as possible without losing too much quality.


    Eamon Moriarty
    EM Dzine

    August 14, 2013 at 9:01 am #56308
    UmpquaWeb
    Participant

    body.custom-background
    {
    background-image: url(“http://umpquawebdesign.com/oats/wp-content/uploads/2013/08/sample-bg.jpg”);
    background-repeat: repeat;
    background-position: left top;
    background-attachment: scroll;
    }

    That is all created by uploading the image in Appearance > Background. If I say no-repeat, I just get a small image. If I upload the full size, I get the magnified look...as you say, it is stretching the image, but since it's large, it shouldn't need to stretch.

    Prose is a different animal. It gives several options for design changes and they seem to overrule the style.css file. It's frustrating because I don't know where to look to make the changes I want. I could maybe use !important but I think that's lazy coding and hard to track down later on if you need to make a change.

    August 14, 2013 at 9:18 am #56315
    eamonmoriarty
    Participant

    How large is the large image? How many pixels wide?


    Eamon Moriarty
    EM Dzine

    August 14, 2013 at 9:49 am #56327
    UmpquaWeb
    Participant

    It is 1703 x 1127 but only 720 kb

    August 14, 2013 at 9:50 am #56328
    eamonmoriarty
    Participant

    It happens that one of the websites I am currently developing is using Prose.
    I have temporarily used a 1920 X 1200 background image to see how it works and it seems fine to me.
    See at http://www.therunningpen.com. (I will be removing the background shortly)
    Does that look OK?

    Which leaves me guessing that your image is not big enough.
    Edit: Just saw your last post. That image should be OK.


    Eamon Moriarty
    EM Dzine

    August 14, 2013 at 11:09 am #56345
    UmpquaWeb
    Participant

    It looks fine, but the real question is how you uploaded it.

    August 14, 2013 at 1:05 pm #56369
    eamonmoriarty
    Participant

    In the Dashboard:
    Themes/Prose/Background
    Remove existing background
    Upload
    My Display options:
    Position: Center
    Repeat: No repeat
    Attachment: Fixed

    That's probably what you did already.
    Can you do it again and let us see, in case it's something like a cache issue.
    The only other thing I can think of is perhaps you made some changes to the CSS file.
    Have you done the usual disabling plugins etc to check for conflict? (I think its unlikely to be that.)


    Eamon Moriarty
    EM Dzine

    August 14, 2013 at 1:58 pm #56386
    UmpquaWeb
    Participant

    Yes, it is what I did already. That's how I get the magnified image. (I didn't use the fixed, I used scroll, but then the image is shorter than the page).

    Take a look.

    And actually, the image does not take up the whole preview area.

    Wait a minute...is it remotely possible that I need to update Genesis?

    Nope, updating had no effect.

    August 14, 2013 at 6:27 pm #56439
    UmpquaWeb
    Participant

    Well, I decided to make a tileable image and tile it. I'm not real good at it, but it's better than the results I was getting.

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble