Why is my jpeg not appearing in my webpage? - html

All I want to do is embed an image from my computer into this webpage. The image file is Avery.jpg, and it is on C:. Could my path be wrong, or am I doing something else completely wrong?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color:#CCFFFF;
<!--Baby Blue???-->
}
p {
color:#800080;
font:100px Verdana, sans-serif;
}
</style>
<title>birthday.html</title>
</head>
<Body>
<img src="Avery.jpg" alt="avery" />
<p>Happy Birthday!</p>
</Body>
</html>

it will appear normally if you put the image in the same root folder of your web page.

Put the HTML file and the image file in same location and try. It will work for you.

Related

external CSS, test on local computer, css file not found

I just started to implement a website. I have no host yet. First I would like to try some things locally on my own laptop.
I would like to use external css.
A simple version of the index file to show the problem looks like:
<!DOCTYPE html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
The test.css looks like this:
<style>
h1 {
color: red;
}
</style>
The problem is that the html file does not find the css file (the header will be black instead of red) although they are located in the same directory. I tried some variants but it did not help.
If I add the same css code inline, then it works.
This should be very easy, but I fail to see why the html file does not find the external file.
I tried this on firefox and IE.
Hope somebody could help me.
you missed open html tag
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
remove style from your css file
h1 {
color: red;
}

HTML Using local image as background

I have troubles using a local image as my background in HTML. Anyone who maybe can give me an tip on what at l should try to change in order to make the code work.
<!DOCTYPE html>
<html>
<head>
<title>Test</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/skole/Onedrive/NTNU/Annet/Test/bakgrunn.jpeg');">
</body>
<body>
<h1>Test</h1>
</body>
<html>
The path to image should lead from Your .html file. So, the question is where is Your .html file situated, for example, if it is in folder TEST, path should be: url('./bakgrunn.jpeg') or just url('bakgrunn.jpeg');

HTML/CSS URL path

[![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

Background Image won't show in div

This is my HTML Code
.jumbotron
{
background-image: url("file://C:\xampp\htdocs\CSProject\images\Psi.png");
height: 250px;
width: 250px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="jumbotron">
</div>
</body>
</html>
I haven't been able to find any solutions as to why this background image won't show.
Thanks for any help or info.
The URL for background-image needs to path from your CSS file, not from your root directory.
So if your CSS file is contained in the folder CSProject, try changing:
.jumbotron {
background-image: url("images/Psi.png");
}
It has something to do with your image path...like Erez recommended i would use a relative path.
If your HTML code and 'images' folder are within the 'CSProject' folder, then reference that image like
background-image:url('/images/Psi.png');
Which brings me to my next point, why is your file-path using backslashes? it should be
/htdocs/CSProject/images/Psi.png

background image not displaying css/html

This is probably a really simple problem that I'm guessing has a very obvious but stupid solution but I am not seeing it. I am trying to get an image to become a tiled background and for some reason the image is not appearing nor am I getting errors. I have checked permissions and set all files and folders to 777. Can someone point out the problem for me thanks.
My CSS file:
body {
background-image: url("images/main_background.png");
}
My HTML file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/layout.css">
</head>
<body>
<div id="main_container">
</div>
</body>
</html>
Your image is in images folder and css is in css folder.
images/main_background.png means that images folder is inside the css folder, but it is not.
write this:
body {
background-image: url("../images/main_background.png");
}
OR
body {
background-image: url("/images/main_background.png");
}