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).
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…
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.
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.
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.
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.
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.
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…
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…
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.
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.
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.