A default background

[silverwind]

I think I've changed my mind about backgrounds, and would probably use this one, which color-wise comes pretty close to the old #222. Would make solving bg-related issues for me easier, too.

What do you think?

[Mottie]

I like it, but I'd make it a bit darker... I guess I'm used to my current favorite background:

[ddavison]

I don't think we should default to a fixed background, rather a tiled one.

[silverwind]

I'd embed a small one, like mine above directly as data-URI so it gets instantly loaded. Would userstyles.org be able to override a url() property ?

[Mottie]

I would only need to change the code in userstyles to look like this

background-image: url(data:image/...) !important;
/*[[bg-url]]*/

where /*[[bg-url]]*/ would get replaced by

background-image: url(data:image/...) !important;
background-image: url(myimage.jpg) !important;

[Mottie]

Hmm, ok maybe it won't be that easy. It appears that it would require the user to enter the entire line of code, instead of just the url. I'll do some more investigating.

[silverwind]

Hmm, would this work?

background-image: url(data:image/...) url(/*[[bg-url]]*/) !important;

[Mottie]

It doesn't appear to. I don't think that is valid syntax because no image appears...

I tried separating the url's with a comma, but the first one overrides the second.

[Mottie]

Wait, if I set it up the opposite way, like this, it looks like it works:

background-image: url(/*[[bg-url]]*/), url(data:image/...) !important;

It does! I just tested it in Chrome and Firefox! YAY! 👯

So, did you have an image in mind?

[silverwind]

Well, I like the one from my initial comment, here's its URI:

url("data:image/png;base64,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") 

[Mottie]

Ok, I can add that... by the way, I used this site called TinyPNG and it reduced the above image size by 64% ❤️

url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUaGhohISElJSUh9lebAAAB20lEQVRIx4XWuZXDMAwE0C0SAQtggIIYoAAEU+aKOHhYojTrYP2+QfOW/5QIJOih/q8HwF/pb3EX+UPIveYcQGgEHiu9hI+ihEc5Jz5KBIlRRRaJ1JtoSAl5Hw96hLB1/up1tnIXOck5jZQy+3iU2hAOKSH1JvwxHsp+5TLF5MOl1/MQXsVs1miXc+KDbYydyMeUgpPQreZ7fWidbNhkXNJSeAhc6qHmHD8AYovunYyEACWEbyIhNeB9fRrH3hFi0bGPLuEW7xCNaohw1vAlS805nfsrTspclB/hVdoqusg53eH7FWot+wjYpOViX8KbFFKTwlnzvj65P9H/vD0/hibYBGhPwlPO8TmxRsaxsNnrUmUXpNhirlJMPr6Hqq9k5Xn/8iYQHYIuQsWFC6Z87IOxLxHphSY4SpuiU87xJnJr5axfeRd+lnMExXpEWPpuZ1v7qZdNBOjiHzDREHX5fs5Zz9p6X0vVKbKKchlSl5rv+3p//FJ/PYvoKryI8vs+2G9lzRmnEKkh+BU8yDk515jDj/HAswu7CCz6U/Mxb/PnC9N41ndpU4hUU7JGk/C9PmP/M2xZYdvBW2PObyf1IUiIzoHmHW9yTncliYs9A9tVNppdShfgQaTLMf+j3X723tLeHgAAAABJRU5ErkJggg==')

Hmm, but I thought of another problem.

When choosing a background image, there is no way for someone to choose no background image at all. If they enter "" into the "Provide your own" url input, it will always default to our set background.

[silverwind]

WTF, I already ran that png through TinyPNG before creating the URI and it reduced it by like 30% from the original. Still, I can't spot a difference in your version. I wonder how many times you must run a png through it until its just a single color :P

For the default: I always thought that entering "" was putting a few users off. Would a dropdown selection be possible?

[Mottie]

Sadly no. A dropdown selection won't allow the user to include their own image url.

[silverwind]

Hmm, hard choice. I definatly think it's an enhancement over the plain bg. Maybe move the bg style on top and add a note which line to remove for a plain background?

[Mottie]

Well.. what we were originally planning when we discussed supporting background images was to upload a few background images to choose from in a select dropdown, and leave it at that. It would be nice to allow users to upload their own, but that input on userstyles can not be empty, or the user gets a message.