Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by John Komarnicki
.a{fill-rule:evenodd;}techdegree seal-36
John Komarnicki
Front End Web Development Techdegree Graduate 15,416 Points

CSS & HTML Slant Section

Hello, i'm trying to perform a cool effect for a content display section. I've been messing with this for a few days, but i'm currently stuck here.

Here is my code: http://cssdeck.com/labs/full/xjeipzrt

It only applies the slant when it is set to background-attachement: fixed.

Any solutions to get this to work properly?

Thanks!

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

I'm not sure what your goal is, can you describe how it would look different from what we see now?

John Komarnicki
.a{fill-rule:evenodd;}techdegree seal-36
John Komarnicki
Front End Web Development Techdegree Graduate 15,416 Points

The problem is that on certain images i'm noticing it is checkering the image. The image in use is a random image generator from unsplash that uses the same dimensions each time but with a different picture. if you refresh you might be able to catch what i'm saying!

John Komarnicki
.a{fill-rule:evenodd;}techdegree seal-36
John Komarnicki
Front End Web Development Techdegree Graduate 15,416 Points

i would like the image to fit in the container that it is in. the only way it takes on the border which creates the angle is when using background-attachment: fixed

This is also what is causing the image to be duplicated.

i've tried using background-repeate: no-repeate but this wasnt solving the issue.

1 Answer

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

I'm not sure what you mean by "checkered", but the repeating can be turned off with *'background-repeat: no-repeat;"

With repeat off, the image might not appear where you want it, you may need to set a specific position. I found "background-position: top right;" worked pretty well.

I also didn't see any difference with "fixed" attachment or not, though the position might need further adjusting.

It also probably complicates things to use a fixed-size image but put it in a responsively-sized element.

John Komarnicki
.a{fill-rule:evenodd;}techdegree seal-36
John Komarnicki
Front End Web Development Techdegree Graduate 15,416 Points

Do you have any ideas/recommendations for a better way to accomplish this idea with a slanted image?

As the only way the image actually takes on the borders i have in place that creates that effect is with the background-attachement: fixed;

all the other ways the image stays a square and is positioned at the top of the border.

Thank you!

John Komarnicki
.a{fill-rule:evenodd;}techdegree seal-36
John Komarnicki
Front End Web Development Techdegree Graduate 15,416 Points

What i would like for it to do is stay static and not be fixed to the page when scrolling. But as i mentioned when i removed that fixed property, it does not fill the bordered off area making that shape to slant the image.

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

It works for me without "fixed", but you do need to adjust repeat, size, and position.

However, the technique is perhaps more complicated than need be as the container is actually 0 pixels high and the image is being viewed in the transparent border area.

Perhaps a more direct approach would be to use a clipping path:

#cuisine .cuisine-image {
    width: calc(50% - 50px);
    height: 400px;
    background: url(https://source.unsplash.com/random/700x700);
    clip-path: polygon(100px 0, 100% 0, 100% 100%, 0% 100%);
}