Opened 13 years ago

Closed 12 years ago

Last modified 12 years ago

#7399 closed enhancement (fixed)

Background image scaling

Reported by: tw2 Owned by: catfish_man
Milestone: Adium 1.3 Component: Message View
Version: Severity: normal
Keywords: background, image, scale Cc:
Patch Status: Accepted


I would be nice if the background image of a message window scaled to the window's size. Currently the edges of the image are discarded when the window is too small to view the entire image.

Attachments (3)

MoreBackgroundStyles.patch (2.8 KB) - added by tgos 13 years ago.
MoreBackgroundStyles2.patch (3.8 KB) - added by tgos 13 years ago.
MoreBackgroundStyles3.patch (3.8 KB) - added by tgos 13 years ago.
Bug fixed version - and more logical order of if checks, also faster

Download all attachments as: .zip

Change History (22)

comment:1 Changed 13 years ago by Peter Hosey

This should be the “Normal” behavior. The question of which edge(s) to pin to can be resolved with a separate control. The behavior pop-up would then contain:

  • Scale to fit
  • Fixed size, just once
  • Fixed size, tiled

comment:2 Changed 13 years ago by Eric Richie

Milestone: Needs dev review
Owner: set to David Smith

CFM, care to take a look? Thanks.

comment:3 Changed 13 years ago by tgos

My first enhancement request :P

The patch I'm going to attach adds two new image types. Currenly we have

  • Normal
  • Centered
  • Tiled

My patch adds

  • Tiled (Centered)

This is just like Tiled, but Tiled starts in the upper left Cornor, while this is centered just like Centered, however it will be tiled, too if the window gets larger than the image.

  • Scaled

The image is always as big as the window. To achieve this (only CSS3 supports that using a real background image), I have to manually set an image tag with absolut position, always the dimension of the window's content and to make sure it really is in the background, setting it to a negative z-level (I chose -1000, most people will not use negative z-levels anyway, they could be behind the background) and setting the background color to transparent (you will never see the background color anyway if the image is scaled!)

And I second this request, otherwise I had not written that patch ;-) I wanted to have some images scaled and certain image are repeating nicely, so I want them tiled, however, they look better if they are centred tiled.

Changed 13 years ago by tgos

Attachment: MoreBackgroundStyles.patch added

comment:4 Changed 13 years ago by Jordan

Milestone: Needs dev reviewAdium X 1.3

Changed 13 years ago by tgos

Attachment: MoreBackgroundStyles2.patch added

comment:5 Changed 13 years ago by tgos

Now it's fine. If I should have committed the strings file, I will, though these can be auto-generated, can't they? Please review and tell me what you think. Feel free to make modifications as you wish :-)

Changed 13 years ago by tgos

Attachment: MoreBackgroundStyles3.patch added

Bug fixed version - and more logical order of if checks, also faster

comment:6 Changed 13 years ago by tgos

Plase have a look at it :P I'm working with a scaled background image now daily, it works perfectly :) Unfortunately it scales the image not proportionally, so not every image or window size will work nicely with it, but making it scale proportionally means I had to add some nasty JS hacks (it's possible, though), but I prefered to make my changes HTML/CSS only (it's much better and faster and compatible).

comment:7 Changed 13 years ago by Eric Richie

Patch Status: NoneNeeds Dev Review

comment:8 Changed 12 years ago by David Smith

wow. I really slacked off on looking at this. My bad, doing so now.

comment:9 Changed 12 years ago by David Smith

Resolution: fixed
Status: newclosed

(In [23186]) Patch from 'tgos' to add Scale and Tile (Centered) options for scaling wkmv background images. I modified the patch to use the CSS3 background-size property though, since it is a lot simpler. I believe background-size is supported in all versions of webkit we support; if not, that option will degrade fairly gracefully for old versions. Fixes #7399

comment:10 Changed 12 years ago by tgos

Your CSS3 Setting does not work as my patch did. If your window gets bigger and you get more and more text, so the window has as scrollbar, the background will scroll upwards, it's not fixed anymore and it will be as big as the whole content as if it was not scroll-able. In my fix however, the background is always as big as the window is, regardless how much scrollable text you have. Shall I make screenshots or videos to demonstrate? Yes, I think I better do so.

comment:11 Changed 12 years ago by tgos

Here's how the new patch works using CSS:

It stretches the image the bigger the content area gets and the BG image is scrolling. Here's how my original patch worked:

See the difference? If I knew a way how to make this patch with CSS only, I had implemented it that way, but since I don't, I used this fixed BG layer hack - not as nice as using CSS, but I think there is no way to do it with CSS.

comment:12 Changed 12 years ago by tgos

Anyone there? This issue has not been fixed, my great working fix has been turned into a broken patch with a horrible bug, that makes this feature unusable. Could someone please comment on that? Nobody will use the scaling feature the way it is implemented right now, it just looks horribly in a longer chat. The image gets scaled more and more, it gets blocky and blockier and stretched to the max - it's really ugly (please see posted videos!). Would it be please possible to apply my original fix which was working great for weeks?

comment:13 Changed 12 years ago by Zachary West

Resolution: fixed
Status: closedreopened

comment:14 Changed 12 years ago by Zachary West

Owner: changed from David Smith to David Smith
Status: reopenednew

comment:15 Changed 12 years ago by David Smith

Yeah, sorry. Will get to it. Was sick for a week, now trying to catch up on a week's worth of actual job work.

comment:16 Changed 12 years ago by tgos

@David: Didn't try to sound rude, sorry. I'm also sorry to hear that you have been sick, my comment was not directed towards you personally; there is a whole community of programmers and if someone is sick, I guess it would be nice if someone else can have a look on his bugs code code till he recovers.

I know that my scaling fix didn't look that nice, because it's not using plain CSS (it needs HTML Code to be injected), however, it was working very well. The problem is that there are two dimensions in HTML, one is the viewport (what the user actually sees on the screen) and one is the pagesize (how big the whole HTML document is). If the page fits onto the screen without scrollbars, both have the same size. But usually the viewport is smaller than the page (can also be bigger, in that case the page is upsized to exactly fit the viewport, just like the surrounding HTML-tag has margin to make it as big as the screen).

Now the body element of a HTML page always has the same dimensions as the whole page and that might be much bigger than the viewport of the user. If you apply the image as background image to the body element, it will get streteched more and more the bigger this element gets (and it gets bigger the more chat content there is in a chat window).

My solution was to actually use a real image (I could also have used a DIV tag and fill it's background with the image, but where would be the advantage over that?), give it the viewport dimensions (a HTML tag, placed on an absolute position, sized with relative units, is always relative to the viewport size, not to the page size); and to move it very far into the background using the Z-index of CSS, so all other elements are on top. This solution does not cause the image to get resized depending on page size, it's always perfectly centered and fills the window backgroudn to 100% in both directions. I guess that's what users expect of a scaled image.

If I knew any way to do the same thing with CSS only (and without adding or modifying any HTML code), I had done it, but from what I see in the CSS specs, it's just not possible.

comment:17 Changed 12 years ago by David Smith

Resolution: fixed
Status: newclosed

(In [23268]) Use background-attachment:fixed; for scaling to address (hopefully! please correct me if I am wrong) the issues mentioned by tgos in #7399. Fixes #7399 if I am reading things right.

comment:18 Changed 12 years ago by tgos

@catfish_man: Hey man, I'm impressed. Fixed really prevents the image from growing larger than the view size. Together with the background-size attribute (which I don't know, as I only know CSS up to 2.1 and this is probably CSS 3, right?) it really gives the expected - or should I say desired - result. Good work! I had not expected this to be possible with CSS; well, it is not possible with CSS, after all how many browsers do CSS 3 (most don't even do 2.1 to 100% yet), but webkit is ahead of time here (maybe together with Firefox, that seems to handle this, too). Seems to be fixed.

comment:19 Changed 12 years ago by Robert

Patch Status: Needs Dev ReviewAccepted
Note: See TracTickets for help on using tickets.