I need to print background image on every page once when I print big html file. Now it prints only on the first page.
So the part of css for that is:
#media all {
body
{
text-align:left;
background-image:url('/C:/logo.png');
background-repeat:no-repeat;
background-position:right top;
}
}
If you specify the background-attachment property as fixed, it renders on every page. The only trouble with this method is that content can clip over top of it (and it only appears to work in FireFox).
<style type="text/css" media="print">
body
{
background-image:url('/C:/logo.png');
background-repeat:no-repeat;
background-position: right top;
background-attachment:fixed;
}
</style>
Another option is for your background image to share the ratio of your printable area (i.e. Letter size 8.5x11 paper with .5 inch margins on all sides is 7.5:10) and to have the logo in a field of whitespace (e.g. http://i.imgur.com/yvVW2mk.png). Then you set the image to repeat vertically and be 100% sized.
<style type="text/css" media="print">
body
{
background-image:url('/C:/whitespace-logo.png');
background-repeat:repeat-y;
background-position: right top;
background-attachment:fixed;
background-size:100%;
}
</style>
I found a way to print a background even on chrome by creating a div with position: fixed that acts as background. I had the idea when background-attachment: fixed didn't work, but it made me think about position: fixed on a div
This way the background is printed fully on every page even on chrome.
https://stackblitz.com/edit/web-platform-vlfqfz?file=index.html
HTML:
<body id="print-layout">
<div class="bg-container"></div>
<div class="content">
<h1>Hello there!</h1>
Long content...
</div>
</body>
CSS
body {
width: 100%;
height: 100%;
margin: 0;
}
.bg-container {
position: fixed;
height: 100%;
width: 100%;
z-index: 0;
background-image: url(https://imgur.com/cjmB60j.jpg);
background-size: 100% 100%;
}
.content {
position: relative;
z-index: 1;
padding: 140px 55px;
}
Be sure to include the CSS file on all pages.
<link type="text/css" rel="stylesheet" href="style.css">
Related
I would like to have a full screen, fixed, responsive background image in the header for a website. I have some css which works fine on desktop browsers, but on chrome on android, scrolling through the website results in the image moving/resizing when the browser address bar is shown/hidden.
Currently I'm using 100vh for the height of the header, with background-attachment: fixed and background-size: cover. Based on what I read at the following link, 100vh should always be sized as if the address bar is hidden. https://developers.google.com/web/updates/2016/12/url-bar-resizing
I've also tried using javascript to get the initial viewport height, and setting the header height to this value. It doesn't seem to work either.
Here is a very simple example, which I've also uploaded to an S3 bucket for ease of viewing on mobile:
<html>
<head>
<style>
html,
body {
margin: 0;
}
.background {
background-image: url(./image.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
</style>
</head>
<body>
<header class="background"></header>
<h1>Should not resize on mobile scroll</h1>
</body>
</html>
Give your .background element an absolute position and add a margin to the <h1>:
<html>
<head>
<style>
html,
body {
margin: 0;
}
.background {
background-image: url(./image.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
h1 {
margin-top: 100vh;
}
</style>
</head>
<body>
<header class="background"></header>
<h1>Should not resize on mobile scroll</h1>
</body>
</html>
I'm trying to add a banner image and adjust its size from the CSS. The IMAGE and the CSS are in the same folder, next to each another.
HTML
<body>
<header>
<div class="banner"></div>
CSS
div.banner {
background: url("games_header.jpg") no-repeat fixed center;
background-size: contain;
display: block;
margin: auto;
max-width: 100%;
height: 25%;
}
You have no content in that element, therefore its height is 0 => no visible background. Just add some content and the background will appear.
The height setting has no effect if the parent element doesn't have a set height. If you want the banner to be 25% of the window height, add this rule:
html, body {
height: 100%;
}
I put it all in the html file I created and this works for my image that's in the same directory. You don't need to call it as div.banner, adding the class to the div is enough to just call it by what you name it.
<head>
<style>
.banner{
height: 100%;
background-image: url('./butterbot.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<header>
<div class="banner"></div>
</header>
</body>
background is an inline attribute and would work with root elements such as html or body attributes if you set the background styling to <body>(just an example). Though it is not advised to use it on the html and body but a fixed position div with 100% width and height as shown below
.banner {
background: url("https://picsum.photos/200") no-repeat fixed center;
position: fixed;
height: 100%;
width: 100%;
}
<div class="banner"></div>
I have two images inside a div. I want the two images to fill the entirety of the div which should be the entire height and width of the webpage. The only problem is, when I use the object-fit attribute, the images don't contain within my container at all. It's almost as if I didn't include the attribute at all. Any way I could get some help with this? Thanks.
#charset "utf-8";
/* CSS Document */
body {
margin: 0;
}
.container {
margin: 0;
display: block;
max-height: 100vh;
}
.image1 {
object-fit: contain;
z-index: 1;
position: relative;
top: 0;
left: 0;
}
.image2 {
object-fit: contain;
z-index: 2;
position: absolute;
top: 0;
left: 0;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sylvanas</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<img class="image1" src="Image_Template_1.png">
<img class="image2" src="Image_Template_2.png">
</div>
<script src="script.js">
</script>
</body>
</html>
You should define width and height for images, object-fit property tries to scale image within its tag size and without proper sizing this property does not work
see: MDN
Check this type CSS Script Once,
And You define the height and width for image to fit the images in web page
.image1 {
/* The image used */
background-image: url("Image_Template_1.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.image2 {
/* The image used */
background-image: url("Image_Template_2.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
and you define the div class inside the body tag like this
<body>
<div class="image1"></div>
<div class="image2"></div>
<body>
I have problem making my banners up and down my webpage scale to always fit the user's screen so I don't have horizontal scroll bars which is bad experience on mobile phones as desktops as well. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
<style type="text/css">
body {
background-image: url("TBG_02.jpg");
background-color: #cccccc;
background-size: cover;
background-repeat: no-repeat;
}
#top,#bottom{width:100%;}
#top,#bottom{height:155px;}
#top{position: fixed;left:0;top:0;}
#bottom{position: fixed;right:0;bottom:0;}
.topp{background-image: url("BG_02.png");background-repeat: no-repeat;background-size: cover;}
.bottomm{background-image:url("BG_03.png");background-repeat: no-repeat;position:fixed;background-size: cover;}
</style>
</head>
<body>
<div id="top" class="topp">
</div>
<div id="bottom" class="bottomm">
</div>
</body>
And this is how the problem looks like:
https://imgur.com/a/WscYr3D
You may notice the bad gray/white space in the photo as well. To note: I will add some images as buttons above the banners. Any ideas?
Your approach is basically sound in using:
background-size: cover;
to ensure that the browser resizes the image to cover the whole of the <body>.
What you are missing though, is that the height of the body does not cover the whole height of the viewport.
To fix this, you can add:
body {min-height: 100vh;}
ie. the height of the body must never be less than 100% the height of the viewport (or 100 viewport-height units).
Working Example:
body, .top, .bottom {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
body {
min-height: 100vh;
background-color: rgb(204, 204, 204);
background-image: url('https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg');
}
.top, .bottom{
position: fixed;
width: 100%;
height: 45px;
background-color: rgb(0, 0, 0);
}
.top{
top: 0;
left: 0;
}
.bottom{
bottom: 0;
right: 0;
}
<div class="top"></div>
<div class="bottom"></div>
The answer from Rounin was cool but it made some troubles; the only thing it missed is that there is no image to put in the divs so they can appear on the banners, then I had to set their width and height and playing with them a bit until it fixed :D
<body>
<div class="top">
<img src="BG_02.png" class="top"/>
</div<
</body>
Basically I am trying to do whats device here :
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position
Have my image in the background has an id on a div.
#wrapper {
height: 900px;
width: 900px;
border: solid black;
margin-left: auto;
margin-right: auto;
}
#idbackground {
background-image: url("http://i.imgur.com/7h8ejPJ.png");
width: 324px;
height: 250px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position:center center;
}
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="idbackground"></div>
</div>
</body>
</html>
instead of centering the image disappears..
You forgot a semicolon after your
background-image: url("http://i.imgur.com/7h8ejPJ.png")
Also add width and height property to your image div to 100%.
#wrapper {
height: 900px;
width: 900px;
border: solid black;
margin-left: auto;
margin-right: auto;
}
#idbackground {
background-image: url("http://i.imgur.com/7h8ejPJ.png"); /* add semicolon here*/
background-repeat: no-repeat;
background-attachment: fixed;
background-position:center center;
width:100%; /*add width*/
height:100%; /*add height*/
}
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="idbackground"></div>
</div>
</body>
</html>
The problem was you were setting a width and height and the image was wrapped within this, so the image was limited with in this boundaries and hence you see the part of image being not visible, and on scroll it completely gets hidden, because the image div is scrolled up..
background-image: url("http://i.imgur.com/7h8ejPJ.png") is missing ; in the end of line.
Your code is missing a semi-colon at the end of the declaration ... It should be
#idbackground {
background-image: url("http://i.imgur.com/7h8ejPJ.png");
....
}
The semi-colon is required to separate between each declaration. It's only allowed to be removed if the declaration is the last one.
This workes perfectly for me.
#idbackground {
background: url(http://i.imgur.com/7h8ejPJ.png)
}
Like Reddy said, make your width and height equal to 100% in your image div.
Should you ever use a non-square image use min-width and min-height properties with a value of 100% to square up to whichever axis is larger.
Also if you'd like you can save yourself typing by consolidating all your background properties into one shorthand background property like such...
#idbackground {
background: url("http://i.imgur.com/7h8ejPJ.png") no-repeat fixed center;
height: 100%;
width: 100%;
}
The shorthand syntax for the background property is as follows...
background: [color] [url(img.jpg)] [repeat_value] [attachment_value] [position_value(s)];
Just make sure you include spaces between each value and replace the bracketed items with the corresponding background- prefixed value. If left out or blank they will just be set to their default values.
Thus, a cleaned up version would be...
#wrapper {
height: 900px;
width: 900px;
border: solid black;
margin-left: auto;
margin-right: auto;
}
#idbackground {
background: url("http://i.imgur.com/7h8ejPJ.png") no-repeat fixed center; /* consolidated background shorthand */
height: 100%;
width: 100%;
}
... with the same HTML markup.