responsive images filling the whole screen

Freeway
1

I’d like to have images filling the whole screen and responsive as shown in these two sites:

http://sapphirestreet.com/index.html

Wondering how to create that with for example Backsdraft.
Anyone an advice??

Thanks!

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

The first one doesn’t have a responsive background image.

The second site uses 4 different images at 4 breakpoint sizes.

Have you looked at the Full Background and Full Background Proportional actions?

Other than that you can use the standard techniques to make responsive images - just ensure your container is 100% of the page width.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:

3

I’m currently working on a rebuild of an old project of mine, still busy with laying down a solid foundation. Here I’ve used a hero image which cover most of the screes, but although I’ve set the width to 100%, I’ve also set a max-width of 1920px. It works just fine; images are imported pass-through, width set to ‘fixed (%)’ and height to ‘flexible’.

Richard

freewaytalk mailing list
email@hidden
Update your subscriptions at:

4

In the second site (http://kodebyraaet.no) how do they get the text to run over the photo and also resize as the width of the window decreases?

I’ve been trying to do this for ages!

freewaytalk mailing list
email@hidden
Update your subscriptions at:

5

There are in total two methods making images responsive and both methods require a slightly different method getting “text in”. Assumed you are aware of both methods applying images in web, the easier part is simply doing it as background-image. Todays FW(7) has background-size: cover already available in inspector. The text can be treated as you would do with a regular DIV.

The image Tag is a lil bit more complicated. An img-TAG (in our world the pass-through) is technically spoken a placeholder for an image; which is the reason why it can’t contain anything else.

Thus spoken, the pass-through element requires a parent wrapping DIV and in this DIV you can place another one (preferably absolut). So the parent container contains two elements - the figure and the fig-caption - if you want so.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:

6

Thank you for your reply, Thomas.

I’m sorry but I was a bit confused, not being so clear on technical jargon.

I’m using the SecondSight template. There is an HTML box with the image as a background image filling the box. I would like to be able to have a second box overlaying the image which is also responsive.

Thanks

freewaytalk mailing list
email@hidden
Update your subscriptions at:

7

Sorry - I’m not aware how SecondSight is built - but here as well as in previous talks:

A template is created for adjusting as is (not as it could be or even should be). The key is construction and its different methods. To clarify what I mean, have a look at those “methods” in following screencast, starting somewhere at 6:45 (it’s a series of videos so sometimes overlapping from the pervious).

http://www.kimmich-digitalmedia.com/videos/016_the-coding-episodes-part9-structuring-content

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at: