Prose Background Image Giving Me Fits

[UmpquaWeb]

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/

[eamonmoriarty]

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

[UmpquaWeb]

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.

[eamonmoriarty]

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

---

Eamon Moriarty
EM Dzine

[UmpquaWeb]

It is 1703 x 1127 but only 720 kb

[eamonmoriarty]

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

[UmpquaWeb]

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

[eamonmoriarty]

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

[UmpquaWeb]

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.

[UmpquaWeb]

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