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');
}
Related
I am trying to call an image from a folder using css.
I have tested the css with background color, so i know it is linked and working properly.
what I've tried:
I have tried to call an image from outside the image folder.
I have tried to change the image type to png.
And i have tried a different image.
html
<section id="hero">
<div class="hero container">
<h1>testing</h1>
</div>
</section>
css
#hero{
background-image: url(img/Computer_repair(1).jpg);
}
Your code works (see fiddle) so I'm assuming you just have the image path wrong.
So when you say...
#hero{
background-image: url(img/Computer_repair(1).jpg);
}
...that means where ever your css file is saved, there also needs to be a folder called img and inside that folder is where you need to put Computer_repair(1).jpg
Your code looks fine. I suspect there's a problem with the image path. Try this:
background-image: url('/img/Computer_repair(1).jpg');
The problem was it was not working with the (1).
I Needed to change from Computer_repair(1).jpg to Computer_repair_1.jpg
HTML
<section id="hero">
<div class="hero container">
<h1>testing</h1>
</div>
</section>
Css
#hero{
background-image: url(img/Computer_repair_1.jpg);
}
directory:
index.html
Images
(inside Images folder) Logo.png
CSS
.landing-page_logo{
display: block;
background-image: url("Images/Logo.png");
width: 300px;
height: 300px;
background-size: cover;
}
<section class="landing-page">
<div class="landing-page_logo">
</div>
<h3>Welcome</h3>
<h4>This is ......</h4>
<div>
Animated Text header
</div>
</section>
Image is in correct folder. Tried using <img> tag and that was working. But background-image tag is not working
If you have your images within folders then try this
background-image: url(/resources/Images/Logo.jpg);
don't forget to put backslash in front of the first folder.
Make sure you include the link to the css stylesheet.
Your html should look something like this:
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="landing-page">
<div class="landing-page_logo"></div>
<h3>Welcome</h3>
<h4>This is ......</h4>
<div>
Animated Text header
</div>
</section>
</body>
</html>
Of course make sure to change 'style.css' to your css file name.
I have tried many things but cannot get these two documents to work together. I am sure the CSS file is linked correctly with the correct file name. I'm attempting this after watching this YouTube video tutorial below on coding a blog. https://www.youtube.com/watch?v=24QmGjcqIiw
Here is the HTML:
<!doctype html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="new 1.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="content">
<div class="post">
<h1>Post Title</h1>
<p>Testing Testing 123...</p>
</div>
<div class="post">
<h1>Post Title</h1>
<p>Testing Testing 123...</p>
</div>
<div class="post">
<h1>Post Title</h1>
<p>Testing Testing 123...</p>
</div>
<div class="post">
<h1>Post Title</h1>
<p>Testing Testing 123...</p>
</div>
<div class="post">
<h1>Post Title</h1>
<p>Testing Testing 123...</p>
</div>
</div>
</div>
</body>
</html>
Now here's the CSS:
*{
margin:0px;
padding:0px;
}
body{
background-color: #f0f0f0;
font-size:14px;
color:#000000;
}
wrapper{
width: 80px;
margin-left:auto;
margin-right:auto;
}
#header
{
background-color:#cZazqqcccccaccccc;
height:800px;
width: 100%;
margin-bottom:10px;
}
#.post
{
background-color:#ffffff;
padding: 5px;
border: 1px solid #cccccc;
margin-bottom:5px;
}
I'd try the 2 most common culprits:
Incorrect filename
Incorrect file location
If your filename is definitely correct, go straight to 2. It is considered best practice to avoid spaces, even though browsers should be able to read them as #zzzzBov points out.
There's 3 main ways you can reference your files:
a direct link to the file, without specifying a path
a relative link, which points to your file relative to where the file requesting it is located
an absolute link, which specifies a complete file path from a domain or a hard drive
And if you file structure (how you've organised all your stuff) looks like this:
public_html
L css
L myStyles.css
L index.html
L aboutMySite.html
Your links inside index.html and aboutMySite.html would look like this:
direct link: /css/myStyles.css (the first / represents the root directory, or the highest level folder in which your site lives)
relative link: ../css/myStyles.css
absolute link: www.mysite.com/css/myStyles.css
Avoid using space characters in your filenames.
Rename new 1.css to new1.css (make sure both the reference and the actual filename match) and make sure all CSS files are in the same folder as your HTML file since you are not specifying any path.
If you really wish to use the space character (an invalid character for URIs), encode them with %20, but it's a lot simpler to avoid them.
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>
I am so befuddled. I am trying do something seemingly so simple but failing miserably. I'd like to have the image "b.png" change to "c.png." Can you find where I went wrong?
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main">
<img src="b.png" />
</div>
</body>
</html>
style.css
.main:hover {
background-image: url('c.png');
}
Your <div class="main"> is getting c.png as its background – you just can't see it behind the <img src="b.png"> element.
Try removing that <img> tag, and using this for your CSS:
.main {
background-image: url(b.png);
}
.main:hover {
background-image: url(c.png);
}
You probably also need to give .main a height and width, since it no longer has anything inside it to give it a size.
Nothing wrong with what you are doing, except that the image(b.png) is of course on top of the background...So you can't see the background image.