#How to resize so that the skewed background color leaves no white background

7 messages · Page 1 of 1 (latest)

eager phoenix
#

Hello guys... in the picture, I will replace the two background color with two pictures but I will have the white space, how can I make so that the white space doesn't appear but I still have the same skewed effect

here is my code:

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    min-height: 100svh;
    background-color: white;
    overflow: hidden;
}

.content {
    display: flex;
}

.content .zombies {
    width: 50vw;
    height: 100vh;
    background-color: red;
    transform:skew(-20deg);
    
}

.content .mommies {
    width: 50vw;
    height: 100vh;
    background-color: blue;
    transform:skew(-20deg);
}



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="SkewedWelcome.css" />
    <title>Skewed Gallery</title>
  </head>
  <body>
    <div class="content">
      <div class="zombies"></div>
      <div class="mommies"></div>
    </div>
  </body>
</html>
image.png
#

I was trying to create a nice effect with these 2 image, like when I hover on it ect, there are some text, a redirection button but omg how I did it is not what I wanted, that really ugly 😭

image.png
eager phoenix
#

I wanted to create something like that... on hover, there are some details which appears, background size scale to become bigger and transparency decreases

image.png
ornate anchor
#

I believe what you need sir is a series of @media queries.

#

IE:

@media (height > 600px) {
  body {
    height: 1.4;
  }
}

@media (400px <= width <= 700px) {
  body {
    height: 1;
  }
}
#

https://developer.mozilla.org/en-US/docs/Web/CSS/@media
https://www.w3schools.com/cssref/css3_pr_mediaquery.php
https://www.w3.org/TR/mediaqueries-5/

MDN Web Docs
@media - CSS: Cascading Style Sheets | MDN

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

ornate anchor
#

Did you solve your problem?