The body-Tag of a HTML-File does have a background-image applied:
body {… background: #fff url(./img/bg-body.jpg) no-repeat 0 82; …}
everything works just fine with WebKit (Safari, Chrome…) and even Trident (IE) … BUT the background-image is not showing in Gecko (Firefox) … and if I add the DOCTYPE to the document, it doesn't work anywhere.
<html>
<head>
<style type="text/css">
body {… background: #fff url(./img/bg-body.jpg) no-repeat 0 82; …}
</style>
</head>
<body>
…
</body>
</html>
It does also not work with no divs, no content, no nothing…
Any ideas?
You need to specify the unit for your background position
body{ background: #fff url(./img/bg-body.jpg) no-repeat 0 82px }
it seems to work in webkit without it. But gecko needs a unit. Then it should work.
Related
I try to display a svg icon on a html page.
On chrome and other browser that works fine but on edge and internet explorer the icon don't appear.
I made it witk mask in css.
body{
background: #000;
}
.default {
background-color: #fff;
width:45px;
height:45px;
}
.icon {
mask:url('./icons/network.svg') no-repeat center center;
-webkit-mask: url('./icons/network.svg') no-repeat center center;
mask-size:90px auto;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
<title>Icons</title>
</head>
<body>
<image class="default icon"></image >
</body>
</html>
On internet explorer it displays a white square ( i think is the default class in css).
Thanks in advance !
According to caniuse.com Internet Explorer does not support mask at all and edge only partially supports this feature. Have a look here: https://caniuse.com/#search=mask
So I've been searching for a bit why my background is not showing up, ill start with my bg css:
body {
background-image: linear-gradient
(to right, #0F2027, #203A43, #2C5364, #2C5364, #203A43, #0F2027) !important;
}
When I inspect element my html and body both have a width of 0px which is why it's not showing I guess.
I use Bootstrap 3 and removing it from my page does fix the issue but I use Bootstrap for a lot so that doesn't really work for me.
One cheap fix I use currently is creating a span inside the body tag with a single character and then making it's opacity 0 and hiding it in a corner but obviously this should only be temporary.
I've tried background-color which does work so I'm guessing there is some conflict between Bootstrap 3 and background-image or linear-gradient.
Does anyone know of a proper way to fix this issue?
EDIT: As pointed out in the comments, I realize if the body width is 0px it can't show my bg but what's causing my body width to be 0px?
EDIT2: Added HTML for reproduction:
<!DOCTYPE HTML>
<htmL>
<head>
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/mycss.css" />
</head>
<body>
</body>
</htmL>
What is causing this behaviour is the rule margin:0 from normalize.less.
If you set the margin of the body to any value except 0, the background-image will render.
body {
margin: 1px;
background-image: linear-gradient(to right, #0F2027, #203A43, #2C5364, #2C5364, #203A43, #0F2027);
}
You just need to remove a space after "linear-gradient". This css property should be written like this linear-gradient() and in the brackets you can put your code. The overall code should be like below.
body {background-image: linear-gradient(to right, #0F2027, #203A43, #2C5364, #2C5364, #203A43, #0F2027) !important;}
I'd like to have a pattern I made in an embedded SVG appear as the background of an html doc.
<head>
<style>
body{
background-image: url('apattern.svg');
}
</style>
</head>
Basically, SVGs do not work well in body-background as you described in the question, if at all. What I've done is create a fallback option for those browsers that have an issue.
body {
background: url(fallback.png);
background-image: url(image.svg), none;
}
See ... http://css-tricks.com/using-svg/
This question already has answers here:
Why can't I do <img src="C:/localfile.jpg">?
(16 answers)
Closed 4 months ago.
I've got an HTML document hosted on a remote web server. I'm trying to have one of the elements on the web page use an image file from my local file system as its background image. No luck with Chrome, Safari or Firefox (haven't tried IE).
Here's an example of what I've tried so far.
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
html,body { width: 100%; height: 100%; }
</style>
</head>
<body style="background: url('file:///Users/username/Desktop/background.png')">
</body>
</html>
If I inspect the body element using my browser's web inspection tool, and select "Open image in new tab" the image is there. So the browser is fully capable of getting at the image file using the given URL.
Is what I'm trying to pull off at all possible, or is this a security feature of the browser trying to block external domains from accessing the user's local resources?
background: url(../images/backgroundImage.jpg) no-repeat center center fixed;
this should help
It seems you can provide just the local image name, assuming it is in the same folder...
It suffices like:
background-image: url("img1.png")
Jeff Bridgman is correct. All you need is
background: url('pic.jpg')
and this assumes that pic is in the same folder as your html.
Also, Roberto's answer works fine. Tested in Firefox, and IE. Thanks to
Raptor for adding formatting that displays full picture fit to screen,
and without scrollbars...
In a folder f, on the desktop is this html and a picture, pic.jpg, using
your userid. Make those substitutions in the below:
<html>
<head>
<style>
body {
background: url('file:///C:/Users/userid/desktop/f/pic.jpg') no-repeat center center fixed;
background-size: cover; /* for IE9+, Safari 4.1+, Chrome 3.0+, Firefox 3.6+ */
-webkit-background-size: cover; /* for Safari 3.0 - 4.0 , Chrome 1.0 - 3.0 */
-moz-background-size: cover; /* optional for Firefox 3.6 */
-o-background-size: cover; /* for Opera 9.5 */
margin: 0; /* to remove the default white margin of body */
padding: 0; /* to remove the default white margin of body */
overflow: hidden;
}
</style>
</head>
<body>
hello
</body>
</html>
You forgot the C: after the file:///
This works for me
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
html,body { width: 100%; height: 100%; }
</style>
</head>
<body style="background: url('file:///C:/Users/Roby/Pictures/battlefield-3.jpg')">
</body>
</html>
FireFox does not allow to open a local file. But if you want to use this for testing a different image (which is what I just needed to do), you can simply save the whole page locally, and then insert the url(file:///somewhere/file.png) - which works for me.
I was reading this article http://www.sitepoint.com/using-unprefixed-css3-gradients-in-modern-browsers/ .I created this little demo of what this article teaches.
<html>
<head>
<title>Css Gradients</title>
<style>
.demo{
height: 200px;
width: 400px;
margin-bottom: 10px;
background: linear-gradient(to right,red,yellow);
/*background: linear-gradient(23deg,red,yellow);*/
}
#radial{
/*background: radial-gradient(at center,red,yellow);*/
background: radial-gradient(circle closest-corner,red,yellow);
}
</style>
</head>
<body>
<div class="demo"></div>
<div class="demo" id="radial"></div>
</body>
</html>
Now the problem is,Firefox is rendering the background gradient correctly but Google Chrome(version 22) is not rendering the background gradient at all.See the screenshots
At the moment (Chrome 24 / Safari 6) Webkit still have not added support for unprefixed css3 gradients yet.
This is a bit sad, if you consider the fact that even IE10(!) uses unprefixed syntax already.
Reference: http://caniuse.com/#search=grad