▼
Streaming live at 10am (PST)

Picture Settings - Entry Picture whole display

Design help General
#1

Webflow Share Link: https://preview.webflow.com/preview/zoomnew?preview=60cbac85a5d78ec71cb4d8c307bedcc6

Dear together,

when I visit my page, I would like to get the picture in the first section under the navigation bar in exactly that size from which device I go on the page. So when I use my 27" or my macbook 13" the picture should be exactly in this size… at the moment I gave the section a height because I didn’t find how to handle this. And the second thing is, we I pull it smaller, it should also fit to the window… check my videos to know what I mean ;-))) - https://www.dropbox.com/s/b7q103amuu03dd8/webflow_entryPicture_problem.mp4?dl=0

I would like to have it like on this page: http://felix-jaehn.com

Settings picture:

Bildschirmfoto 2016-11-14 um 14.04.14.png2560×1600 1020 KB

I have two other pictures in the section SHOWS and MUSIC… so same issue…

Thank you so much!

Best, Alex :slight_smile:

#2

@zoomlike

Alex, can we get a read only link to this please?

Thanks,
~B.

#3

Is this one not working? https://preview.webflow.com/preview/zoomnew?preview=60cbac85a5d78ec71cb4d8c307bedcc6

#4

LOL Sorry, didn’t see it. Too much caffeine!

#5

Alex,

Here is a quick video showing a fix for a couple of these bg images.

Take care,
~B.

#6

Thank you so much Brian! Awesome Video. I did it but in the last view it looks different at my pc?

Bildschirmfoto 2016-11-14 um 21.21.46.png2560×1440 544 KB
Bildschirmfoto 2016-11-14 um 21.15.25.png2560×1440 466 KB

And for the other thing… that the first image is shown in exactly that size from the display I go on the page… like on the Felix jaehn homepage (link at the first post). As I said I just put at the moment a height in there but I would like it automatic to the display size fitted…

Bildschirmfoto 2016-11-14 um 21.25.19.png2560×1440 921 KB

I marked you red what I mean… the line to the next section should be at the displays end… so automated fitted to all displays… like how Felix Jaehns first big background Image is doing

#7

@zoomlike

Alex, I have some work to get done, however, I wanted to note the sizes of these two bg images (and maybe more). They are way too big. Default max width in Webflow (Desktop view) is 960px wide. These are literally 2 and 4 times that size. If you know how to optimize these in PS, then my advice it to do that first with any website you build. A browser will load these full size and then size them down to fit the HTML dimensions. That being said, your page, just with these two bg images alone is already over two gigabytes without considering anything else loading. Phones tend to download your entire site before displaying it. Imagine having to download 3-4 Gigabytes of data on a phone just to see the first page of your site on a phone?

I’m trying to sort out what your trying to tell me here, but it will have to wait a few hours until I can get back to you on the rest.

~B.

#8

No Problem Brian! Keep going on your work and when you have some time I am happy to have you back on my side, haha :wink: I will resize all images to max. 960px wide.

But now I got that bad result…

Bildschirmfoto 2016-11-14 um 22.51.51.png2560×1440 646 KB

Best, Alex

#9

Alex,

I sent you a PM on this a few days ago with a video. Did you get it?

Please, let me know.

Thanks!
~B.

#10

Hey Brian,

thanks - I got your Video :slight_smile:
So I changed the width of the devices tablet and the two mobile views to the same as you working with.

What my plans are… again… hopefully you will understand it ;-))

The first background picture underneath the navigation bar with the black/white picture from myself should be in fullscreen size. So the next section is “about” and this should not to be shown up… just the picture in fullscreen. So and when you scroll just 1 millimeter down I would like to see the next section “about”. It is exactly the same on this page… http://felix-jaehn.com - The Image is fullscreen. Doesn’t matter if you are visiting the page with a big or a small screen. At the moment the section has a div block called “banner” and I set there a heigh from 1000px to my actually background image… but I would like to get it fullscreen on every device.
I think I need to set the height to 100% BUT when I do this… it is not showing up the image in 100% :smiley:

And I would like to know which size for the “fullscreen” Image is the best?
-> 960px wide (max width Webflow Desktop view)? and height?

#11

Alex,

Can you re-share the Webflow site link? The old one has gone 404.

Thanks!
~B.

#12

Sorry for that… https://preview.webflow.com/preview/zoomlike?preview=37a2bfddf2a352332b28e2875bbdb9b4

1 Like
#13

OK, felix-jaehn.com was built in Wordpress with a theme or child theme purchased or built that includes responsive images. As far as I know, in Webflow there are rigid, set breakpoints in the media queries (someone correct me if I’m wrong). So, all I can try to do is get it to full screen at the breakpoints where the most devices are supported, as shown in the video I PM’d to you. In other words, there may be some devices with uncommon viewport sizes that “escape” outside the boundaries of Webflow’s device majority media queries. So, when you resize the browser window width back and forth you’re going to see things snapping in and out instead of the smooth scaling that you see on Fenix’s site. If I had a paid account and access to the custom code section(s), I might be able to do better, but for right now all I can manage to do is get full screen at the majority of device breakpoints in each viewport. Sorry.

Perhaps someone else has more insight or can work with you on custom code to get this done.

Good Luck!
~B.

#14

Thanks Brian.

Do you have an idea about the fullscreen picture @cyberdave

#15

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.