I am using html-pdf (https://www.npmjs.com/package/html-pdf) to generate PDFs based on HTML files.
I am now trying to add background images to these PDFs. One special/additional requirement is that the first page should have another background image than pages 2...n.
My attempt was to make use of the header feature, but the background images are never shown.
I added a header to the template, which is shown correctly, and tried to add a background image using the following CSS:
#pageHeader:after,
#pageHeader-first:after {
content: "";
display: block;
position: fixed;
bottom: 0;
right: 0;
top: 0;
left: 0;
height: 297mm;
width: 210mm;
background-image: url('/background-default.jpg');
background-repeat: no-repeat;
background-size: contain;
}
Just for reference, this is how I am adding the headers within the HTML file:
<div id="pageHeader">Test1</div>
<div id="pageHeader-first">Test2</div>
Any idea what I am doing wrong here?
Or is there a better way to achieve what I am looking for?
I found the solution for the problem:
Due to PhantomJS limitation, apparently I have to also add the images to the body and hide them using display: none;
Once that's done, the images will also show in the header/footer sections of html-pdf.
More detailed information can be found here: https://github.com/marcbachmann/node-html-pdf/issues/12
Related
Heyya,
I've just started writing a website (I'm still pretty new to learning web dev) and I'm having issues with getting a background image to load on a website despite looking around and trying a bunch of different things.
.nav {
width: 100%;
background-image: url("../images/Shadex1.png");
background-repeat : repeat-x;
position : absolute ;
height: 50px;
left : 0;
top : 0;
}
The idea is to get the image to repeat and cover the nav bar and I've tried using both a png and svg files, but I just can't get it to work. I can load the images in the html file and that works fine so I know the file path is correct but CSS just isn't liking it so need a second pair of eyes to take a look.
Thank you for reading and any answers you might come up with.
Try to set width to 100vw and is the uri correct?
Make sure you are able to load the image background-image: url("../images/Shadex1.png"); property. I think there might be chances that url is wrong. if you are getting an image correctly than just see below example.
.nav {
width: 100%;
background-image: url("https://images.unsplash.com/photo-1657037031161-d126c02cce8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw2fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60");
background-repeat: repeat-x;
position: absolute;
height: 100vh; /*I have added extra height for viewing image*/
left: 0;
top: 0;
}
<div class="nav"></div>
I'm working on my website and was originally using two separate images at the size of 210 by 210px for an image link (which changes into another image when hovered over.) However I found that there was always a little flicker when first hovering over the image which obviously bothered me so I decided to switch to a CSS sprite with two the images on it instead. That way I wouldn't get the flicker.
Unfortunately, I can't seem to get the CSS sprite to work successfully. I'm creating my website in Wordpress BoldGrid Post and Page Builder so I'm not doing the HTML/CSS, but the Customizer allows me to add my own Custom CSS which is what I'm doing.
I've given the image link the CSS ID "home" in the image settings (in Post and Page Builder). This is what I've put in my Custom CSS:
#home:hover a {
background:url(https://www.mywebsite.com/hoverimage.png);
position: absolute;
background-position: -210px 0;
}
Currently, the original image isn't budging and I can see the hover image UNDERNEATH the original image (It's border is thicker and I can see it underneath).
I must have missed something with this. Because I'm working in a Wordpress Post and Page Builder it makes following CSS Sprite tutorials online not as straightforward. Hopefully it's a easy fix.
:hover is being used incorrectly...
by using #home:hover a you are only applying the background to the a when the element #home is hovered...
it should be:
#home a {
background:url(https://www.mywebsite.com/hoverimage.png);
position: absolute;
}
#home:hover a {
background-position: -210px 0;
}
Something like below:
#home a img {
display: none;
}
#home a {
background:url("https://via.placeholder.com/420x210");
position: absolute;
width: 210px;
height: 210px;
display: block;
}
#home:hover a {
background-position: -210px 0;
}
<div id="home">
<a href="#">
<img src="https://via.placeholder.com/210x210?text=original%20image">
<a>
</div>
I am trying to hide a .div in based on this page http://pdtuk.com/learn-with-rockjam/ so that the contents of the page moves up.
If I change the properties in the custom CSS in the admin panel of the to the below it functions in inspector but does not seem to update or take any effect when I preview or try and make live. Any ideas on how I can resolve?
.page_banner .background_wrapper{
position: relative;
display: none;
width: 100%;
height: 46.500rem; /* 730px */
background-position: center left;
background-size: cover;
}
I hope I understood your question correctly.
There seems to be an unknown background-image.
<div class="background_wrapper" style="background-image:url('')">
So the specified height: 46.5rem converts to empty space.
One way to solve that:
height: 0
Adding this CSS rule should help:
.page_banner .background_wrapper {
display: none;
}
That element has a defined heigth which creates the unwanted space. Adding display: none makes it invisible and removes it from the document flow. But to be on the safe side you could also add height: 0;
Im using carrierwave with my Rails 4 app.
I'm trying to upload videos to my app and then to display them inside container divs I have created, with controls showing.
I have an uploader file called video_uploader.rb with:
storage: file
def store_dir
"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end
In my projects.rb, I have:
mount_uploader :link_to_video_proposal, VideoUploader
In my projects show, I have:
<div class="embed-container1">
<%= video_tag #project.link_to_video_proposal_url :controls =>true %>
</div>
In my projects css file I define embed-container1 as:
.embed-container1 {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 50px;
width: 200px;
overflow: hidden;
//width: 80%;
//padding-left: 5%;
//padding-right:5%;
margin-bottom: 12px;
margin-top:12px;
}
.embed-container1 iframe,
.embed-container1 object,
.embed-container1 embed {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
When I inspect the element in google, there appears to be a further css div around the code. The div is called video. I didn't not define it and it is not in my code. It has a single line of CSS specifying:
video {
object-fit: contain;
}
I don't know if this is what is causing my problem. When I run the page - I get these problems:
The controls do not appear on the video. Does anyone now why not? I specify :controls => true in my show page.
The box size for embed-container1 is 50px by 200px. However,inspecting the video div in google (a div that I did not create or call) specifies size of 1920*1080.
The div size of embed-container1 shows as 200 * 229px in google inspector. I specified 50*200. The video does not fill that box and does not use my CSS.
Does anyone know how to use Carrierwave to upload videos which acknowledge CSS defined in the project? I can't see how to fix this set of errors.
Thank you
You need to set your css to:
.embed-container1 video{}
and start playing with the styles to fit your requirements :)
(tested on Firefox and Chrome)
I'm creating my first Windows 8 app and I have a problem with CSS!
I have a folder images and background texture bg.png inside it. Also, stylesheet is in css folder.
CSS:
#contenthost {
height: 100%;
width: 100%;
background: url("../images/bg.png") repeat;
}
But nothing happen! I tried background: #999 which works. What should I do?
I tried your example with path to the image relative to the app root and it worked without any issues:
#contenthost {
height: 100%;
width: 100%;
background-image: url('/images/logo.png');
background-repeat: repeat;
}
In terms of your code this would be:
#contenthost {
height: 100%;
width: 100%;
background: url('/images/bg.png') repeat;
}
You can also save the image in your project folder.
And load it in the html page like this:
<img id="mainImg2" src="ms-appdata:///Local//bckgrnd.jpg" />
If it is not the path (using absolute vs. relative as above would fix that) you also need to make sure you have an element with an id = contenthost.
CSS let's you do both id and classes so if you start getting into styling page controls you will see a heavy use of classes like (.mypage .subsection).
Finally, you can always set the background in any individual html file directly on the body tag like:
<body style="background-image: url('/images/bg.png');">