-
Posts
-
I want two sections to be separated by a semi transparent wavy divider. Similar to this site:
http://www.rikkazimmerman.com
I made four 1600×156 png’s that are waved and transparent on one side and solid on the other.How do I go about inserting them so the transparent part covers the color section above or below it? I tried inserting it into a full width slider with just one image and the transparent part was solid with the background color and just looked weird. I also tried to make is a Scroll background and had similar results.
Hi Alex!
Maybe you can add a large image as the Color Section’s background. Can you post the wave images here? A mockup of what you’re trying to do will help a lot.
Regards,
IsmaelBecause I plan on changing the layerslider to a color section. I want to put a sign-up form at the top of the page, so the spot where the layerslider was going to be, but then realized forms placed within layerslider aren’t responsive and don’t adjust size and on an iOS mobile device, you can’t even see the entire form because the layerslider cuts it off.
Even so, that is not the only section I want to do that. Like below where there is a fixed background color section, I would like to add the wavy transparent divider there.
Take a look at http://www.rikkazimmerman.com and you’ll see, it’s used all over the page dividing sections out in different colors. I would like to do something similar. I don’t know if this theme is capable of that though.
Oh, and I may not make it wavy, or keep it that way. I may decide I prefer the look of say the dividing section of your homepage
, or perhaps a ripped paper look or jagged teeth look. If it’s something that can be designed using css code, that would be cool, but how do you edit the css code of the dividing lines into a different shape than straight? I don’t necessarily need to place an image the way I have been trying to do it.Hi!
Add a Color Section then give it a unique ID for example “wave-section”. Apply the wave image as background image then configure the Color Section as follows:
Background Image Position: Top Center
Background Repeat: Stretch to Fit
Background Attachment: Scroll
Section Padding: No Padding
For Developers: Section ID: wave-sectionGo to Quick CSS field or edit custom.css, add this code to move the section upwards until it covers part of the section above:
#wave-section { margin-top: -50px; }Cheers!
IsmaelHi!
I’m not sure what you mean with “black line” but I think you want to remove the section border? If yes just insert following code into the quick css field
.avia-section { border: none !important; }Regards,
PeterThanks dude, that did it. I also tried to change the team member’s job title font color using this code, placed it in quick css and then tried custom css, and it wouldn’t stick. Do I have the wrong code?
.avia-team-member-job-title {
color: #000000 !important;
}Something is off. the image is moved up 50px’s, but the background color of the wave is still white eve though it is a semi-transparent png file with the top part transparent and bottom solid white. Check out my site http://homesmartsecure.com to see what I mean.
I added background-color: none !important; to your code and placed all of it in custom css, because quick css never works for me. The solid white background should be clear. What am I doing wrong. Here’s my code:
.avia-section {
border: none !important;
}#wave-section-up {
margin-top: -50px;
background-color: none !important;
}#wave-section-down {
margin-top: 50px;
background-color: none !important;
}any suggestions as to why this isn’t working? I jumped the gone before when i said that did it. the wavy banner is still solid.
Hello!
Add this on your custom.css or Quick CSS:
#wave-section-up { margin-top: -50px; background-color: transparent !important; z-index: 9999; height: 167px !important; }Remove browser cache then reload the page a few times.
Cheers!
IsmaelThanks Ismael, that code worked great. Still new at this so didn’t know it was supposed to be transparent, not none.
That said, I tried to the same thing, just opposite for a bottom one and used a flipped png of the same banner and it’s not working. I placed it right below the send us mail form on http://homesmartsecure.com, but the solid color still shows where it should be transparent.
I created the same color section and labeled the dev id wave-section-down and in css I added the following:
#wave-section-down {
margin-bottom: 50px;
background-color: transparent !important;
z-index: 9998;
}Ismael, can you please help me with the last piece of this puzzle? The top wave is perfect, but the bottom wave (right below the send us mail form on the site) is mangled.
Thanks for all your help
Hey!
Please use this instead:
#wave-section-down { margin-bottom: 0; background-color: transparent !important; position: relative; bottom: -100px; z-index: 9999; height: 167px; }Regards,
IsmaelThanks,
It kind of works. I used the following code for my top wave:
#wave-section-up {
margin-top: -50px;
background-color: transparent !important;
z-index: 9999;
}and if you notice, the wave is not stretched beyond the screen and there is VERY little white space in the section, but the code you posted for the bottom stretches the image beyond the screen and leaves a huge block of white space there (and it’s not padding from the form, it seems to be space in the image color section itself even though it is set to no padding).
How can I clean that up please?
Edit: I’ll change the color of the section near the waves so you can see the difference more noticeably.
Edit: Got it working perfectly with the following code:
#wave-section-down {
margin-bottom: -100px;
background-color: transparent !important;
position: relative;
bottom: 50px;
z-index: 9998;
height: 120px;
}#contact {
z-index: 9999;
}Thank you for finally getting back to me. Really appreciate it. You can close this thread now.
- The topic ‘semi transparent wavy divider’ is closed to new replies.