CODEWITHSUNDEEP
htmlcssbackgroundbackground-positionskew
jspada
jspada

Reputation: 491

CSS: Skewed centered background

I am trying to make a nav menu using 3 images. When you hover over them, I am expanding the hovered one and collapsing the rest. The tricky part is the skewing I am doing. I was able to get it to un-skew the background but cannot seem to get the background centered on the image which is where the main content is. It seems to start in the top left of the image instead of the centre.

enter image description here

I was hoping someone would be able to point me in the right direction. How can I centre the background image instead of having the background start in the top left? I have tried using the background-position properties without luck.

Thanks!

https://jsfiddle.net/jspada/4jrhc2eb/5/

.diagonal_box_a {
    transform: skewX(35deg);
    -ms-transform: skewX(35deg); /* IE 9 */
    -webkit-transform: skewX(35deg); /* Safari and Chrome */
    width: 250px;
    height: 357px;
    border-right: 1px solid black;
    border-left: 1px solid black;

    /* new styles */
    position: relative;
    top: 0;
    right: 0;
    overflow: hidden;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    transition: width 0.5s ease;
}

.diagonal_box_a:hover {
    width: 750px;
}

.diagonal_box_a::before {
    content: "";
    transform: skewX(-35deg);
    -ms-transform: skewX(-35deg); /* IE 9 */
    -webkit-transform: skewX(-35deg); /* Safari and Chrome */
    border: 1px solid red;
    background-image: url("img/placeholder_desert.jpeg");
    background-repeat: no-repeat;
    background-position: top left;
    position: absolute;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    width: 1500px; /* something ridiculously big */
    height: 1500px; /* something ridiculously big */
}

Diagram of what I am trying todo

Upvotes: 1

Views: 175

Answers (1)

jspada
jspada

Reputation: 491

Temani Afif added a 50% offset to the translate and did a left 50%. See comments.

Upvotes: 0

Related Questions