Tagged: background image, Diagonal Border
-
AuthorPosts
-
December 22, 2016 at 10:46 pm #727687
Here’s the scenario: a solid color background with a bottom angled border and the section below has a background image.
Right now, the background image will have a flat top leaving a wedge of color between the two sections. Is there a way we can give it a seamless appearance where the image background section doesn’t have that flat top and looks as though it has a top, angled border?
Logically….there would be an angled top border option that does the same as the bottom basically, but in reverse so we can achieve that effect.
December 23, 2016 at 8:06 am #727843Hey Kahil,
Could you post a link to the site in question so that we can take a closer look please? Also, if you have a screenshot of what you are looking to achieve it would likely help us understand what you are looking to achieve.
Best regards,
RikardMarch 29, 2017 at 4:17 pm #768889Kahil – did you ever solve this? I’m trying this now and achieve the same result.
Section 1 has
– BackgroundImage1
– a diagonal section bottom;
– a transparent backgroundcolor for the diagonal-partSection2 (after 1) has
– backgroundimage2
– a diagonal sectionbottom with a white backgroundcolorResult:
Section1 had an angled bottom and I can see BGimage1
Section2 had a flat top and BGimage2 is flat too.How can you position BGimage2 behind section1 the angled part?
March 29, 2017 at 7:19 pm #769002Nope. Honestly, I gave up on the idea. Now I’m dealing with the new preview pane crap that hasn’t been resolved in over two months now. :/
March 31, 2017 at 3:43 pm #770016March 31, 2017 at 4:05 pm #770036No it is more like the green reviews part in this screenshot:
https://www.behance.net/gallery/16322061/Delicious-App-Landing-WordPress-ThemeI would like a section with a background image that is slanted on the top AND the bottom.
I understand that I have to use 2 sections for that on top of eachother, and that works if I would make the sections one color.
But with a background *image* I can not achieve this.
I _can_ achieve
Top: straight. Bottom: slanted. Like the header in the screenhsot.April 1, 2017 at 4:50 pm #770367Hi Pixelbits,
You could achieve it with an image, just prepare the image with necessary dimensions and transparent background.
Another way to do it is by using css.If you need further assistance please let us know.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.