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/
Related
I have been creating a webpage teaching about Mars, and I wanted to see if I could make the background of an HTML5 page an image instead of a boring white colour. I do want this with a link, so teaching with a .jpg will not be useful. Here is some code I have tried:
<!DOCTYPE HTML>
<html>
<head>
<title>My Webpage</title>
<style>
body {
background: url(https://phys.org/news/2020-05-astrobiologists-mars-rover-life-detecting-equipment.html);
}
</style>
</head>
<body>
My text here...
</body>
</html>
I am not the most experienced programmer, as you can see from this, but any help (even if it is just a little) will be much appreciated. Thank you for your time and have a great rest of your day.
--
isharief
use the link to the jpg file in the src attribute instead of the html link, for this case,
<style>
body {
background: url(https://scx1.b-cdn.net/csz/news/800/2020/astrobiologi.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
overflow: hidden
}
</style>
I tried all possible answers but nothing works. When I put this code
I have a gray screen only. The picture is in the same folder which I use for code. I use notepad. I am a beginner.
I've tried all your answers but nothing works only gray screen. The image works when I put just src=(image.png) but not working if I want a background with URL(image.png)
You'll need to add the body tag, like so:
<html>
<head>
<title> Piotr#Ewa World </title>
<style>
body {
background: url("IMG_20180505_204226.png");
background-size: contain; /* Or "cover" */
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
I've looked for the answer on everyone of questions that are similar to this question but nothing seems to work. Basically I created a test document to test the background image feature as it wasn't working on my main site.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" text="type/css" rel="stylesheet">
<title>Test</title>
</head>
<body>
This is a test.
</body>
</html>
CSS:
body {
background-image: url(image.jpg) no-repeat;
}
Nothing shows apart from "This is a test." I have checked to see if the image is in the same place as the styles.css sheet, and it is. Can anyone help me please?
You can't combine background-repeat in background-image.
body {
background-image: url("image.jpg");
background-repeat: no-repeat;
}
Use background background instead of background-image if you are using no-repeat etc.
body {
background: url(image.jpg) no-repeat;
}
According to W3 http://www.w3schools.com/cssref/pr_background-image.asp background-image property can be attached to the body tag.
The only reason you don't see it is no-repeat in the wrong place - it is the property of background itself, not a background image.
So here is the code you should use case you actually do not want to see image repeating:
body {
background-image: url("image.jpg");
background-repeat: no-repeat;
}
your image url is important to give it:
I hope solved with this.
1- in own folder: "./image.jpg"
2- in out folder: "../image.jpg"
3- or root relative path(eg asp.net): "~/pictures/image.jpg"
4- or relative path: "../pictures/image.jpg"
body
{
background-image: url(./image.jpg);
background-repeat: no-repeat;
}
I have an HTML page with a pink background image. I want to define a DIV on the page for text, but I want the background to show in the DIV much paler, almost white. I tried this, but it doesn't seem to work on IE8.
My HTML...
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="div1">
testing
</div>
</body>
</html>
and here's my CSS file ...
body
{
background-image:url('back.jpg');
background-repeat:repeat;
}
.div1
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
background: #ffffff;
}
Any ideas?
The thing you have to keep in mind is that the opacity property will affect the opacity of the entire element, including its text/children. If you want to affect JUST the background, you will need to approach it in a different way.
You could use RGBA for modern browsers:
.div1 {
background-color: rgba(255,255,255, .4);
}
Then, in a separate IE stylesheet (using conditional comments or similar method):
.div1 {
background: transparent url(white_trans.png);
}
You would need to make a PNG-24 image, 1px x 1px, that was just simply white reduced to 40% opacity. That will work in IE7 & 8.
You should add the zoom: 1 declaration to your .div1 block.
If you are using a plain (solid) color as background, then, I would suggest you to just use a paler pink for your DIV.
This will create the illusion of opacity. And more importantly, you will not face issues with some browsers.
I was basically wondering if there was a work around to this? I was redesigning my old mans plumbing website, and took a few of the ideas from this website http://visitmix.com/ where they used the body css tag as the header background with a few overlapping designs into the main website body - and the html css tag for the background repeating image of the rest of the webpage. While this works in firefox and chrome, the internet explorer background is just the background color.
The website I'm working on is here: http://www.plumberkendal.co.uk which shows what I mean. I've tried numerous things with the width and the height of the html css tag but to no avail.. heres the css in question:
html
{
background-image: url("../images/html_bg.png");
background-repeat: repeat;
background-color: #5a84c5;
height: auto;
width: auto;
}
body
{
padding-top: 0px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
background-image: url("../images/header_bg.png");
background-repeat: no-repeat;
background-position: center top;
text-align: center;
}
Any help would be greatly appreciated, cross-browser compatibility with css is an area that really confuses me!
You should assign the background to the body selector, not the HTML tag:
body
{
background-image: url("../images/html_bg.png");
padding-top: 0px;
margin-top: 0px;
...
}
Assigning it to the HTML selector will not work as the HTML contains the head element as well as the body, and is not generally treated as an object that has a background.
Assigning it to the body selector will ignore the <html> and <head> tags and put it right onto the main body of your page, displaying the background as intended.
(If anyone else can explain this better, go ahead!) :)
I know this question has been answered and is older, but I wanted to share my solution in case someone else comes across this. I was having the same problems when I used a background image on my <htm> tag. The solution was to have the correct DOCTYPE. Below is the one I used:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
I also added #charset "utf-8"; to the top of my style sheet.
The way I formatted my background attribute is also different than how you have yours, but I do not know if that makes a difference.
html {
background: url("../images/html_bg.jpg") #000 repeat-x;
}
I was able to have both a <body> and <html> background image that worked in Firefox and IE.