Prose Background Image Giving Me Fits

Community Forums Forums General Discussion Prose Background Image Giving Me Fits

This topic is: not resolved

This topic contains 9 replies, has 2 voices, and was last updated by  UmpquaWeb 8 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #56281

    UmpquaWeb
    Participant
    Post count: 13

    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/
    #56297

    eamonmoriarty
    Participant
    Post count: 148

    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

    #56308

    UmpquaWeb
    Participant
    Post count: 13

    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.

    #56315

    eamonmoriarty
    Participant
    Post count: 148

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


    Eamon Moriarty
    EM Dzine

    #56327

    UmpquaWeb
    Participant
    Post count: 13

    It is 1703 x 1127 but only 720 kb

    #56328

    eamonmoriarty
    Participant
    Post count: 148

    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

    #56345

    UmpquaWeb
    Participant
    Post count: 13

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

    #56369

    eamonmoriarty
    Participant
    Post count: 148

    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

    #56386

    UmpquaWeb
    Participant
    Post count: 13

    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.

    • This reply was modified 8 months ago by  UmpquaWeb.
    • This reply was modified 8 months ago by  UmpquaWeb. Reason: Made additional observation that was important to share
    • This reply was modified 8 months ago by  UmpquaWeb.
    • This reply was modified 8 months ago by  UmpquaWeb. Reason: Made additional observation that was important to share
    #56439

    UmpquaWeb
    Participant
    Post count: 13

    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.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.