Background Supersizer Action minus a bit!

I’m using the fantastic Background Supersizer Action. Only thing is I don’t want the background image to complete fill the viewport - I want it to start 50px down from the top (this is where my header: logo and navigation is and I don’t want this cropping off the top of the images).

Is this possible?

See http://www.advocatedesign.co.uk/Alex/

Thanks for any help


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That’s a good question Mark. Does the Background Supersizer action get applied to the page only or can it be applied to a box?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You could just use images that had 50px of whitespace at the top.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That’s nearly genius, but unfortunately it wouldn’t work. The Action sizes the images to fill the viewport. So on a tiny viewport the 50px will no longer be 50px and on a large viewport the 50px could be much large.

If I can’t get this to work, it’s going to be very embarrissing as I’ve told my client it can be done…

Help!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Mark, here’s something Ernie recommended in another thread. Might this work?


If you’re after a static image, you can use the background-size css cover attribute on whatever element you attach the background to.

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Have a look at this example, which shows the background shoved down 170px to clear the header. Click on the little buttons to toggle between ‘cover’ and 100% sizing.

http://scripty.walterdavisstudio.com/bg

You could also make an inline layout and apply the background to the lower portion. That would be even more durable than this layout, because it would survive the header text resizing larger. This layout would not work in that respect, unless I were to set the top offset in ems or something like that.

Walter

On Mar 11, 2013, at 6:24 PM, RavenManiac wrote:

Mark, here’s something Ernie recommended in another thread. Might this work?


If you’re after a static image, you can use the background-size css cover attribute on whatever element you attach the background to.

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter, are you using an action for that effect?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Nope, just CSS in the page head. The size-change trick is JavaScript, but that’s just to show the two values of the background-size property. Note that you have to use a “polyfill” shim to get older IE to see the ‘cover’ value.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

but unfortunately it wouldn’t work

Unless you had separate pages for mobile and desktop.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I see everyone’s been on this while I was away :slight_smile:

The Background SuperSizer action sets up some css code that can be
over-ridden in the before section

  #supersized li { top: 150px; }

set the top amount to whatever, it doesn’t interfere with the slideshow
part of the action.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Ernie

I thought I’d try your advice first because it looks the easiest.

I’ve add the text to the Before section and uploaded my prototype, but it is doing weird things. The slide show appears to be still filling the screen, my logo and nav bar have got shunted down and the the height of my page appears to be over 100% of the viewport.

Any ideas? See
http://www.advocatedesign.co.uk/alex2/alexandercaminadaphotography-corporate.html

Thank you
Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter

Thanks for your help, although I’m after a slideshow rather than a static image.

FYI. nothing happens when I click on 100% or Cover in Firefox 19 or Safari on my Mac…

Thanks
Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Mark
As has been pointed out to me on a supersize background I was doing - your images are way to big and therefore quite slow. Some of the images are over 700kb - gotta be at least half that.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Noel

Yup I agree, I’m just trying to quickly put a mock up together to see what’s possible. I’ll resize the images later.

Thanks

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi

I’ve had a look at the following, but don’t have a clue how what to do in FW.

http://www.w3schools.com/cssref/css3_pr_background-size.asp

If I can get a HTML Item to have a background that fills the viewport (minus my 50px header) then I can possible create a slide show of HTML Items all with background that fill the viewport…

Possibly?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Uh, really? Do you have JavaScript disabled or something like that? It works here, on every device and browser I have to throw at it! I’d be surprised if it worked in IE 8, but then I’d be surprised if lots of things worked there.

Walter

On Mar 12, 2013, at 7:31 AM, Mark wrote:

FYI. nothing happens when I click on 100% or Cover in Firefox 19 or Safari on my Mac…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No, that’s not what is happening.

This action uses javascript to size and position the images, not css - so
the background-size css property will not work here. The only thing that
will work is hacking the action… good luck with that.

There are some script options written into the page head that control some
size and position - you would need, however, to edit them in the html
files… which is pointless as Freeway Pro will overwrite it with every
publish after that.

I think you are trying to make a portfolio slideshow, and that the
bgsupersizer action was not meant for that purpose. You may want to search
for a different large image slideshow solution.

Best wishes,


Ernie Simpson

On Tue, Mar 12, 2013 at 7:25 AM, Mark email@hidden wrote:

Hi Ernie

I thought I’d try your advice first because it looks the easiest.

I’ve add the text to the Before section and uploaded my prototype,
but it is doing weird things. The slide show appears to be still filling
the screen, my logo and nav bar have got shunted down and the the height of
my page appears to be over 100% of the viewport.

Any ideas? See

http://www.advocatedesign.co.uk/alex2/alexandercaminadaphotography-corporate.html

Thank you
Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Ernie

So it’s not practically possible to use the SuperSizer Action and have it fill the screen minus a stripe across the top for a header?

Thanks Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Mark,

I found this website, which was designed in FWP 5.5. Is this what you’re looking to do? If so, maybe one of the more seasoned FWP users can help you deconstruct it.

http://www.cloud9weddings.co.uk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Raven, that page uses the same action Mark is using - also centers the
image, sizing the width to fit the browser, making the tops and bottoms
flow off the page.

If you have a good size screen, resizing the browser you will see what I
mean.


Ernie Simpson

On Tue, Mar 12, 2013 at 5:05 PM, RavenManiac email@hidden wrote:

Mark,

I found this website, which was designed in FWP 5.5. Is this what you’re
looking to do? If so, maybe one of the more seasoned FWP users can help you
deconstruct it.

http://www.cloud9weddings.co.uk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options