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.
Related
I am a student and I'm having an issue with one of the video tutorials regarding using a background image. I followed the code exactly as is in the video but it's not producing the same results. It just keeps showing the image tiled throughout the whole web-page. Any help would be appreciated.
<style type="text/css">
body {
background-image:url(goku.jpg);
background-repeat:no-repeat;
background-attachment: 50% 60px;
}
</style>
Your background-attachment value is invalid, and you should add a background-sizesetting. In the snippet below I used cover to cover the whole screen, but you can also use other sizes. But then you should also add background-position
EDIT after comment: Well then just change to background-position: 50% 50%;. The image - if you don't use background-size will be displayed at its original size, and with that setting, be centered horizontally and vertically. If you don't like the vertical centering, change the second value to whatever you like, also in pixels, if you want.
html,
body {
margin: 0;
height: 100%;
}
body {
background-image: url(https://placehold.it./240x180/fb4);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}
<div>Test</div>
My background image doesn't want to scale with the rest of the page. And when I've gotten it to do so, it created a huge white-space gap underneath it when I'm scaling down the page.
.vintage {
width: 100%;
height: 100vh;
background-image: url(vintagemcdonalds.jpg);
background-repeat: no-repeat;
}
use background-size:cover for the background-image to cover the whole div.
see here more about this property : CSS3 background-size Property
.vintage { width: 100%;
height: 100vh;
background-image: url(http://placehold.it/350x150);
background-repeat: no-repeat;
background-size:cover;
}
<div class="vintage">
</div>
Try adding the property value cover to your css file.
Like this:
div {
background-image:url('vintagemcdonalds.jpg');
background-size:cover;
}
This enables you to scale the background image to be as large as possible so that the background area is completely covered by the background image.
If some parts of the background image are not visible within the background positioning area, try giving some extra information to your css such as:
width: 100vw;
height: 100vh;
(Note that CSS3 gives us viewport-relative units. 100vw means 100% of the viewport width. 100vh; 100% of the height.)
If you don't want the background image to repeat simply add:
background-repeat:no-repeat;
For more info, check " https://css-tricks.com/perfect-full-page-background-image/ " it will give you a good idea of different approaches to be considered when trying to work with a full screen background.
Hope this helps and good luck! :)
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!
I have a background image of a paper airplane on the body tag of this page: http://cogo.goodfolk.co.nz. The very tip of it is being cut off - if you resize the browser window the full image pops back in.
It's only happening in Chrome, and isn't consistent, if you refresh sometimes, or even hover over sometimes it's fine. If I remove all the background styles (background position and no-repeat) then the whole image is there - but of course isn't positioned correctly. It's also happening on other pages of my website (eg http://cogo.goodfolk.co.nz/online-surveying).
After days of debugging/searching I can't find anything that refers to this issue and/or fixes it - is it possibly a Chrome bug with background-position?
Any ideas or workarounds? Thank you!
//EDITED//
The relevant code is pasted below, although obviously this is pretty standard so it must be something else in the site that's causing the problem:
.home {
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
background-position: 10% 98%;
}
The background image is set to center, so this is expected behaviour, depending on window size. You could change this CSS declaration from:
.home {
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
}
To:
.home {
background: url("../img/airplane.jpg") no-repeat center top;
background-size: 70%;
}
This would anchor the image to the top of the screen, meaning it would not clip, but this may not be the behaviour you are looking for.
To complicate matters, you also have this, which is probably contributing to the problem. I would suggest removing it entirely:
#media (min-width: 1200px)
.home {
background-position: 20% -10%;
}
Yay thanks to everyone who left suggestions, fortunately I've figured out a workaround! I managed to pretty much keep the background styles the same, and just placed everything in a :before pseudo element on the body tag. You can check out the updated code at cogo.goodfolk.co.nz if you're interested, or it's pasted here:
.home {
position: relative;
min-height: 860px;
}
.home:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
background-position: 50% 15%;
}
Set the display to "inline-table".
I created a <div> first thing in the <body> to draw a top line at the top of the page:
<body>
<div class="bordertop"></div>
.....
</body>
and the style:
body {
font-family: Helvetica, Arial, sans-serif;
-webkit-text-size-adjust: 100%;
margin:0;
}
.bordertop {
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
}
However, the top_border image doesn't appear unless I write some text inside the <div> but I don't want to. How could I fix this?
Since the div is empty, there's no content to push it "open" leaving the div to be 0px tall. Set explicit dimensions on the div and you should see the background image.
.bordertop
{
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
height: 100px;
width: 100%; /* may not be necessary */
}
You might need to set the css width and height of your <div> element to whatever size you want
.bordertop {
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
width: 200px;
height: 100px;
}
Give the div a height:1px. That should work. Otherwise your div is 0px high, meaning you won't see anything.
You could also give it padding-top:1px
Another thing you could do is to set the background-image of the line on the body in your CSS. This is assuming the line is the entire width of the body.
See demo
As the answers above me suggest ^^' it's because it has virtually no size, you need either to put content inside to resize it or to set width/height or padding in css bordertop class, or you can put another empty inside it with set size. I was going to skip this answer since there are already answers but I just wanted to add that width/height is not your only option.
On a side note, oh man, people here posting so fast I sometimes wonder if its a race and what is the prize, there must be some, I guess helping other is itself great prize. :) When I was starting to type this there was no answer yet.
The best way I have found is:
for landscape:
width:100%;
height:0;
padding-top:[ratio]%;
for portrait:
width:[ratio]%;
height:0;
padding-top:100%;
You need to determine which side is longer and accept this dimension as 100%
then calculate [ratio] - percentage of shorter dimension in relation to 100% longer dimension. Then use the one of solutions above.
I had the same problem for quite some time, my solution was giving the style lines of: min-height. This opens the div to the height given if there is no elements inside. The height can get bigger with the more elements inside, but not smaller.
Example code:
.fixed-bg {
/* The background image */
background-image: url("img_tree.gif");
/* Set a specified height, or the minimum height for the background image */
min-height: 500px;
/* Set background image to fixed (don't scroll along with the page) */
background-attachment: fixed;
/* Center the background image */
background-position: center;
/* Set the background image to no repeat */
background-repeat: no-repeat;
/* Scale the background image to be as large as possible */
background-size: cover;
}
code gotten from https://www.w3schools.com/cssref/pr_background-attachment.asp
If it is the only div element in the body use the following style to to make it occupy the full-width.
.bordertop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image:
url('../images/top_border.png');
}
I couldn't get my background showing in the div even with the width set up. Turns out i had to put "../" in the url section then it showed the picture i was struggling for quite a while.
left {
width: 800px;
height: auto;
min-height: 100%;
position: relative;
background-image: url("../img/loginpic.jpg");
background-size: cover;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background-color: crimson;
}
Otherwise, you can just open a <p></p> and in styles, remove the default margin length, that's margin: 0; and add height: 0.1px which doesn't consume much space, so it'll work.
Note: it'll work properly until it's not zoomed out more than 50%, so make sure of the use case before you apply it to the body.