Streaming live at 10am (PST)

Transparencies and display properties issues


#1

Couple other design questions on this project: https://preview.webflow.com/preview/big-cedar-customer-retreat?preview=f38c519a27d88699c86d057936ffa25a

1) I’m wanting the “Info Sections” to be 30% transparent so that as you scroll down and they move over the photos above them (that are fixed) that you can see through. See examples below. Right now the sections are all 100% white.

2) On the first “Section Display” how can I move my picture down so that I can see the top of the building. There is more picture hidden under the Nav Bar, but can’t seem to get it adjusted correctly.


#2

Hi @chrisgreer33, from what it looks like, you may need to restructure your elements. Try:

body
    div
        hero (fixed background, z-index: 1)
        info section (fill: white 30%, z-index: 2)
        etc

Hope this helps! smile


#3

That doesn't work. The images disappear. And I don't have a "div"; just sections.


#4

Hello Chris

With structure, that you have now there is impossible to get effect that you want. You have to understand, that background image will finish on the edge of section (because it is background).

Here is how your structure looks like :

and here is how it suppose to be for got effect that you want:

Hope it help to understand where is the problem


#5

@sabanna ... you're diagram is spot on. You say "with my current structure" it's not possible. How could I make it possible without drastically changing what I've done so far?

And any idea on what to do with my second issue ... moving the "section display" down to show more of the picture.


#6

Yes, in order to achieve the desired result, you will need to wrap your entire site in a div and then structure your sections as siblings (one of which will be set to opacity 30% with a higher z-index than the section with the fixed background image)

@sabanna showed a great visual aid for how you could go about doing this. With some patience and being open minded to re-working your site, you'll be able to get the desired effect.


#7

@thewonglv ... that doesn't work. I get the concept @sabanna explained. The concept isn't the issue ... it's how to pull it off that I need help with.

And what about the second issue?


#8

In the background picture settings you can adjust it


#9

I started with that @sabanna and it won't move down.


#10

click preset position: top middle arrow and then drag adjusting, to me works


#11

Thanks. It was the preset position that I hadn't clicked. Thanks for your patience and guidance @sabanna.


#12

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