Community Forums › Forums › Archived Forums › General Discussion › Prose Background Image Giving Me Fits
Tagged: background, image, Prose
- This topic has 9 replies, 2 voices, and was last updated 9 years, 7 months ago by UmpquaWeb.
August 14, 2013 at 7:40 am #56281
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.
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
I can't see your css file properly but somewhere you have something like this:
background-position: left top;
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.
August 14, 2013 at 9:01 am #56308
background-position: left top;
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
How large is the large image? How many pixels wide?
August 14, 2013 at 9:49 am #56327
It is 1703 x 1127 but only 720 kbAugust 14, 2013 at 9:50 am #56328
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.
August 14, 2013 at 11:09 am #56345
It looks fine, but the real question is how you uploaded it.August 14, 2013 at 1:05 pm #56369
In the Dashboard:
Remove existing background
My Display options:
Repeat: No repeat
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.)
August 14, 2013 at 1:58 pm #56386
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
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.
- The forum ‘General Discussion’ is closed to new topics and replies.