Proboards Background Help

[kovulion]

Hello, I'm currently hosting a Once Upon a Time RPG site and am wanting to use this image img3.wikia.nocookie.net/__cb20140313121023/once-upon-a-time-roleplay/images/5/50/Wiki-background

As a background, but it splits into three segments and I dont' want that, I want the actual size so that it fits the entire board, any suggestions? 

Link to site foreverdream.boards.net/

[The girl who waited]

So. Resize that image... Also, make sure that the button that say repeat is set to either "no repeat" (if the image is large enough) or just "repeat" and "scroll with page".

I have found that the best sized images to avoid the "seams" (splits) is something about 1900x1600 or larger. There are plenty of free resources online (picresize is one I use often) to make the image larger. Good luck. 

[Kami]

Mar 31, 2015 8:43:27 GMT -8 The girl who waited said:

So. Resize that image... Also, make sure that the button that say repeat is set to either "no repeat" (if the image is large enough) or just "repeat" and "scroll with page".

I have found that the best sized images to avoid the "seams" (splits) is something about 1900x1600 or larger. There are plenty of free resources online (picresize is one I use often) to make the image larger. Good luck. 

Yeah that's not exactly going to work.

First of all with an image that small, resizing the image larger is going to result in massive pixelation. Second of all, seeing where the image ends is entirely dependent on your browser resolution.  Sure, a 1900x1600 would work provided that the person's screen is that size or smaller (though smaller resolutions would not see the image as it's intended to be, generally speaking). But if it's larger than 1900x1600, it won't work.

There are things you can do though. If you have a large resolution image (say 1900x1600 as your example), and you use this css in your stylesheet:

body { background-size: cover; }

the image will scale to the size of the user's browser. That said, if the scaling increases higher than the image's native size, there will be pixelation and/or quality loss.

Alternatively, use a tiling background.

[The girl who waited]

Kami, I respectfully disagree, if you have any sort of graphic design skill, you can add canvas, enlarge that and still maintain image quality....It's FAR easier than resizing ALL the image codes, IMO

[Kami]

Apr 2, 2015 14:39:26 GMT -8 The girl who waited said:

Kami, I respectfully disagree, if you have any sort of graphic design skill, you can add canvas, enlarge that and still maintain image quality....It's FAR easier than resizing ALL the image codes, IMO

You can respectfully disagree all you like, but you'd be wrong. This isn't really all that subjective. I mean, do what you do but I guarantee you there is quality loss (sans using a vector image) if you blow up a small image to fit a larger canvas.

Also for what it's worth, I've been doing this for a living for about seven years, thanks.

[sneer]

Apr 2, 2015 14:39:26 GMT -8 The girl who waited said:

Kami, I respectfully disagree, if you have any sort of graphic design skill, you can add canvas, enlarge that and still maintain image quality....It's FAR easier than resizing ALL the image codes, IMO

Graphic/web design & web development student checking in, trained in photoshop, illustrator, and indesign, and you cannot resize a small image into a larger image without loss of image quality. Images are made up of pixels, and pixels cannot be scaled up like that.

This image here is the result of what you're suggesting: it's major pixalation, and is frankly awful. Anyone with any graphic design skill would know that's completely unacceptable quality.

OP: Unless you want to tile your background, there's no way you can use that specific image as your background. HOWEVER, what you can do and I don't know how committed you are, but you can take stock art of trees and create a similar image to the one that you linked and use THAT as a background.

[Kami]

And to add on to what sneer said, here is more info on raster images, which I recently explained to someone via PM:




the above image shows what happens to raster images (or type) when zoomed in or blown up (left), versus what happens to vector images / type.

even if the quality loss is acceptable or not very visible to you, it exists, full stop.



as you can see on the right, as sneer said, raster images use pixels to create whatever is displayed. the only way to get good scaling without quality loss / pixelation would be to have a vector graphic.

there are tonnes of articles on this online, so here are a few resources:

vector-conversions.com/vectorizing/raster_vs_vector.html
www.youthedesigner.com/graphic-design-tips/how-to-explain-raster-vs-vector-to-your-clients/
en.wikipedia.org/wiki/Raster_graphics

to start!

[Tumbleweed]

Great illustrations Kami as well as interesting opinions from all.

kovulion, Just to throw another alternative out there, you can set your background in a fixed position.

Admin > Themes> Advanced Styles & CSS> Visual Editor> and click on background and then tick the "fixed" box by Background Attachment. 

That will make it so whatever background you see on your screen will stay fixed so as you scroll down you shouldn't see it repeating over and over again. If you have a massive high screen resolution there still might be one repeat at the bottom but for me using a lap top (1366x768) would solve the issue.

[Kami]

Apr 6, 2015 11:54:25 GMT -8 Tumbleweed said:

Great illustrations Kami as well as interesting opinions from all.

kovulion, Just to throw another alternative out there, you can set your background in a fixed position.

Admin > Themes> Advanced Styles & CSS> Visual Editor> and click on background and then tick the "fixed" box by Background Attachment. 

That will make it so whatever background you see on your screen will stay fixed so as you scroll down you shouldn't see it repeating over and over again. If you have a massive high screen resolution there still might be one repeat at the bottom but for me using a lap top (1366x768) would solve the issue.

Tumbleweed this isn't entirely accurate. The "fixed" setting only makes it so that the background does not scroll with the content. In order to stop the background from tiling, OP would need to select the option for 'no-repeat' on the background.

OP's image is also less than 300 pixels wide, so repeating is still going to be an issue unless you stop the repeat.

Though I agree the background should stay 'fixed' as a general rule, there's really no reason to have the background scroll with a site in my opinion.

[Tumbleweed]

Apr 6, 2015 11:57:47 GMT -8 Kami said:

Apr 6, 2015 11:54:25 GMT -8 Tumbleweed said:

Great illustrations Kami as well as interesting opinions from all.

kovulion, Just to throw another alternative out there, you can set your background in a fixed position.

Admin > Themes> Advanced Styles & CSS> Visual Editor> and click on background and then tick the "fixed" box by Background Attachment. 

That will make it so whatever background you see on your screen will stay fixed so as you scroll down you shouldn't see it repeating over and over again. If you have a massive high screen resolution there still might be one repeat at the bottom but for me using a lap top (1366x768) would solve the issue.

Tumbleweed this isn't entirely accurate. The "fixed" setting only makes it so that the background does not scroll with the content. In order to stop the background from tiling, OP would need to select the option for 'no-repeat' on the background.

I did say there may be one repeat of the image depending on the persons screen resolution but I doubt you'd see 4 repeats like now so maybe not totally solved but definitely better than what you see now with the background scrolling with the page. Just wanted to offer another option to try.

[Kami]

Apr 6, 2015 12:04:33 GMT -8 Tumbleweed said:

Apr 6, 2015 11:57:47 GMT -8 Kami said:

Tumbleweed this isn't entirely accurate. The "fixed" setting only makes it so that the background does not scroll with the content. In order to stop the background from tiling, OP would need to select the option for 'no-repeat' on the background.

I did say there may be one repeat of the image depending on the persons screen resolution but I doubt you'd see 4 repeats like now so maybe not totally solved but definitely better than what you see now with the background scrolling with the page. Just wanted to offer another option to try.

The image you are currently viewing is not the one the OP was using when the thread was originally made:



^ This is the image my prior reply was based on as I did not check the site again since.

[Tumbleweed]

Apr 6, 2015 12:12:55 GMT -8 Kami said:

Apr 6, 2015 12:04:33 GMT -8 Tumbleweed said:

I did say there may be one repeat of the image depending on the persons screen resolution but I doubt you'd see 4 repeats like now so maybe not totally solved but definitely better than what you see now with the background scrolling with the page. Just wanted to offer another option to try.

The image you are currently viewing is not the one the OP was using when the thread was originally made:



^ This is the image my prior reply was based on as I did not check the site again since.

I understand Kami, I just went directly to his site to see exactly what was happening and the image was already enlarged so was simply going from there. Your gave sage advice considering the size of the image he linked to so now we can just leave it up to him.