[![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
Related
I'm new to HTML and CSS and I'm trying to make a website using springboot but I can't add a background image to it. this is how I'm doing it:
body {
background-image: url(images/background.jpg);
}
I've also tried using src/main/java/images/background.jpg, still doesnt work.
(HTML files are in src/main/resources/templates folder and CSS files in src/main/resources/static folder)
Did i import the image correctly? Thank you for help
This is my HTML code (it's pretty bad, I can't really use it):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link href="/style.css" rel="stylesheet">
<title>Catering Ristorazione C.S.L</title>
</head>
<body>
<div>
<h1> <strong><em>Catering Ristorazione C.S.L</em></strong></h1>
<div> <hr>
<a th:href="#{/elencochefs}" >Elenco degli chef</a>
</div>
<div>
<a th:href="#{/elencobuffets}" >Elenco dei buffet</a>
</div>
</hr>
</div>
</body>
</html>
Move your folder images to /src/main/resources/static
Also, you should modify your stylesheet to start the background-url with /.
body {
background-image: url(/images/background.jpg);
}
I'm new to asp.net MVC and I need to have a full background image on the login page. Im getting confused with all of the cshtmls and getting lost on where to set the full background image. Help please..
I think that best solutions is to do that via style sheets (css). All styles should be in a separate css file. For beautiful code don't use in-line styling:
body {
background-image: url('your_img_path');
margin: 0;
}
Firstly I would say, treat '.cshtml' just like '.html' for all designing purposes.
To add background image in a view (.cshtml page in Asp.net MVC), you simply need to add it in < body > tag as 'background' attribute.
I have provided the sample code. Have a Look.
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login Page</title>
</head>
<body background="~/Content/Images/sahb.png">
</body>
</html>
Regards!
SAHB
In case if you want change background in a particular View just add thise code
#section head{
<style type="text/css">
body {
background-image: url('/Images/paper.jpg');
margin: 0;
}
</style>
}
But dont forget in Layout of this View add following line
<head>
#RenderSection("head", required: false)
</head>
If you want it on all pages use Shared/_Layout.cshtml file
and change body tag similar to
Probably I would put only on the Home/Index.cshtml page so it appears only on the home page
To avoid that repeated across other pages I would add an ID to home page in the Shared/Index.chtml file as follows
<body id="HomepageBody" >
and change it in the Content/site.css file add
#HomepageBody { background-image: url("/images/7flowers.jpg" );
background-repeat:no-repeat; background-position:center; }
That would make it work across popular browsers like Chrome.
if you wanna use background-image: url('');
just do not use ~ symbol
use this code in cshtml page to insert background image on entire screen of your div section
<div style="background-image: url('/Areas/Admin/Content/Image/OIP7.jpg'); background-repeat:no-repeat; background-size:100% 100%">
one more thing ~ is not working in Url. start your image address with forward slash
/ link this '/Areas/Admin/Content/Image/OIP7.jpg'
In Index.cshtml:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/CSS/Main.css" />
</head>
<body
</body>
</html>
in Main.css:
body {
background-image: url(../Images/myBackgroundPictureName.png);
background-repeat:no-repeat;
background-size:cover;
}
It is very simple just use a css property background image on that div or that section you want.
<div style="background-image: url('/Content/images/image_2.jpg');"></div>
If your image is not displaying, you may have to add ~ tilde sign to the URL
Example :
<div style="background-image: url('~/Content/images/image_2.jpg');"></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
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");
}
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.