Sure..!!

I'm making quick site to consume API with different news as an excercise. Until I've implemented logic in Angular it was allright (altough i doubt that Angular is the issue here). Thing is that all of properties that I've grabbed from url and displayed are stacked one on another causing visual gibberish. All except {{article.title}} which makes me guess it has something to do with css positioning.

You can see actual result here with code.

Stylus code:
html, body
width 100%
height auto
min-width 800px
background url('http://wallpaperlatest.com/wp-content/uploads/cool-nike-wallpaper-30.jpg') no-repeat center fixed

.header
//TODO

.grid
padding 10px
width 100%
height auto

.box
background rgba(255, 255, 255, 0.5)
display inline-block
width 300px
height 400px
margin 10px 5px
box-shadow 0 2px 1px -1px

.image
background-repeat no-repeat
background-position center
position absolute
width 300px
height 200px
box-shadow 0 2px 1px -1px

.image > img

.author
background rgba(255,255,255,0.4)
position absolute
right 0
top 170px
padding 5px 10px
float right

.author > p
margin 0 0

.info
width 300px
height 200px
position absolute
top 290px
padding 10px

.title
font-size 1vhmin

.upVotes
position absolute
top 170px

.date
position absolute
top 170px
right 10px

main(ng-app='CamperNews')
h1(style="text-align: center;")
| Camper News
a(href='http://wallpaperlatest.com/wp-content/uploads/cool-nike-wallpaper-29.jpg' target="_blank")
small FreeCodeCamps zipline
.container-fluid(ng-controller='MainCtrl as ctrl')
.grid(ng-repeat="article in news")
span
.box
.image(ng-style="{'background-image':'url({{article.image}})'}")
.author {{article.author}}
.info
.title
p {{article.title}}
.upVotes
i.glyphicon.glyphicon-heart {{article.upvotes}}
.date {{article.date | date:'dd MMMM yyyy on HH:mm'}}

I have a problem, as situated in the image:
When I am scrolling down, the background image I have (the blue one) gets a white area, while that should be blue too. The blue background should be blue everywhere, yet because it's skewed and I am using it as a fixed background image, it does not work, somehow.

Source: Background Wallpaper

HTML
<div class="wrapper">
<p>Here comes some text and so on</p>
</div>

CSS:
.wrapper {
background: url("myimage.png");
background-attachment: fixed;
transform: skewY(3deg);
min-height: 500px;
}

The white background you can see, is the body background. It should not be there, yet it is, somehow. When I would remove background-attachment: fixed, it works, yet I want to have it fixed as I am using parallax scrolling.

So it looks like transform: skewY(3deg); and background-attachment: fixed are blocking each other. I tried adding z-index and so on, but nothing is working for me at the moment.

Is there a way to fix this?

http://wallpaperlatest.com/3d-wallpaper/

const jsreport = require('jsreport');

router.get('/jsreport', (req, res) => {

const headerImageUrl = 'http://wallpaperlatest.com/wp-content/uploads/biker-destination-hd-wallpaper-latest.jpg;

Have a look here: <img src='${headerImageUrl}' style="display: none;"></img> <h1> Invoice </h1> <div><span>from: {{:from}}</span></div> <div><span>to: {{:to}}</span></div> <div><span>price: ${{:price}}</span></div> <div style='page-break-before: always;'></div> <h1>Hello from Page 2</h1>;

const jsreport = require('jsreport');

router.get('/jsreport', (req, res) => {

const headerImageUrl = 'http://wallpaperlatest.com/wp-content/uploads/cool-latest-hd-wallpaper.jpg;
const invoiceTemplate = <img src='${headerImageUrl}' style="display: none;"></img> <h1> Invoice </h1> <div><span>from: {{:from}}</span></div> <div><span>to: {{:to}}</span></div> <div><span>price: \${{:price}}</span></div> <div style='page-break-before: always;'></div> <h1>Hello from Page 2</h1>;

jsreport.render({
template: {
  content: invoiceTemplate,
  engine: 'jsrender',
  recipe: 'phantom-pdf',
  phantom: {
    header: `<img src='${headerImageUrl}' width="135" height="25"/> <span>My Great Report</span>`,
    footer: '<span>{#pageNum}/{#numPages}</span>',
  }
},
data: {
  from: 'Bob Barker',
  to: 'Amy Adams',
  price: 41.99,
},

}).then(function(out) {
console.log('SUCCESS!');
out.stream.pipe(res);
}).catch(function(e) {
console.log('error ');
console.log(e);
res.end(e.message);
});
});