Hi everyone this is my first webpage i've made and i'm trying to display a gif as backrgound and make text appear above that.. Everything works fine except i can't seem to display the text above the gif background.. As you can see in the source code i have one heading and three paragraphs, Anyone knows how to fix this?
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="http://www.iconarchive.com/download/i91751/icons8/windows-8/Systems-Linux.ico" type="image/x-icon"/>
<title>FirstWebpage</title>
<style>
body{ /* Will use a gif as background */
background-image: url('http://images.eurogamer.net/2015/articles/1/8/7/1/5/3/2/san-francisco-subway-system-hacked-passengers-get-free-rides-148033947612.gif');
background-position: relative;
background-size: cover;
}
</style>
<audio autoplay loop>
<source src="seffelinie.mp3" type="audio/mp3">
</head>
<body>
<div align="center" id="text">
<h1>First Webpage</h1>
<p>HTML</p>
<p>+</p>
<p>CSS</p>
</div>
</body>
</html>
The Audio tag was on top of the text I guess, replace with this:
<audio autoplay loop>
<source src="seffelinie.mp3" type="audio/mp3">
</audio>
Your code is a little mixed up. As stated above, you're missing the closing audio tag, but you are also closing the <head> after the audio element which should be inside the <body> tags with the rest of your html code. Lastly, I cleaned up your background image CSS to use best practices based on what I think you're intending. background-position: relative; isn't an option. background-position is not the same as position, it is for telling the browser what aspects of the parent to position the image based on — like "top center" or "bottom left". In your case since you want the image to always cover, I think you're best off centering the image vertically and horizontally in all situations, that's what background-position: center center` does.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="http://www.iconarchive.com/download/i91751/icons8/windows-8/Systems-Linux.ico" type="image/x-icon"/>
<title>FirstWebpage</title>
<style>
body{ /* Will use a gif as background */
background-image: url('http://images.eurogamer.net/2015/articles/1/8/7/1/5/3/2/san-francisco-subway-system-hacked-passengers-get-free-rides-148033947612.gif');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<audio autoplay loop>
<source src="seffelinie.mp3" type="audio/mp3">
</audio>
<div align="center" id="text">
<h1>First Webpage</h1>
<p>HTML</p>
<p>+</p>
<p>CSS</p>
</div>
</body>
</html>
Related
I am attempting to show a HTML video tag in a triangle display. So, as opposed to the default rectangle display; a triangle. Meaning, here's the default display:
<!DOCTYPE html>
<html>
<head>
<title>Video Default</title>
</head>
<body>
<video width="640" height="360" controls>
<source src="https://durendel.com/event/theater/gravityphase.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Notice how the default display is the rectangle form - my aim is to get the display in a triangle form - like this:
I am trying to use CSS to accomplish this task, specifically border-top-left radius and border-top-right-radius, but I can only get it to curve. Here's the code below:
video {
border-top-left-radius: 200px;
border-top-right-radius: 200px;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
</head>
<body>
<video width="640" height="360" controls>
<source src="https://durendel.com/event/theater/gravityphase.mp4" type="video/mp4"> Your browser does not support the video tag.
</video>
</body>
</html>
The problem I'm running into, as you can see from the code snippet above, the left and right angles only curve as opposed to forming a point. Therefore, is it possible to create a triangle display of a HTML video tag using CSS border-radius? Or can someone provide some additional guidance as to what I should be using to accomplish this task?
I doubt this is possible with border-radius.
But you can achieve this with clip-path
video {
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
</head>
<body>
<video width="640" height="360" controls>
<source src="https://durendel.com/event/theater/gravityphase.mp4" type="video/mp4"> Your browser does not support the video tag.
</video>
</body>
</html>
I need to place the <audio> in top right corner. How to do it?
I tried with the <object> but then I get black bars around the audio player.
<!DOCTYPE html>
<head>
<style>
</style>
</head>
<center>
<body style="background-color: brown">
<h1 style="color:white; font-size:80px">Hello</h1>
<p style="font-size:50px">I like <span style="color:green">turtlez</p>
<audio controls>
<source src="hello.mp3" align="right" type="audio/mpeg">
</audio>
</body>
</center>
Place your audio element into a container, then align the container.
E.g.
<div class="container">
<audio controls>
<source src="hello.mp3" align="right" type="audio/mpeg">
</audio>
</div>
.container {
max-width:200px;
position:absolute;
top:0;
right:0;
}
Try using this code :
audio {
float: right;
margin-top:0;
}
<audio controls src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga">
Your user agent does not support the HTML5 Audio element.
</audio>
Make sure your src file is included.
Hope it works.
Good afternoon,
I have am image and I want to embed the MP3 file associated with the image into/onto the image, instead of having the MP3 under the image.
Is this at all possible.
Kind regards
Gary
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<img src="Logoghp.jpg" width="224" height="134" alt=""/><br>
<audio controls>
<embed src="Soul Train Easter 2016 Mke Vitti One Hour Mix Show.mp3" width="32" height="32"></embed>
</audio>
</body>
</html>
Create a "container" div and, inside it, insert your image and an audio element (containing at least a source and a warning message for browsers that don't support it).
Give the "container" the same height of the image, assign the audio element "relative" position, then play with top and left values, e.g.:
.audio-container {
height: 320px;
}
.audio-container audio {
position: relative;
top: -40px;
left: 10px;
}
<div class="audio-container">
<img src="http://www.battiato.it/wp-content/themes/battiato/images/about.jpg">
<br>
<audio controls>
<source src="http://www.battiato.it/wp-content/uploads/mp3/joe/1-leoncavallo.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
[![enter image description here][1]][1]I have tried to look for solutions and haven't found one so I came here. This is my HTML Folder
http://i.stack.imgur.com/EzlU9.png
SITE/Fonts/school.ttf
SITE/Pictures/praycat.jpg
SITE/index.html
SITE/main.css
This is my CSS File
html {
background: url('Pictures/praycat.jpg') no-repeat center center fixed;
background-size: cover;
}
#font-face {
font-family: myFirstFont;
src: url('Fonts/school.ttf');
}
When I open my index, everything works(the images are accessed and the fonts.
But, when I visit my site, the images and the fonts are missing. What am I doing wrong?
HTML CODE
<html>
<head>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <!--Let's load jQuery-->
<script>
function GameDetails( servername, serverurl, mapname, maxplayers, steamid, gamemode )
{
$("#mapName").text(mapname);
$("#gameMode").text(gamemode);
$("#serverName").text(servername);
}
</script>
</head>
<body>
<audio autoplay loop>
<source src="somesoundfile.ogg" type="audio/ogg">
</audio>
</body>
<body>
<div>
<p class="small">
<h1 id="titlePg"><b>You're on your way to <span id="serverName">unknown</span></b></h1>
</div>
</p>
We're currently playing <span id="mapName">unknown</span> on <span id="gameMode">unknown</span>
</body>
</html>
CONSOLE:
http://i.stack.imgur.com/yK5ji.png
Try using ../ before the URL as it represents your root:
body{
background: url('../Pictures/praycat.jpg') no-repeat center center fixed;
background-size: cover;
}
#font-face {
font-family: myFirstFont;
src: url('../Fonts/school.ttf');
}
One thing that I noticed is you have two head tags
<head>
<head>
CSS link
</head>
</head>
Try getting rid of one of them
<head>
CSS link
</head>
First you will need to change the HTML tag to Body. Then you need to setup the root directory "..\wherever your files are stored\filename" As with the last posts we have all seem to gravitate to the same answer. Let us know if this works. If not can you post your html code too so that we can see the code and help there too. Best of luck.
UPDATED Here is your code that I was able to fix in the CSS:
background-image: url("\\main Directory\User\Desktop\Pictures/praycat.png");
You need to add "-image" after the background and use double quotes in the directory for the picture. I also took out the verbiage after the image source. This is your old code on top and the code that I used underneath:
background: url('Pictures/praycat.jpg') no-repeat center center fixed;
background-image: url("\\main Directory\User\Desktop\Pictures/praycat.png");
This is found under html or body in CSS.
You will need to change the directory to point directly to the picture. You can usually right click the image, click properties, and it should be right there for you as to the location of its storage.
why don't you try starting your path with "../" may be that would help
I am learning html5 and I write this simple snippet of code:
<!DOCTYPE html>
<html>
<head>
<title>test video</title>
</head>
<body>
<video src="movie.webm" controls/>
<h1>this is a header below the video</h1>
</body>
</html>
The video is shown fine on the screen but the problem is that I am not able to view the <h1> tag below the video. I have tested in Opera and Firefox. Do you have any idea what I am missing here?
You need to explicitly close the <video> tag:
<body>
<video src="movie.webm" controls></video>
<h1>this is a header below the video</h1>
</body>
Here's an example. Notice how the first header is displayed, and the second is not.
And just for completeness, here's what the spec has to say:
Tag omission in text/html:
Neither tag is omissible.