full size image background

[MyTime]

Hello, everyone, My goal is too get my full-sized background image too look good on all types of screen resolutions and monitor sizes.
This code I got below is sopouse too respond too the users web browser too determine what background size too use. I need help on what sizes I should make the height and width, Any help would be appreciated because the images is off on my site. Idk if this code is off too, because i can't test it for other monitors right now.Thanks for any tips and help.

body
{
   background: url(../images/theme/bg.png);
   margin: 0 auto;
   padding: 0;
}
@media (max-width: 1199px) {
   body
   {
      background: url(../images/theme/bgx1999.png);
   }
}
@media (max-width: 991px) {
   body
   {
      background: url(../images/theme/bgx991.png);
   }
}
@media (max-width: 767px) {
   body
   {
      background: url(../images/theme/bgx767.png);
   }
}

[Gwenwyfar]

You can "emulate" different size monitors with ff (not sure if chrome has them) dev tools in "responsive design mode" button at the right, while inspecting anything.
Zooming in/out also works to a degree depending on what you want to test, like how far your background goes for larger monitors.
Resizing your browser window works too, but it more annoying and you can't know exactly the size you're in without inspecting all the time.

As for your background: Is it the same image for every screen size, just different sizes? If so you could just make it scale, and use different images just to save bytes downloaded for smaller devices. Also, what kind of background is it? An image to keep proportions or something to stretch all over your background?

[MyTime]

I'm confused on all this, It was originally an .eps file, but i have too have it saved as a .PNG too work on my theme as for as I know, Could you help me with make it work for all screen sizes? I'll follow your steps if and change the image size if that's what i need too do

[Gwenwyfar]

Just tell me what kind of background is it, and what do you want to do with it.

[MyTime]

It's a full sized background, the whole border is leafs, and in the center is just green backdrop background looking. I could pm an example of it. I'm just trying too have it fill out perfectly the whole exterior border of the site

[Gwenwyfar]

Alright, so just trying to use different sizes is not gonna work unless you target all monitor sizes out there.

For the specific image you have right now the only way is to just stretch it.

You can just use this:

body
{
   background: url(../images/theme/bg.png) no-repeat 100% 100%;
   margin: 0 auto;
   padding: 0;
}
@media (max-width: 1199px) {
   body
   {
      background-image: url(../images/theme/bgx1999.png);
   }
}
@media (max-width: 991px) {
   body
   {
      background-image: url(../images/theme/bgx991.png);
   }
}
@media (max-width: 767px) {
   body
   {
      background-image: url(../images/theme/bgx767.png);
   }
}

An alternative if you wanted to keep the leaves size always the same is to use a border-image repeating around, but that wouldn't work for the image you have now. It can be a little heavier too, the stretching should look good enough for that background.

[MyTime]

I tried the code and it enlarged the background too big for my screen. Please help

[Gwenwyfar]

My bad, for some reason the browser interprets the position of "100% 100%" differently when you write it on the inspector and when it loads from code sometimes. It took that for the position, not size. Just change this:

body
{
   background-image: url("../images/theme/bg.png");
   background-size: 100% 100%;
   margin: 0 auto;
   padding: 0;
}

[MyTime]

okay looks good on my laptop, mobile looks distorted though, I have a responsive theme

[Gwenwyfar]

Well that's because it is stretching the image... As I said there is another way to keep the borders always the same size/ratio etc which is to use border-image instead, but you'd need another image suitable for that to use it. (Or make 194324 images one for each resolution, which is undoable, and you'd still likely need another image )

[MyTime]

I could add multiple image sizes I don't mind, how would i go about doing that

[Gwenwyfar]

The point I'm making is that it is impossible to do that. You can't account for 19082134823 possibilities of screensizes and browser window sizes. Is is not impossible as in "can't be done", but it is completely undoable to have that many images, and then the browser would download another one every time you resized the window.

You could get multiple ranges of widths to account for many different ratios, and stretch the image so it looks good enough for that range/ratio, but even that would be quite a few images. On any case, you need a different image if you want to keep the aspect ratio of the leaves. You need them to repeat around the background, and yours don't have any "meeting point" to repeat. They'd get clipped. So first you need to take care of that bolded part.

You could try looking on google for another image, or finding the original brush that made that image, or even trying to edit it on some editing program. The goal is so that you can cut multiple pieces and "join them together" side by side nicely.

[MyTime]

all the corners of the images meet with each other, I know i can't make every possiblity, but i can make a couple of the main screen sizes out , it would be chill too have this background like other websites have fullsizes ones

[Gwenwyfar]

Yes, right now they do, but if you want to have them keep the proportions, and not do that thing you said looks bad, you need to either edit your image or find another one.

The option I'm telling you is to have the images repeat around. Like on this image

You can either create the images repeating in an image editor yourself, and make multiple different images with different sizes to use, or you can use border-image code, so that it automatically repeats the image for you. On any case, you need to change something in your image for it to work and not look off, so first you need an image, then you do something with it. You can't do it the other way around.

If you repeat the images without having a "meeting point", you'll get clipping, like on the attachment, which I repeated the borders of your image.

[MyTime]

What would I have to edit, or how would i do that, i'm still confused on how i'm actually going too fix it. sorry. Like how would you want me too edit it in , i'm using adobe illustrator, And could i just make it one very big size, and it will scale down too other peoples monitor sizes.

[Gwenwyfar]

The problem is not scaling, the current image already scales. The problem is proportions.

Think of it as the difference between grabbing a piece of rubber with an image drawn on it and stretching it to fit a frame, and grabbing multiple pieces of rubber and gluing them all around the frame.

And you just need to edit to get an image that looks nice when repeated like I have repeated yours. Just need to have a good transition between one copy and the next. If you need a tutorial on basics of editing you can always look on google. I know nothing of adobe illustrator, can't help with that.

Maybe if I get the time I can just edit it for you... But don't count on it too much.

[MyTime]

Are you saying using what you edited and just cover the whole background with it by repeating it?

This is something very similar too what i bought

[Gwenwyfar]

No, I'm saying to make it similar to what I copy pasted there, but editing it so the transitions are good...

[MyTime]

Right... Thanks for your help.

[MyTime]

Would my background be doable with this background http://www.123rf.com/photo_15237651_a-bunch-of-marijuana-leaves-on-a-green-background-that-is-seamless.html?term=cannabis%20background