I'm not expert in CSS, so bear with me in advance if my question may seem silly to experts.
I'm trying to find out a way to make the product pages of my website look nicer when printed out.
To this purpose, I'm trying to add a background image which has a logo in the header, a footer and a message in the left side margin.
In order for these background elements to show, I've set the size and margins of the page in the custom.css file of my template (I'm using Joomla CMS). This is the code I used (which correctly does what I meant, that is, making the content appear within the set margins):
#page {
/* set size of printed page */
size:210mm 297mm;
margin-top:25mm;
margin-bottom: 12mm;
margin-right: 3mm;
margin-left: 8mm;
}
Then, in the .css file of the page I added this code:
body {
background-color: white !important;
background-image: url('/images/print/sfondo-pdf_v2.jpg') !important;
background-position: 0px 0px !important;
background-size: 100% auto !important;
background-repeat: repeat-y !important;
background-origin: border-box !important;
background-clip: border-box !important;
background-attachment: scroll !important;
}
The problem is, the background is not contained in the total size of the page (i.e. 210mm 297mm), but it is instead contained within the margins previously set.
I would like to know what I should do in order for only the background to ignore the #page margins.
I hope I have clearly explained my point and thank you all in advance!
Related
I am trying to customize the Lightbox/zoom feature in Cargo Collective, believe it uses Photoswiper.
As of now it fills the whole screen and would like to be able to control the size so it does not cover the top and bottom nav bars. Can I add some padding or block to the PSWP? The PSWP is not showing up in the general CSS editor. SO it seems as though I would need to add some of my own code.
The goal is trim off the top and bottom and also control the size of image when zoomed.
Thank you in advance.
I came across the same problem trying to resize the PhotoSwipe image within my Cargo Collective site. I added the following to the custom CSS and it worked perfectly:
.pswp img {
object-fit: contain !important;
max-height: 400px !important;
max-width: auto !important;
margin-top: 100px;
margin-bottom: 100px;
}
I also styled the background with the following. You could also add margin top and bottom here if you want to add a gap in the PhotoSwipe background.
.pswp__bg {
background-color: #fff !important;
}
.Pswp_bg image-zoom-background {
background-color: #fff !important;
}
Cheers!
An update - this solution looked great on my screen but too small on a big screen. Styling with percentages rather than a single px size is a better solution here. Hence:
.pswp img {
object-fit: contain !important;
max-height: 70% !important;
max-width: auto !important;
margin-top: 5%;
margin-bottom: auto;
}
I've been trying to set a background image to a div in css i.e.
React.createElement("div", {className: "icon"})
.icon {
background: url("../images/icons/icon.png") 0 0 no-repeat;
}
Nothing seems to be displaying. I've also verified that the image is in the correct location.
However, when I set .icon to display: list-item i.e.
.icon {
display: list-item;
background: url("../images/icons/icon.png") 0 0 no-repeat;
}
the image appears on the page. Is there any reason why display-list item works, but nothing else will? is there a way to get the background image working without having to use display: list-item?
It depends: Does your .icon DIV have any content?
Because, if a DIV doesn't contain anything, it has no size (i.e. height zero), so you wouldn't see a background-image.
However, a li by default is always at least one line high (i.e. the line-height that's defined for it) and 100% wide, even if there is no content, so you'll see a background-image...
Try something like the following;
Create a div with the following css code:
div {
height: 400px;
width: 400px;
background-image: url("INSERT URL HERE");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
That should create a perfect square on the page with the image you post between the quotations as its background.
Hi i have a problem with my wordpress site - i used this css to change the background of page :
.page-id-689 #primary {
background: url('http://www.gamekey.sk/wp-content/uploads/2015/09/thief-totalne.jpg') no-repeat center center !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
min-height:100% !Important;
}
the problem is that the background wont show on the whole page ( Screenshot).
I already tried :
.page-id-287 #page_wrapper { height:100% !important; margin: 0px auto; }
html, body { height: 100% }
i also tried setting min-height to 100 % - wont work
!!! the problem is solved when i set the height to 1200px in #primary but it also causes huge problems in lower resolutions. Can someone help me with this ?
You should set height of all container elements to 100% down to html element http://prntscr.com/8o41id
background-size: cover; covers the size of the container. Looking at your site the #primary id is only going to be as large as the content within it. If you want it to have the same height as the image so it covers the entire page you need to set an actual height value. Try adding height: 802px; and it will fix it, as that's the height of the image.
If you want a more graceful solution add this to the body:
body {
background: url('http://www.gamekey.sk/wp-content/uploads/2015/09/thief-totalne.jpg') no-repeat center center fixed;
}
And remove the background-color from .st-content.
If you want multiple pages to have different backgrounds you'll need to create a separate wrapper with a unique ID that runs the entire width and height of the page regardless of the content on it.
More information on background-size can be found here: http://www.w3schools.com/cssref/css3_pr_background-size.asp
I'm having a problem displaying a small image using CSS. I'm trying to show an icon sized picture (the picture has a few pixel border so it isn't edge to edge) but the image itself isn't centered when it's displayed and part of it is being hidden by the right and bottom shadows of the surrounding box. I like the look of the shadows but I think the image is so small, the shadows of the box can't be ignored in the sizing. Here's my CSS. Any ideas?
.delete_button {
background: url('trash_can.png');
background-repeat: no-repeat;
width: 20px;
height: 24px;
display: inline;
}
Try this, adjusting the background-position values until your image is positioned correctly:
.delete_button {
background: url('trash_can.png');
background-repeat: no-repeat;
width: 20px;
height: 24px;
display: inline;
background-position : -3px -4px;
}
Expanding on this a little further, you might want to try to add all your small images into one icon image in a matrix style. Then you can select just the image you want using the width, height and background-position. This will allow all your icons to be loaded at once as a single file, reducing internet traffic. When a "new" icon is needed, it will already be cached and immediately be available.
background-image: url("icons.png");
background-position: 30px 40px; /* Use these values to select your small image contained in your large image */
background-repeat : repeat;
width : 20px; /* or however large your icon is */
height : 24px; /* or however large your icon is */
I have the following problem:
When I print a certain page from my website, and the content of this page doesn't fill all the paper, the background image cuts there. But what I need is to have the background image repeated through all the paper, no matter how much of the paper is taken by the contents.
I'm so sorry, I know it's a little odd this question, so I had a lot of trouble trying to explain it.
Thanks a lot to anyone who can help me.
Use this..:
body
{
background-color:#454545;
background-image:url("background.jpg");
background-repeat:no-repeat;
background-attachment: fixed;
background-size: contain;
zoom: 100%;
}
paste this in your css, it is "attachment fixed" that you are looking for...the background image will never scroll with rest of the page and also you can apply "fixed" to other elements to make them scroll-free.
If the background is attached to the BODY element and it is set to background-repeat: norepeat in your CSS, try
#page {
margin: 1cm; /* or any other small value, maybe even 0 */
}
#media print {
body {
background-repeat: repeat;
}
}
Let's say your image is right in the body tag, your only chance is setting
html, body {
width: 100%;
height: 100%;
background: url(../bg.png) repeat 0 0;
}
But you will never be able to have the background stretch all over the paper as the browser sets a margin on every border. This can be set to 0 by the user in the printing dialog, but can't be controlled by the css / you.