The first page of my pdf is a cover page, and has a different background than the other pages. 2nd page as following. When I do this, however, the bottom of the page is missing, even if I resize the image. Oddly, I've found that using the img tag works fine.
#page {
size: 21cm 29.7cm;
margin:0;
}
#poppen1{
background: url(mainimages/ersteseite.png);
background-repeat:no-repeat;
background-size:contain;
page-break-after: always;
color:red;
}
#poppen2{
color:black;
background: url(mainimages/zweiteseite.png);
background-repeat:no-repeat;
padding:2cm;
margins:0;
}
div.footer { position: fixed; bottom: 6mm;left:0.9cm;
width:19.2cm;height:6mm;border-top:1px solid black; }`
require_once("./dompdf/dompdf_config.inc.php");
$html="<!DOCTYPE html><html><head><title></title>";
include("./maincss/xyzcss.php");
$html=$html.$css_print.'</head><body>
<div id="poppen1">
text';
$html.='</div><div style="page-break-before: always;"></div><div
id="enter code herepoppen2">
more text</div>';
$html.='</body></html>';
$dompdf=new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
#$dompdf->stream($docname);
New try:
#page {
size: A4;
margin-top:2cm;
margin-bottom:2cm;
margin-left:2cm;
margin-right:2cm;
padding: 0;
}
body {
font-family: helvetica !important;
font-size: 10pt;
}
#overlay {
position: fixed;
top: -2cm;
left: -2cm;
height: 100%;
width: 100%;
background-image: url("mainimages/ersteseite.png");
background-position: center top;
background-repeat: no-repeat;
}
Background is being cut at bottom and top left, even tried height 90% and height 21cm, and div and p . No solution....
Related
I need to place an image behind (or in front of - it doesn't matter) my h1 text, with it positioned so that it will always be a little to the right of the end of the text, like this:
I can't seem to get the background image to display either on top of or behind the text. What am I missing?
h1 {
text-align: center;
}
h1:after {
content: "";
background: url("https://static1.squarespace.com/static/50f111c8e4b02b3b2218af91/t/5d9fa26b176671739c726240/1570742891482/CRMC-2020-Measure-h1-1a.png") no-repeat;
background-position: -85px 12px;
background-size: 32%;
width: 400px;
height: 50px;
position: absolute;
}
<h1>Dynamic Headline</h1>
With :after, I can't get the image to display behind or above the text.
In order to shift the background to display on top of the text, instead of the background-position you're looking for margin-left. Note, however, that you can't apply margin-bottom to an absolutely-positioned element, so you'll still need to make use of background-position to adjust the vertical offset. I've changed this to 4px in the following example:
h1 {
text-align: center;
}
h1:after {
content: "";
background: url("https://static1.squarespace.com/static/50f111c8e4b02b3b2218af91/t/5d9fa26b176671739c726240/1570742891482/CRMC-2020-Measure-h1-1a.png") no-repeat;
background-size: 32%;
width: 400px;
height: 50px;
position: absolute;
margin-left: -85px;
background-position: 0 4px;
}
<h1>Dynamic Headline</h1>
I would wrap the text with a span, that has left and right padding, and then put the image as the background of the span, and position it to the right:
h1 {
text-align: center;
}
h1 span {
padding: 0 1.3em;
background: url("https://static1.squarespace.com/static/50f111c8e4b02b3b2218af91/t/5d9fa26b176671739c726240/1570742891482/CRMC-2020-Measure-h1-1a.png") right top no-repeat;
background-size: contain;
}
<h1>
<span>Dynamic Headline</span>
</h1>
And the same idea without a span, but not supported by IE/Edge due to width: content-fit.
h1 {
width: fit-content;
margin: 0 auto;
padding: 0 1.3em;
background: url("https://static1.squarespace.com/static/50f111c8e4b02b3b2218af91/t/5d9fa26b176671739c726240/1570742891482/CRMC-2020-Measure-h1-1a.png") right top no-repeat;
background-size: contain;
}
<h1>Dynamic Headline</h1>
I am making a simple landing page and am trying to get the following image to be the background fullscreen: image
My CSS currently looks like this:
body {
background-image: url('/images/bg.jpeg');
width: 100%;
height: 100%;
position: fixed;
}
A majority of the image is getting cut off, what's the best way to remedy this?
Thanks !
Did you tried this :
body {
margin:0;
padding:0;
background: url('/images/bg.jpeg') no-repeat center fixed;
-webkit-background-size: cover;
background-size: cover;
}
Heres a cool idea for a landing page. The background, being fixed is a popular cool way for landing pages. Please, to see this properly, click "Full Page" on the top right after clicking run code snippet.
#import url(https://fonts.googleapis.com/css?family=Lato:300);
div:nth-child(1){
background-image: url(https://images.unsplash.com/photo-1431538510849-b719825bf08b?q=80&fm=jpg&s=6fd7a983e3b43e66d2b6062856b9df66);
height: 750px;
width: 100%;
background-size: cover;
background-attachment: fixed;
}
div:nth-child(2){
height:400px;
width: 100%;
background-color: black;
z-index: 1;
}
h1{
text-align: center;
color: white;
background-attachment: fixed;
font-family: 'Lato', sans-serif;
padding-top: 300px;
z-index: 0;
text-shadow: 0 0 2px black;
font-size: 50px;
}
<div>
<h1> Michael Barreiro </h1>
</div>
<div></div>
short question: How do I achieve this scrolling effect with css? ->
http://focuslabllc.com/
I already tried this:
#one {
background: url(http://images.buzzillions.com/images_products/07/02/iron-horse- maverick-elite-mountain-bike-performance-exclusive_13526_100.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment:fixed;
}
#two {
background: url(http://img01.static-nextag.com/image/GMC-Denali-Road-Bike/1/000/006/107/006/610700673.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment:fixed;
}
Thanks! :)
Its called a "curtain reveal" but in this instance its in reverse. http://www.thecssninja.com/css/reveal-effect
Essentially the first "slide" is located "below" all the other content and set to position: fixed and say z-index: 1 and all the others are set to position: relative and z-index: 10
http://jsfiddle.net/3n1gm4/8gDDy/
so in code it would be
HTML
<div class="slide1">CONTENT</div>
<div class="slide2">CONTENT</div>
CSS
.slide1 {
position: fixed;
z-index: 1; /* sets it below the other slides in the layer stack */
height: 100%
}
.slide2 {
position: relative;
z-index: 10; /* sets it above .slide1 */
margin-top: 100%; /* this pushes it below .slide1 in the scroll */
height: 100% /* full length slides */
}
* This was quickly done and probably not 100% accurate but intended to give you a basic idea about whats going on there.
Ok, you can do this with just CSS.
HTML
<div class="main">Sample text/div>
<div class="reveal-me-holder"></div>
<div class="reveal-me">Revealed</div>
CSS
body {
margin:0;
}
.main {
height: 700px;
position:relative;
z-index: 2;
background: red;
}
.reveal-me {
height: 500px;
position:fixed;
bottom:0;
width:100%;
background: black;
color:white;
}
.reveal-me-holder {
height: 500px;
}
This jsfiddle shows the results.
I am having problems with a site's header displaying correctly when a person zooms in with the browser. The banner will cut off on the right side and show the body background image. The address to the site is: http://www.bemidjisportsonline.com, Any ideas on a way to fix this? Thanks. I will post my CSS for the body, header, and banner elements below. A screenshot of what I am talking about can be found here: http://prntscr.com/19e59r.
body{
font: 100%/1.25 Arial, Helvetica, sans-serif;
/*background: url(/_images/background-repeated.png) top center repeat-x;*/
background: url(/_images/background_jersey_green.jpg) #010101 top center repeat-x;
}
header, nav, section, article, aside, footer {display:block;}
header{
width:100%;
position: relative;
background: url(/_images/header_trees.png) no-repeat;
background-size: 100% auto;
height: 7em;
}
#banner{
z-index:100002;
margin: 0 auto;
width:75em;
height:7em;
}
You need to change the background-size. Like this:
header {
width: 100%;
position: relative;
background: url(/_images/header_trees.png) no-repeat;
background-size: 100% 100%;
height: 7em;
}
Try changing the #banner width to 100%.
#banner {
z-index: 100002;
margin: 0 auto;
width: 100%;
height: 7em;
}
I am trying to duplicate this style of a sidebar menu with the background image, but when I use the same stylesheet code and image, it doesnt span the entire height of the sidebar.
The example: http://demo.ponjoh.com/Simpla-Admin/index.html
The css used (on example site and mine):
#sidebar {
background: url("../images/bg-sidebar.gif") no-repeat scroll left top transparent;
color: #888888;
font-size: 11px;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 230px;
}
On my site, the image only displays in its actual dimensions (230x197) and doesnt fill the sidebar. What am I missing?
The person who coded that CSS implemented the background image of the sidebar twice. Once in the body and once inside the sidebar.
body {
font-family: Arial, Helvetica, sans-serif;
color: #555;
background: #F0F0F0 url('../images/bg-body.gif') top left repeat-y;
/* sets bg image of sidebar, and #F0F0F0 for the rest */
font-size: 12px;
}
Here's what you're missing though:
background: url("../images/bg-sidebar.gif") repeat-y top left;
If the background image is a repeatable image... change no-repeat to repeat or vertically repeat-y
You would have to add a bottom: 0; as well as position: relative; to the #body-wrapper and activating the background-repeat. But be warned! This is a very dirty CSS coding method and will probably lead to misunderstandings and failures - still it works.
#body-wrapper {
/* Your code stuff ... */
position: relative; /* absolute positionings are 'relative' to their first 'position: relative;' parent */
}
#sidebar {
width: 230px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: url("../images/bg-sidebar.gif") repeat-y scroll left top transparent;
color: #888888;
font-size: 11px;
}