edge-reflow / issues

Issue submission for Edge Reflow
20 stars 10 forks source link

Background image and gradient results in blank HTML Export #193

Open PBXg33k opened 9 years ago

PBXg33k commented 9 years ago

When adding a box and giving it a background image AND gradient the box will only show the gradient in the generated HTML/CSS and not the image.

This is caused by an error in the CSS file that refers to the local file (using the file:// directive)

Here's the generated CSS code for a block. The (second) background-image property causes the webbrowser to 'hide' the image.

    float: left;
    height: 150px;
    margin-left: 1%;
    margin-top: 10px;
    clear: none;
    width: 150px;
    min-height: 50px;
    display: block;
    margin-right: 0%;
    background-image: -webkit-linear-gradient(270deg, rgba(255, 255, 255, 0) 71%, rgba(0, 0, 0, 0.529412) 77%),url("img/cover5-220x220.jpg");
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 71%, rgba(0, 0, 0, 0.529412) 77%), url(file:///C:/Users/PBX_g33k/Pictures/MikuDB-DRAFT-v0-1-2/assets/img/cover5-220x220.jpg);
    background-attachment: scroll;
    -webkit-background-size: auto, auto;
    background-size: auto, auto;
    background-position: 0% 0%, 50% 50%;
    background-repeat: repeat, no-repeat;

Steps to reproduce:

  1. Add a box
  2. Add backgrounds 2.1 Add a local file 2.2 Add gradient layer (make sure the gradient overlays the image)
  3. Export HTML or start Inspect CC