I have a website that uses an image as its background over the entire page. In order to do this, I am using the new CSS3 spec "background-size", which is set to "cover".
background-image: url(/images/House-Remodel-Ideas2.jpg);
background-repeat: no-repeat;
background-size: cover;
Generally speaking this works well, but I noticed that if the window starts to get too narrow (and this a fairly wide image, so even 1024x768 is "too narrow") then the image stop filling the page and instead I see the background color of the page.
This kind of destroys the look of the page. While I suppose I can get creative about both the size of the image and the overall design of the page, it would be nice if this worked as expected. I'm OK with the image spilling over or getting clipped, but I'm not OK with it being too small and leaving the page background showing.
Is there a way to set this up so that doesn't happen?
An example was requested, so... here is the image I'm using:
http://i.imgur.com/igLMC.jpg
And here is the HTML:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-image: url(house.jpg);
background-size: cover;
background-repeat: no-repeat;
background-color: red;
}
</style>
</head>
<body>
</body>
</html>
I put an obnoxious red background behind the image to demonstrate the problem. If it is working properly, you should NOT see the red. So run the above, and then resize the browser so that it is very thin, and tall. You will see lots of red under the picture. THAT's the problem.
As an update, upon more testing, removing the DOCTYPE seems to fix the problem. I am not smart enough to tell you why. :)
I haven't implemented a css-only way to do this, but I did use the backstretch jQuery plugin once, and it worked across the board. http://srobbin.com/blog/easy-full-screen-background-images-with-jquery/
Just set the height or min-height of the html:
html {
min-height: 100%;
}
body {
background-image: url(http://i.imgur.com/igLMC.jpg);
background-size: cover;
background-repeat: no-repeat;
background-color: red
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Related
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 2 years ago.
I'm trying to learn HTML and CSS. Yesterday night, when I was trying new things I came across a problem. I added a background image and wanted to make it black and white. It shows the image but its in colors. It didn't work however I tried. I'm out of answer at the moment. Thanks in advance.
body {
background-image: url(https://cdn.pixabay.com/photo/2020/04/03/15/27/flower-meadow-4999277_1280.jpg);
background-size: cover;
filter: grayscale(100%);
}
#logo {
font-family: 'Aladin', cursive;
font-size: 50px;
color: white;
margin-top: 40px;
margin-left: 75px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Testing 1-2-3</title>
<link rel="stylesheet" href="css/master.css">
<link href="https://fonts.googleapis.com/css?family=Aladin&display=swap" rel="stylesheet">
</head>
<body>
<div id="logo">
VolviX
</div>
</body>
</html>
It is because css greyscale() is for filtering image loaded with <img>. Updated as follow, it does WORK for CSS background except HTML and Body tag. So I try to wrap up all the situations here AFAIK.
Situation 1 - background image + blend
For background image, you need to apply other tricks like background-blend-mode property. You may refer some example online such as this
body {
background-image: linear-gradient(black, black), url(../img/ejager.jpg);
background-size: cover;
background-blend-mode: saturation;
}
Since your image is relative, so I use free online image as example.
body {
/* free image from https://pixabay.com/photos/flower-meadow-daisy-nature-flowers-4999277/ */
background-image: url(https://cdn.pixabay.com/photo/2020/04/03/15/27/flower-meadow-4999277_1280.jpg), linear-gradient(black, black);
background-size: cover;
background-blend-mode: saturation;
}
The principal behind this method:
The background-blend-mode CSS property sets how an element's background images should blend with each other and with the element's background color.
background-image property support multiple background images since quite a long time.
The above example could be replaced with a normal black background image. For convenient sake, the example use this to create a black background.
The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the data type, which is a special kind of .
As a result, it could be seen as a black background image with another image together and then use the blend filter to blend their saturation together.
According to the blend definition.
Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. Painting with this mode in an area of the backdrop that is a pure gray (no saturation) produces no change.
In this case, the saturation of the source color is the saturation of black and the hue and luminosity of the backdrop color (the flower image)
It then preserves the flower image but with black and white effect.
Situation 2 - filter a image tag
Here is example of greyscale for image tag
img {
filter: grayscale(1);
}
<img src="https://cdn.pixabay.com/photo/2020/04/03/15/27/flower-meadow-4999277_1280.jpg" alt="">
Edited: After a thorough test with different filters. There is a few characteristic found as follow.
Situation 3 - Apply filter to html and body tag.
Filter is not working for background-image in HTML or Body tag.
However, it works if you setup the background image in a psuedo element.
html, Safari works, FF, Chrome doesn't
body, Safari, FF, Chrome doesn't
html::before - before all content inside html
html::after - theoretically, it works but it should be out of the boundary, although ::after exists in DOM, nothing is displayed.
body::before - before all content of body
body::after - after all content of body
So, as a cross browser solution, to apply filter to body, body::before is sensible according to support of pseudo element across different browsers.
body::before {
/* positioning */
content: ' ';
height: 100%;
width: 100%;
position: fixed;
left: 0;
right: 0;
z-index: -1;
background-image: url(https://cdn.pixabay.com/photo/2020/04/03/15/27/flower-meadow-4999277_1280.jpg);
background-size: cover;
background-repeat: no-repeat;
filter: grayscale(1);
}
Related posts: about not working in body tag, it may be a bug because it behave inconsistently across different browsers.
Situation 4 - Apply filter to elements other than html and body
It works without issues.
#content {
background-image: url(https://cdn.pixabay.com/photo/2020/04/03/15/27/flower-meadow-4999277_1280.jpg);
background-size: cover;
background-repeat: no-repeat;
filter: grayscale(1);
}
body, html, #content {
height: 100%;
}
<div id="content"></div>
Appendix
CSS Filter Functions
How to apply post 1
Apply to partial element post 1
META: I asked this question over at Webmasters Stack Exchange, but they booted it, and told me to ask here. Apparently Webmasters only ever want to talk about SEO.
Original Post:
I am having a VERY strange issue with Chrome on the Mac.
I have this page: https://heartoflongislandna.org/cleantime/
It's a simple JS app that takes a date, calculates a time difference, then displays a bunch of mortised transparent PNG images that display awarded keytags. These overlap each other in two layouts:
Vertical, where one is laid over another in a vertical "chain," and
Horizontal, where they are placed side by side, but overlapping, like a spread out deck of cards.
What is happening, is that the layouts display (and print) fine in Safari and FF, but in Chrome, the print screws up. The screen display is fine, and looking at it with the device pane set to print also shows them fine.
There is also a small PNG image that is added to some of the images to close the ring at the top. That is added as a top, center background image.
The vertical layout is a bit better than the horizontal, in that the background transparency is honored, but the background image is lost (top keytag).
The horizontal layout is a mess. The background image is not displayed, and the background transparency is not honored.
I will add that examining this with Chrome's device view panel set to "Print" does not show a problem. It looks great. The print preview shows the issue, and opening the image in Preview also shows the problem, which is in the renderer.
*UPDATE 2: This is now available as a fiddle, here: http://jsbin.com/kakirinife/edit?html,output
The (Fiddle) HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS Issue Demo</title>
<style type="text/css">
/** This is the container for the keytag display. */
.NACC-Keytags {
margin-top: 122px;
display: table;
margin-left: auto;
margin-right: auto;
background-color: transparent;
}
/** This allows us to compensate for the automatic offset of the tags. */
.NACC-Keytag-Tabular {
margin-top: 82px;
padding-right: 50px;
text-align:left;
}
/** This describes a keytag image layout. */
.NACC-Keytag {
width: 100px;
max-width:100px;
overflow: visible;
margin-top:-122px;
display: block;
margin-left: auto;
margin-right:auto;
background-color: transparent;
}
/** If we are displaying a closed ring, then we add an image to the background. */
.NACC-Keytag.NACC-Keytag-Ringtop {
background-image: url('https://i.stack.imgur.com/QcEYN.png');
background-position: center top;
background-size: 100%;
background-repeat: no-repeat;
background-attachment: local;
}
/** We display inline-block, so we get a flow that will wrap. */
.NACC-Keytag-Tabular .NACC-Keytag {
display: inline-block;
margin-top:-82px;
margin-right:-50px;
}
</style>
</head>
<body>
<div class="NACC-Results">
<div class="NACC-Keytags NACC-Keytag-Tabular">
<img class="NACC-Keytag NACC-Keytag-Ringtop NACC-White-Tag" src="https://i.stack.imgur.com/AVIug.png">
<img class="NACC-Keytag NACC-Keytag-Ringtop" src="https://i.stack.imgur.com/j11kj.png">
</div>
</div>
<div class="NACC-Results">
<div class="NACC-Keytags">
<img class="NACC-Keytag NACC-Keytag-Ringtop NACC-White-Tag" src="https://i.stack.imgur.com/AVIug.png">
<img class="NACC-Keytag" src="https://i.stack.imgur.com/j11kj.png">
</div>
</div>
</body>
</html>
</body>
The Images:
UPDATE: I determined that this is likely a Chrome bug, and I reported it, but I am still looking for a CSS fix that I can apply. Chrome is a popular browser.
I will add images that show what happens.
First, this is the vertical format on the screen:
Next, here is the horizontal image on the screen:
Now, here are both of them as printed:
Just for posterity: Chrome has since fixed this bug.
I'm trying to create a website that has fullpage background images. I have gotten it work on desktop versions but when I push it to github and view it on my phone the background image is just a long image at the top. I'm using the background-size: cover in my css. Screen shots below.
How can I make it so on mobile it takes up the whole space? Thanks :)
Desktop version:
Mobile version:
.background1
{
/* Location of the image */
background-image: url(images/background-photo.jpg);
/* Image is centered vertically and horizontally at all times */
background-position: center center;
/* Image doesn't repeat */
background-repeat: no-repeat;
/* Makes the image fixed in the viewpoint so that it doesn't move when
the content height is greater than the image height */
background-attachment: fixed;
/* This is what makes the background image
rescale based on itscontainer's size */
background-size: cover;
/* Pick a solid background color that will
be displayed while the background image is loading */
background-color:#464646;
}
Html is as follows
<head>
<script src="https:
//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"</script>
<script
src="https://cdn.jsdelivr.net/lodash/4.11.2/lodash.min.js"></script>
</head>
<meta charset="utf-8">
<title>Color</title>
<link rel="stylesheet" href="style.css">
<link href="animate.css" rel="stylesheet">
</header>
<body id="bodyID" class="background1">
</body>
<script src="javascript.js"></script>
The problem stems from your <body> element not having the height to fit your device. You could stick a height: 100% on html, body, but I think the easier way to do this would be to add the following:
body {
height: 100vh;
}
This sets the height of the body element to 100% of the viewport height on load. I tested this out and it solves the problem on my Android device and doesn't break it on desktop.
Side note: You can debug your Android device with Chrome inspector tools by following Google's instructions.
Have you defined the min-height or max-height or height? May be u can share the Html codes to let me check. And for the background css, here's the better useful code.
background: #464646 url(images/background-photo.jpg) no-repeat center center;
background-size: cover;
I have a background image that covers the entire screen. It works like a charm in web. However when I click an input field in mobile browser, the background shifts (I believe so) and shows a white colour. Since my input fields are also white, I can't see them when things get messed up as such.
Attaching the screenshot of both states before clicking the input field and after clicking it as well on mobile.
CODE HERE:
<body class="details_step1-1">
<div>
...........
</div>
</body>
CSS HERE:
.details_step1-1{
background-image: url("../images/img_foldbg.png");
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
height:100%;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
}
TRIED FIXES:
1. Adding min-height to the background image, html, body as 100% together as well as separately.
2. Adding height as 100vh to the background image, html and body.
You can apply overflow:auto on both your html tag and your body tag, and that will fix your white space issue.
I currently have the following CSS (called splash.css):
html {
background:url(splash.jpg) center no-repeat;
background-size:auto 100%;
}
And the following HTML:
<!DOCTYPE html>
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<TITLE>Test</TITLE>
<link href="splash.css" rel="stylesheet" type="text/css" media="screen" />
</HEAD>
<BODY>
</BODY>
</HTML>
I'm trying to get the background image called splash.jpg to always have the same height as the browser window, and to resize it (keeping its aspect ratio) and allow some of the width to remain outside the browser window. In addition, the background must be centered about the browser window.
Currently I would expect my CSS to do exactly what it's supposed to do. I've set the background to be horizontally and vertically aligned to the center, and I've set it to the image it's supposed to be. I've also set the background-size to auto 100% - which, according to Mozilla Developer Network, resizes the image exactly like I want it to be resized.
If the background-size has one auto component and one non-auto component:
If the image has an intrinsic proportion, then render it using the specified dimension, and compute the other dimension from the specified dimension and the intrinsic proportion. If the image has no intrinsic proportion, use the specified dimension for that dimension. For the other dimension, use the image's corresponding intrinsic dimension if there is one. If there is no such intrinsic dimension, use the corresponding dimension of the background positioning area.
The problem I am facing is that the height of this huge, 1920x1080 image, appears to be around only 50px when I open the HTML in a browser window. The width also appears to be in the right ratio to the height.
At first, I felt it might be some sort of browser-dependent bug - but the page appears pretty much exactly the same in both Chrome and Firefox!
Note - Any other SIMPLE solutions are welcome. I don't want this behavior to be Javascript dependent - but I don't mind the solution working only in the latest versions of FF/Chrome.
Add height: 100%; to your html styles.
Just use this:
body { background-size: cover; }
This is a CSS3 attribute that COVERS the page with the background image. I forget if it keeps the perfect aspect ratio or not, but it's worth a shot, buddy.
background: url('/img/bg0.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";">