I think the path is correct for the background image, because that same path worked in the HTTML but I could be wrong. Basically, the image is not being displayed. Does anyone know why?
HTML
<head>
<title>2013 YourFantasyFootball</title>
<link rel="stylesheet" type="text/css" href="css/css_reset.css" />
<link rel="stylesheet" type="text/css" href="css/mystyles.css" />
</head>
<body>
<div class="container">
<!--<img src="images/final2.gif" class="stretch" alt="" />-->
<p>This is the first paragraph in the body of your new HTML file!</p>
</div>
</body>
</html>
CSS
body {
/*width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px; */
/*z-index: -1;*/ /* Ensure div tag stays behind content; -999 might work, too. */
background-color:black;
}
.container {
background-image:url('images/final2.gif');
width:900px;
height:2000px;
margin-left:auto;
margin-right:auto;
}
Use "../" to go back one directory and select the file as your CSS file is another folder.
So try this:
background-image:url('../images/final2.gif');
../ in your CSS file means that go back one directory so then it will go to your root folder then it will look for the images folder then find the final2.gif and then your image will be displayed. It works in your HTML because you HTML file is already in the root folder so it doesn't need to go back one directory, it just directly finds out the images folder.
And as #Lee Meador said:
So the URL in HTML is relative to the path of the HTML file and the URL in the CSS file is relative to the path of the CSS file.
That's absolutely correct.
The problem is because you are using a relative URL, so the path is relative to the file it is contained within.
In the first example that path is relative to the HTML file, so it can find the images folders. However, in your second example the path is relative to your CSS file, and because that is in a subfolder (css) it cannot find the images folder.
This should work:
background-image:url('../images/final2.gif');
Using ../ specifies the parent folder. Which is where your html file is, and more importantly, where the "images" folder is located.
Related
I've index.html file and img folder residing in the same directory,
I want to have the background image in div with .img1.
so I'm doing something like this :
Index.html
.img1 {
background-image: url("img/bg-header.jpg");
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
<div class="img1">
<div class="ptext">
<div class="dark-overlay">
<div class="home-inner text-center">
<h2 class="display-4 text-center">PULSES</h2>
<br>
<p> HALUTZIM 26 TEL AVIV<br><br>+4410600</p>
<br>
<br>
<div class="arrow">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>
</div>
</div>
this should set the background image of the div, but it is not working ?
Note:
As I mentioned index.html style.css and img folder are residing in the same directory, I've images inside img folder.
Am I doing something wrong ?
Please help thank You
Try to render the image as an in-line image in your page using tag just to confirm that the path is ok. If the path is ok, check the div's width and height then play around with background-postion property.
If still not working, post your html head.
I would try background-image: url("../img/bg-header.jpg");
Complementing my answer with Wayne's good explanation in the comments below:
"the relative path from a CSS file is based on its location. Thus the same CSS file can be used for HTML files in different locations. The css file is not in the same directory as the html. Hence ../ or /img/bg-header.jpg if the /img/ is off the root www directory."
My background-image won't show up. Do I need to tag the image in the HTML? Maybe position reference or something? Please help!
<html>
<head>
<link type="text/css" rel="stylesheet" href="sespe.css"/>
<title>Sespe Pizza Co.</title>
</head>
<body>
<div id="header1">
<h1>Sespe Pizza Co.</h1>
</div>
<div id="mb1"></div>
<div id="mb2"></div>
<div id="mb3"></div>
<div id="mainPage">
<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>
<div id="b4"></div>
<div id="b5"></div>
</body>
</html>
CSS.....
body {
background-image: url('/Users/Username/Downloads/3634195609_f6b7edac1b_b.jpg');
}
Your path is the problem. You are navigating to your downloads folder. Place your image in a folder in your site folder, call it say 'images' and then call it into your css like this. If your new 'images' folder is on the same level as your css folder, the first option would work. ../because you are going up one folder to get to images.
body {
background-image: url('../images/3634195609_f6b7edac1b_b.jpg');
}
Edit: Seems in your case, your css file is not in a css folder, so you can just get to your images folder without going to a different level:
body {
background-image: url('images/3634195609_f6b7edac1b_b.jpg');
}
I am trying to make a menu with a background-image but according to the web console, the browser can't find the image. I have this problem for a very long time and until now I don't know how to fix it. I think the solution is very simple but I don't find it.
The image is in the right map because if I load the image in a img tag the browsers shows the image.
I run it local host and I use Firefox
see my code below.
Can somebody help with solving this problem?
body{
margin: 0px;
}
nav{
position: fixed;
top:0px;
width:100%;
height:50px;
background-image: url('img/menu1.jpg');
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/svg.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<nav >
<ul class="banner">
<li>Test menu</li>
</ul>
<ul class="menu">
</ul>
</nav>
</body>
</html>
Try to change your
background-image: url('img/menu1.jpg');
to
background-image: url('../img/menu1.jpg');
The path of your rule is relative to css file, not relative to html file.
Quote from Quick Reminder About File Paths
You have to pay attention to the relationship of where the file is
that is referencing the image, and where that image actually is.
Here is all you need to know about relative file paths:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts there (and so on...)
The URL of the image in your CSS file should be relative to THAT file, and not your HTML document
It seems that my external style sheet is not working for the body part. Here’s my code:
all.css:
body {
background: url(../texture1.jpg);
background-size: 600px 500px;
background-repeat: repeat;
}
HTML:
<head>
<link rel="stylesheet" type="text/css" href="all.css">
</head>
<body>
<div id="main">
<h3 id="h3">
<a class="a" href="home.php"><div id="active" style="left:20px;"><center>Work Load</div></a></br>
<a class="a" href="assign.php"><div class="div" style="left:210px"><center>Assign Employee</div></a></br>
<a class="a" href="accounts.php"><div class="div" style="left:400px"><center>Accounts</div></a>
</h3>
</div>
</body>
You have several flaws in your HTML code:
<style></style> - Empty style blocks, not really an issue
<center> tags don't seem to have a closing tag. This tag is deprecated, and you should consider using the CSS style text-align: center instead.
id="div" - Having multiple ID's with the same value is not recommended because it can have unexplained results. The purpose of these is make them unique.
</div> inside <a> tags - In HTML4, having block-level elements inside inline elements was not allowed. This has changed in HTML5, keep aware.
style="left:###px" - Having 'left' as a style property does nothing by itself. That element needs to have the associated position property set too, whether it's set to "relative", "absolute", "fixed", or even "static"
Fixing these issues are probably your top priority, because the structure of your page is messed up beyond repair that the browser doesn't render your (correct) CSS properly.
Also, make sure that your "texture1.jpg" is in the parent directory of all.css, which seems to be one directory above your home.php file. Try removing the "../", and you should be good if it's all in the same directory.
To be a little more elaborate, this is how your application sees your folder structure:
???
|--public_html <--- Root HTML directory
| |-- all.css <--- CSS File you provided
| |-- home.php <--- HTML file you provided
| |-- assign.php
| +-- accounts.php
+--picture1.jpg <--- Picture file? CSS/HTML file cannot access above public_html
If by your comment you say it's in the same as the HTML file, then inside all.css, change the line to just url('picture1.jpg').
As a rare favor, I'll see if I can fix everything from the information you've provided and all 3 files (CSS, HTML, JPG) are in the same directory. You don't seem to understand the concept of how classes and IDs work together.
home.php HTML (complete):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="all.css">
</head>
<body>
<div id="main">
<h3>
<a class="active" href="home.php">Work Load</a><br />
Assign Employee<br />
Accounts
</h3>
</div>
</body>
</html>
all.css CSS (with added styles, some sample):
body {
background: url('texture1.jpg');
background-size: 600px 500px;
background-repeat: repeat;
}
#main {
background-color: lightpink;
}
.active {
color: green;
}
h3 {
text-align: center;
}
I've created a working JSFiddle with this info and I hope you can use it as a learning lesson to see how selectors work in CSS and how it correlates to your HTML structure.
just add
{}
before body, it worked for me
Change lke this
<head>
<style>
body {
background: url(../texture1.jpg);
background-size: 600px 500px;
background-repeat: repeat;
}
<!--html page-->
</style>
<link rel="stylesheet" type="text/css" href="all.css"><style>
</head>
<body>
<div id="main">
<h3 id="h3">
<a id="a" href="home.php"><div id="active" style="left:20px;"><center>Work Load</div> </a></br>
<a id="a" href="assign.php"><div id="div" style="left:210px"><center>Assign Employee</div></a></br>
<a id="a" href="accounts.php"><div id="div" style="left:400px"><center>Accounts</div></a></h3>
</div>
</body>
<body>
<div>
<div class="page1">
</div>
</body>
.page1{
background-image:url(../images/1.jpg);
background-size:cover;
background-position:center;
width:100%;
height:100%;
display:block;
position:relative;
}
This is my code for setting a background image for a webpage, but unfortunately it's not displayed. Can someone help me correct this code?
Ok I understand now, you need to do
html, body{
height: 100%;
width: 100%;
}
Background is not showing because your div needs content.
2 options:
You can set the background for body instead.
body{
background-image:url(../images/1.jpg);
}
Or set the height of the div to the height of the image
First of all you need to put a closing </div>
<div>
<div class="page1"></div>
</div>
The problem now is tha your <div class="page1"></div> is emptry. You need to put some elements inside so that the image can be displayed.
DEMO
Maybe you html document is not well formed.
Try this:
<html>
<head>
<-- style block have to be contained within a <style> tag -->
<style>
.page1{
background-image:url(../images/1.jpg);
background-size:cover;
background-position:center;
width:100%;
height:100%;
display:block;
position:relative;
}
</style>
</head>
<body>
<div>
<div class="page1">
</div>
</div> <-- this tag was missing in your question -->
</body>
Second possibility, your image is not properly linked. The way it is written, it is in a folder 'images' parrallel to the one you html document is hold. So, find what relativity there is between your document and the image and try modifying it's source url(../images/1.jpg); .
When defining the path to another object, I find it easier to define the file path using ~/f1/f2/file rather than trying to work from the current directory using ../f1/f2/file. What the ~ indicates is to start at the top level directory and work its way down the file structure. Much easier.