Re: [Flux Users] background image fill not filling...

[David Miers]

html/css doesn't work like that, so neither does flux. Background
images have positioning choices, repeat or not repeat on x and y axis,
but not stretching.
On Feb 20, 2012, at 5:09 AM, jack wrote:

> So, what's the ideal steps/Inspector settings to create a fully-
> stretched background fill from a single image file?

[jack]

So based on that info, why then is the background image properly
stretching-to-fill in Safari and Chrome, as well as the Flux preview
mode? There are sites (like the one just profiled on the Escapers
blog, http://www.no3hairdressing.co.uk/ although in that case it
appears to be a javascript function) that feature background images
that correctly stretch-to-fill...

Original question follows (with corrections)

I'm at a loss as to the whys of properly getting a single image to
*reliably* fill a background (stretch-to-fill). Yes, from pg 12 of the
quickstart guide.
It's just that sad of a question.
I see, for instance, that the flux window itself is properly filled
with the image I've chosen- as in, non-repeating, stretched-to-fill,
top-to-bottom, side-to-side. In the Inspector, Background size set to
“100%" both horizontal and vertical.

But, previewing in Firefox or Opera, I still get tiling- at least in
horizontally-stretched rows. Stretches-to-fill just fine
horizontally, but vertically it sticks at the original value of the
placed image. Looks fine in Safari and Chrome, though, and also in
Flux preview mode.
So, what's the ideal trick/Inspector settings to create a fully-

stretched background fill from a single image file?

[jack]

What it seems to me, if logic applies, is that the function outlined
on pg 26 for a subdiv ("Set the width to 100 and set the width unit to
‘%’, this will make the object 100% of the size of it’s parent, i.e.
exactly the same width") should also work if applied to the body (and
also height using a height unit of 100%, as with width).
I'm just saying. I don't know if that's true. But it should be.

On Feb 20, 5:58 am, jack <concav...@gmail.com> wrote:
> So based on that info, why then is the background image properly
> stretching-to-fill in Safari and Chrome, as well as the Flux preview
> mode? There are sites (like the one just profiled on the Escapers

> blog,http://www.no3hairdressing.co.uk/although in that case it

[jack]

ah, ok, I found this- I'll consider it an answer, unless there's a
better suggestion
http://css-tricks.com/perfect-full-page-background-image/

On Feb 20, 5:25 am, David Miers <davmi...@gmail.com> wrote:

[Dave]

Hmmmm...evidently I stand corrected and CSS3 has something like this. Sorry not familiar with this and would view with a bit of caution as browsers have a bad track record of modifying image sizes in html. The results can be quite lossy. This method...not sure.

[David R]

Full size scaling bg images have been around for two years if not more, and so many sites use this now I think it's silly to caution people not to try it. Gilt.com is a great example of one site that uses it very well. Http://electpougnet.com is another. Behaves really consistently in my experience across platforms.

Wish I could say the same thing about Flux. Yeesh, what a mess.

--
You received this message because you are subscribed to the Google Groups "Flux Users" group.
To post to this group, send email to flux...@googlegroups.com.
To unsubscribe from this group, send email to fluxusers+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/fluxusers?hl=en.

[jack]

Ok, thanks again guys! So far this following chunk of code appears to
give pretty reliable results and generated full-window stretched
background successfully in Safari, Chrome, Opera, Firefox, and
Stainless
---
html {
background: url(images/...) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
---


A friend offered this shorter bit of code, but it does not
successfully provide uniform results (unlike the above) so I think the
inclusion of the webkit and moz bits are still key for insuring the
reliability
---

<style type="text/css">
body {
background: url(imagegoeshere) no-repeat;
background-size: cover;
}
</style>

---