Background image position #144

LincMitch · 2018-11-03T10:59:20Z

I'm using HTML-Sketchapp CLI and have this strange bug, where all images are consistently offset by almost 50px.

I'm using CSS background image.

Has anyone seen this before, or can provide any clues?
Is this aa HTML-Sketchapp or HTML-Sketchapp CLI issue?

kdzwinel · 2018-11-05T21:14:16Z

Hey 👋Thanks for reporting! This is not a known bug and we will need a bit more of your help to confirm it:

Which version of html-sketchapp-cli are you using? (we have to figure out which html-sketchapp version we are talking about here)
Can you provide HTML/CSS code for a minimal example that breaks? (we have to reproduce the bug to confirm, triage and fix it)

loliver · 2019-01-18T03:09:43Z

I'm getting a similar issue.

html-sketchapp-cli: 0.6.2
html-sketchapp: 4.1.0

Screenshot from Sketch:

Output html/css from React and Styled Components:

<!DOCTYPE html>
<html>
  <head>
    <style>
      *, ::after, ::before {
        box-sizing: border-box;
      }

      html {
        line-height: 1.15;
        text-size-adjust: 100%;
      }

      body {
        font-family: "Myriad Pro", sans-serif;
        color: rgb(73, 73, 73);
        -webkit-font-smoothing: antialiased;
        min-width: 320px;
        margin: 0px;
      }

      p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
      }

      h1 {
        font-size: 2em;
        margin: 0.67em 0px;
      }

      .ilvjPH {
        position: relative;
        padding-top: 35px;
        padding-bottom: 35px;
        height: 156px;
        overflow: hidden;
        transition: height 0.2s ease 0s, padding 0.2s ease 0s;
      }

      @media screen and (min-width: 768px) {
        .ilvjPH {
          height: 206px;
        }
      }

      @media screen and (min-width: 960px) {
        .ilvjPH {
          height: 21.8367vw;
          padding-top: 3.57142vw;
          padding-bottom: 3.57142vw;
        }
      }

      .jjwZOv {
        left: 0px;
        top: 0px;
        width: 100%;
      }

      .bLLtDN {
        display: block;
        height: auto;
        left: 0px;
        max-height: none;
        max-width: none;
        min-height: 100%;
        min-width: 100%;
        position: absolute;
        top: 0px;
        width: 100%;
        margin: 0px;
        background: url(https://placeimg.com/1000/480/tech) 50% center / cover no-repeat transparent;
      }

      @media screen and (min-width: 960px) {
        .bLLtDN {
          height: 21.8367vw;
        }
      }

      .iNVkAE {
        padding-right: 0.9375rem;
        padding-left: 0.9375rem;
        max-width: 1164px;
        margin: 0px auto;
        transition: max-width 0.2s ease 0s;
      }

      .iTrrix {
        position: relative;
        padding: 20px 2rem;
      }

      @media screen and (min-width: 768px) {
        .iTrrix {
          padding: 40px 2rem;
        }
      }

      @media screen and (min-width: 960px) {
        .iTrrix {
          padding: 4.08163vw 2rem;
        }
      }

      .bJPfoE {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-right: -0.9375rem;
        margin-left: -0.9375rem;
        flex: 0 1 auto;
      }

      .djvfDQ {
        box-sizing: border-box;
        padding-right: 0.9375rem;
        padding-left: 0.9375rem;
        flex: 0 0 auto;
      }

      @media screen and (minw-width: 0em) {
        .djvfDQ {
          flex-basis: 100%;
          max-width: 100%;
          display: block;
        }
      }

      .kRBcr {
        text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 2px;
        margin-top: 0px;
        margin-bottom: 0px;
        letter-spacing: -0.7px;
        line-height: 1em;
        color: rgb(255, 255, 255);
        font-size: 30px;
        font-family: "Myriad Pro", sans-serif;
        font-weight: 300;
        transition: font-size 0.2s ease 0s, line-height 0.2s ease 0s, padding 0.2s ease 0s;
      }

      @media screen and (min-width: 768px) {
        .kRBcr {
          font-size: 40px;
        }
      }

      @media screen and (min-width: 960px) {
        .kRBcr {
          font-size: 4.0816vw;
          line-height: 4.0816vw;
        }
      }

      .eEaKGk {
        text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 1px;
        letter-spacing: -0.4px;
        font-weight: 400;
        line-height: 1em;
        color: rgb(255, 255, 255);
        font-size: 16px;
        margin: 0px;
      }

      @media screen and (min-width: 960px) {
        .eEaKGk {
          font-size: 1.6327vw;
          line-height: 2.2449vw;
        }
      }
    </style>
  </head>

  <body>
    <div data-sketch-symbol="Hero Banner/Example 1" class="sc-cmthru jHdjlg">
      <div data-test-id="hero-banner" class="sc-iQNlJl ilvjPH">
        <div class="sc-hZSUBg jjwZOv">
          <div class="sc-cMhqgX bLLtDN"></div>
        </div>
        <div class="sc-fjdhpX sc-bsbRJL iTrrix sc-kAzzGY iNVkAE">
          <div class="sc-jzJRlG bJPfoE">
            <div class="sc-cSHVUG djvfDQ">
              <hgroup data-test-id="hero-banner-headings">
                <h1 data-test-id="hero-banner-title" class="sc-iuJeZd kRBcr">Hero banner title</h1>
                <p data-test-id="hero-banner-subtitle" class="sc-esOvli eEaKGk">Hero banner subtitle</p>
              </hgroup>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Apologies for the length of the output, let me know if you need anything else to help dig in to this.

acrossell-hedgehog · 2019-05-09T14:55:43Z

I have also had this issue but I've managed to pin down the cause.

background-position: center doesn't work correctly. Using background-position: 0 0 or top left will remedy your problem @loliver @LincMitch @kdzwinel

LincMitch changed the title ~~Image offset~~ Background image position Nov 3, 2018

LincMitch closed this as completed Nov 3, 2018

LincMitch reopened this Nov 3, 2018

kdzwinel added the question label Nov 5, 2018

burakukula added bug help wanted and removed question labels Aug 23, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Background image position #144

Background image position #144

LincMitch commented Nov 3, 2018 •

edited

kdzwinel commented Nov 5, 2018

loliver commented Jan 18, 2019

acrossell-hedgehog commented May 9, 2019

Background image position #144

Background image position #144

Comments

LincMitch commented Nov 3, 2018 • edited

kdzwinel commented Nov 5, 2018

loliver commented Jan 18, 2019

Screenshot from Sketch:

Output html/css from React and Styled Components:

acrossell-hedgehog commented May 9, 2019

LincMitch commented Nov 3, 2018 •

edited