4 Replies - 209 Views - Last Post: 11 September 2019 - 04:17 PM

#1 jaik22   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 11-September 19

how can I remove blank spot after skewY between two images in html?

Posted 11 September 2019 - 10:08 AM

I am trying to combine two pictures in HTML, but I am seeing the blank spot after using skewY in CSS. How can i make bottom image and white spot to combine it to fit in the design view?

Below is HTML. I am adding image 1 into <div class="header__bg"> and image 2 into <section class="main_image">.
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="HTMLPage2.css">
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <header>
        <div class="header__bg"></div>
        <h1>test</h1>
    </header>

    <section class="main_image">
    <h1>Section Content</h1>
    </section>

</body>
</html>

Below is CSS. I am trying to code to add 2 images make shape i want. I would like to see blank part to be part of bottom image.
header {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.header__bg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("GettyImages2.jpg");
    transform: skewY(-6deg);
    transform-origin: top left;
}
section.main_image {
    background-image: url("GettyImages1.jpg");
}


h1 {
    margin: 0;
    padding: 100px 0;
    font: 44px "Arial";
    text-align: left;
    margin: 35px;
}

header h1 {
    position: relative;
    color: white;
}

I see white section between images and I would like white section to be part of bottom image. Is there any ways to do this?

Is This A Good Question/Topic? 0
  • +

Replies To: how can I remove blank spot after skewY between two images in html?

#2 DarenR   User is offline

  • D.I.C Lover

Reputation: 634
  • View blog
  • Posts: 4,201
  • Joined: 12-January 10

Re: how can I remove blank spot after skewY between two images in html?

Posted 11 September 2019 - 10:50 AM

do you have an image of what you are seeing
Was This Post Helpful? 0
  • +
  • -

#3 jaik22   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 11-September 19

Re: how can I remove blank spot after skewY between two images in html?

Posted 11 September 2019 - 02:00 PM

View PostDarenR, on 11 September 2019 - 05:50 PM, said:

do you have an image of what you are seeing

Hmm.. I am trying to attach a screenshot, but giving me "Error The server returned an error during upload" error. Is there any ways to upload an image to this post? my image is less than 2mb and i've tried with png and jpg.
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15225
  • View blog
  • Posts: 60,943
  • Joined: 12-June 08

Re: how can I remove blank spot after skewY between two images in html?

Posted 11 September 2019 - 02:16 PM

try using imgur.
Was This Post Helpful? 0
  • +
  • -

#5 jaik22   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 11-September 19

Re: how can I remove blank spot after skewY between two images in html?

Posted 11 September 2019 - 04:17 PM

View PostDarenR, on 11 September 2019 - 05:50 PM, said:

do you have an image of what you are seeing


https://imgur.com/a/mNfgNq4

Here is the sample image from Imgur.

Thank you :)

View Postmodi123_1, on 11 September 2019 - 09:16 PM, said:

try using imgur.


Thank you for the tip :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1