How can I attached a background image from url in this html page
Question
here the html part:
<!DOCTYPE html>
<html>
<head>
<title>Frozen</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron|Montserrat">
</head>
<body onload="showtime();">
<div>
<h1>BATMAN</h1>
<h2>
<span id="h"></span>
<span id="blink">:</span>
<span id="m"></span>
<span id="blink">:</span>
<span id="s"></span>
</h2>
</div>
</body>
</html>
here is the css part:
body {
margin:0;
padding:0;
background-color:black;
}
h1{
text-align:center ;
color:black;
font-variant:small-caps;
text-shadow: 0 0 2px lime
, 0 0 4px lime
, 0 0 6px lime
, 0 0 8px lime;
}
div{
width: 250px;
height: 150px;
background-color:black;
border:1px solid lime;
border-radius:10px 10px 10px 10px;
margin:auto ;
margin-top:20%;
box-shadow: 0px 0px 10px 1px lime;
}
h2{
color:black;
font-family: Orbitron;
font-size:33px;
font-weight:bold ;
text-align:center ;
margin-top:20px;
}
#h,#m,#s{
text-shadow: 0 0 2px lime
, 0 0 4px lime
, 0 0 6px lime
, 0 0 8px lime;
}
#blink{
text-shadow: 0 0 2px lime
, 0 0 4px lime
, 0 0 6px lime
, 0 0 8px lime;
animation:animate 1s linear infinite;
}
@keyframes animate
{
0%
{
color:lime;
text-shadow: 0 0 2px lime
, 0 0 4px lime
, 0 0 6px lime
, 0 0 8px lime;
}
100%
{
color:black;
text-shadow: 0 0 2px black
, 0 0 4px black
, 0 0 6px black
, 0 0 8px black;
}
}
Here is the JavaScript file:
function showtime()
{
var a = document.getElementById("h");
var b = document.getElementById("m");
var c = document.getElementById("s");
var i = document.getElementById("d");
var time = new Date();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
if(h<=9)
{
h= "0"+h;
}
if(m<=9)
{
m= "0"+m;
}
if(s<=9)
{
s="0"+s;
}
a.innerHTML = h;
b.innerHTML = m;
c.innerHTML = s;
}
setInterval(showtime ,1000);
Basically I is a digital clock name BATMAN. I wanna attached an background image url ( https://drive.google.com/file/d/1ddfIP5iy9RAgG9lF5xGYgYGHKW_glrsy/view?usp=sharing ) there. I change the body elements of my style script below:
<style>
body {
margin:0;
padding:0;
background-image: url('https://drive.google.com/file/d/1ddfIP5iy9RAgG9lF5xGYgYGHKW_glrsy/view?usp=sharing');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
But it neither shown in my html page as a background. I download the picture and upload it into my drive. I want to know my mistakes? I am at the beginner stage of CSS/CSS3 and javascript. I am better at HTML5/HTML. I realize the javascript file but some problems in css file. I am sure that if any professional programmer/developer suggests to me about my mistakes, I will get the point. HELP...
1 answers
solution1
2 ACCPTED 2020-07-26 06:37:57
may be your Background image path is not working, try this and it will work
body {
margin: 0;
padding: 0;
background-color: black;
background-image: url("https://kivabe.com/code/media/img/bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
so, if you are developing your project in your local machine, make sure you are suing right path of your Background image.
Assuming that your project file/folder structure like below
/project/
|---index.html
├── css/
│ └── style.css
├── js/
│ └──functions.js
└── images/
└── image.png
then you have to use background image path as
background-image: url("../image.png");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.