Got a question specifically about the background image on a simple site I'm building.
http://polyamsterdam.nl/
The background image in question is behaving like it should (or at least as I want it to) on my laptop. It sticks to the bottom right corner of the screen.
On mobile (tested it on iPhone so far) the image also sticks to the bottom right corner but if there's more content then fits the screen the background image is pushed to the bottom of the page (instead of just the bottom of the screen).
Haven't been able to find a solution in the archive so I hope someone is able to help.
Thanks, Peter
I only tested in browserstack but adding this fixed the problem in Chrome for Android:
body, html {
height: 100%;
}
Edit:
I misunderstood the question. The best way I can think to fix this is to apply the background to an element that has the dimensions of the screen and has position: fixed set to it. The way backgrounds work, you will always get the image pushed to the bottom. Don't forget to set the z-index correctly (to -1 for instance) to make it stick to the back of the page.
So, in your HTML:
<body>
<div id="heartbackground"></div>
<!-- the rest of your HTML... after this -->
</body>
Then in your CSS
#heartbackground {
position: fixed;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
}
I noticed the glitch that i can't remove somehow, on all pages of the website the grey footer is not sticked to the bottom of the screen...
Here is the small page:
As i can see the white space under footer belongs to <body> tag but i can't fix this.
I tried:
position: absolute;
bottom:0;
But in did not help, also as changing padding, margin styles of body, content or footer.
Help please.
You seem to have a button there.
Find the following line:
<button id="authorize-button" style="visibility: hidden">Authorize</button>
and remove it, or do something about it. Perhaps move it up
The problem I'm finding has to do with the line-height property set on your body tag. Removing that property seems to fix the issue.
I would recommend using line-height only where necessary (ex. If you need to use it on your nav or in your content tag, do it).
Hope that helps!
EDIT: Setting position: absolute will work if its parent container is position: relative.
I got it to work like so:
.b-footer {
position: absolute;
width: 100%;
}
and you want to add position: relative to your .b-content container so the absolute works. I see it working in Chrome right now.
I am attempting to position a background image so that it lines up with an existing gradient background, which is relatively positioned to the <html> element (ie. the gradient image appears at 92% of the browser width, no matter how you size the window).
I did it by placing the image inside a <div>, positioning the image relative to the <div>, and positioning the <div> relative to the browser window.
eg.
<body>
<div id="background-position-container">
<img src="images/bubbles.png" id="background-corner-decoration" />
</div>
</body>
with:
<style>
#background-position-container {
position: absolute;
width: 0px;
height: 0px;
top: 180px;
left: 92%;
}
#background-corner-decoration {
position: relative;
/* tweak the position of the image so it lines up with the gradient */
top: -176px;
left: -118px;
width: 216px;
height: 477px;
margin: 0px -118px -176px 0px;
}
</style>
This seems to work well, but if you shrink the browser window horizontally, the background image will cause the <body> element to grow beyond the <html>element, and scrollbars appear.
I seem to be able to fix this by creating a new sibling element of <body> and placing the <div> inside that:
<div id="background-page-container">
<div id="background-position-container">
<img src="images/bubbles.png" id="background-corner-decoration" />
</div>
</div>
<body>
</body>
and adding:
#background-page-container {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
This works in Firefox at least, but this does not seem like a good practice and I'm sure all browsers do not render this properly. Is there a better way to accomplish what I want while leaving all display elements inside <body> (That is, having the background image clipped at the edge of <body> instead of growing it)?
Thanks for your help,
gs.
Edit: As requested, here are jsfiddles to illustrate the problem:
Here is what it looks like with Hiigaran's solution: http://jsfiddle.net/kn36A/
Here is a solution that aligns properly, but causes unsightly scrollbars when the window is re-sized: http://jsfiddle.net/w446Q/
Here is the "best" (?) solution I have so far, but it seems to violate HTML best-practices: http://jsfiddle.net/H2PLr/
Every browser I have tested #3 with seems to render it properly so far - is this solution really as bad as I think it is?
Thanks again!
gs.
Assuming I read correctly...
You can combine background CSS by separating them with commas. So for instance, if you want to have an image and a gradient as the background for the same thing, try:
background-image: url('image.png'), linear-gradient(#bb0000, #0000bb);
You can then add other background CSS properties like background-position in the same manner:
background-position:50px 50px, 0;
The order of the values matters. The first set of values (50px 50px) applies to the image, but not to the gradient. The second background-position value (0) applies to the second background-image value, which is the gradient.
Using this on your HTML, you should be able to position your image with absolute or relatively values.
EDIT: Also, if you add any additional background property without commas, then the value you provide will apply to all backgrounds. For example, background-repeat:no-repeat will not repeat either the image or the gradient, but background-repeat:no-repeat,repeat will be applied to each in the same way that the position values are.
In the comments of the other answer Hiigaran solved the problem by simply starting with solution #3 and moving the outer containing div (called "background-page-container") under <body>. So there's no need for elements to appear outside of <body> as I had thought.
gs.
The following code works differently in Firefox and Webkit (Safari/Chrome) and should not. From what I understand, Firefox is rendering it correctly. How can I make Webkit render it the same?
<!doctype html>
<html>
<head>
<style type="text/css">
.frell {
margin: auto;
position: absolute;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="container">
<button class="frell">Test</button>
</div>
<body>
</html>
Probably inheriting either it's parent's width or getting display:block. What does the Chrome developer tools say? I'd either specify a width (% or px) or display:inline (possibly inline-block)
Firefox is rendering it incorrectly, webkit is rendering it correctly. To make firefox behave, you need to add width: 100% to the class, even then, that won't work in all cases, but it will be closer.
Absolutely positioning an item and specifying both left and right should make the item become the necessary width to fill the space between them. For a simple test, here is a jsfiddle http://jsfiddle.net/c3EeF/2/ that shows what happens when you apply the same class to both the button and div tags. Firefox misbehaves when using the button, and I have been unable to find any setting that makes it work 100% correctly.
I'm working on a printable list of events, the printer prints one page fine, but cuts off some of the text on the bottom, then it print a second blank page
I've tried everything I know but am at a loss.
In print.css, set overflow: visible instead of overflow: auto on div#content. That fixed it for me in Firefox at least. The definition of overflow auto is: "If overflow is clipped, a scroll-bar should be added to see the rest of the content" -- but scroll bars don't exist on printed pages.
I'm guessing that since the content div should span across multiple pages, the browser thinks "you're flowing outside your container and must be clipped with a scroll bar". The container in that case is the first page the content div appears on.
I know this is an old question but here's another, newer way this can happen.
Check if you're using display: flex; on the clipped element. It was the problem for me, setting it to block fixed it.
I found that setting display: inline on container divs also helped. Some of these great answers here have worked for me in certain situations while in others no.
<div class="container">
<div class="content-cutting-off-here">
Some long text that gets cut off at the end of the page...
</div>
</div>
Most people set containers to display block or inline-block. For me it was cutting off text, and setting it to inline circumvented that. This also makes width and height irrelevant for the offending container div; which I have found to be a nuisance when printing.
#media print {
.container {
display: inline;
}
}
Here is a great article that helped me with this solution.
If any of the containers you're trying to print are floated, they'll get cut-off like you're seeing.
In your print.css, make sure you turn off all the floating that you can without destroying your layout. It's a pain, but browser support for printing is weak at best.
Are you already using the print value for the media attribute for your stylesheet like
<link rel="stylesheet" href="print.css" media="print" />
You might also want to use page-break-before attributes for elements that you don't want to break.
I just resolved this problem in ie7. This was in a Sharepoint project, which had various table cells and/or divs set to height:100%. When printed, it would print long forms, the first page or 2 would print as usual, then blank pages instead of the rest.
In my print stylesheet, I set those tables & divs to height: auto, and now it prints fine.
I'm having a different problem in IE8 now. UGH!
if overflow:visible; not works, try overflow-y:visible;
(i had body{overflow-y:scroll;}, and body{overflow:visible;} in print.css not rewrited it...)
I fixed the problem by adding overflow:visible; and give it padding-right: 30px; to substitute for the scroll bars width.
I just ran into this issue and have been scouring the internet for a solution that fit my specific needs. In my case I had about 7 tables nested in a larger table. The only way I was able to get the entire web page to print and display in print preview correctly was to use page breaks. Page breaks are CSS properties that allow you to specify and/or force page breaks by attaching the property to block elements.
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before
just setting display: inline solved my same problem.
Reference link I got, https://www.bennadel.com/blog/851-fixing-divs-that-cause-content-truncation-when-printing.htm
I setup my print sheet to only print the modal content. My fix was to make the modal position: absolute;. My modal was originally position: fixed;.
For me setting overflow:visible; for body solved the problem.
body {
overflow: visible;
}
I've had this issue to. In my case, this was due to an
position: fixed;
Element. I changed this to
#media print{
position: relative;
}
Now I even see new elements that were behind my fixed element, and no cutting off at the bottom anymore.
If the items on the page are getting partially cut off, adding an :after element of 10px did it for me.
<div class="print-row">
<div class="print-items">
<div class="print-item"></div>
<div class="print-item"></div>
<div class="print-item"></div>
</div>
</div>
.print-items {
page-break-before: auto;
page-break-after: auto;
page-break-inside: avoid;
}
.print-item {
break-inside: avoid;
}
.print-item:after {
position: relative;
display: block;
min-width: 100%;
height: 10px;
width: 100%;
content: "";
}
for me, the issue was this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
which putting any value other than 1 for initial scale solves my problem:
<meta name="viewport" content="width=device-width, initial-scale=0.8"/>