At first, the problem seemed to be that only my CSS file, which was linked into my HTML document, wasn't loading in the browser when opened, but then when integrating an image into the HTML document I found it also wasn't appearing in the browser when the document was opened (and I used Microsoft Edge, Chrome, and Firefox to open the document. All files are located in the same folder on my computer, and yet using relative paths to locate the files also seem to be doing nothing. The code looks as such. (Worth noting that I was messing around with both the background-image property in CSS and the tag in HTML to load the same file since neither seemed to work)
HTML Code:
<head>
<title>Quad Game Schedule</title>
<link type="stylesheet" rel="text/css" href="displaylayout.css">
</head>
<body>
<div class="fieldimg">
<img src="field.png" alt="Field Overhead Image">
</div>
<div class="F1">
<h2>Full Field Games</h2>
<ul>
<li>12:00 - TSPro vs Wings</li>
<li>12:45 - Team Evanston vs Bosnia</li>
</ul>
</div>
CSS Code (displaylayout.css):
body {
background-color: rgb(242, 242, 242);
color: red;
}
p {
color: red;
}
img {
align-self: center;
vertical-align: top;
}
.fieldimg {
height: 30%;
width: 45%;
background-image: image(field.png);
background-size: cover;
}
.F1 {
align-self: center;
float: left;
clear: none;
width: auto;
}
In the browser developer side bar, it says that there are no style properties for the webpage, which can't be true. I can always write the CSS into the HTML document, but the image is also an integral part of the end product and that won't load either. (Also maybe worth noting, with text-color for the p element and body used in CSS was merely for testing purposes)
Edit: this is the exact code for the test files I made that still don't work.
HTML:
<html>
<head>
<title>Test Webpage</title>
<link type="stylesheet" rel="text/css" href="test.css">
</head>
<body>
<h1>This is a test heading</h1>
<p>This is a test paragraph</p>
<img src="test.png" alt="Test Picture">
</body>
</html>
CSS:
h1 {
color: red;
font-size: 24pt;
}
p {
color: blue;
font-size: 12pt;
}
The image in the new folder for these test files was renamed as test.png.
Edit 2: I just found out that older files of mine that linked to external files still work, so the problem lies with the new files I make.
In your code you are trying to load the image twice, once as a background image for the div with class fieldimg, and once inside it in an ` tag:
<div class="fieldimg">
<img src="field.png" alt="Field Overhead Image">
</div>
.fieldimg {
height: 30%;
width: 45%;
background-image: image(field.png);
background-size: cover;
}
1.) The background image needs to have be defined like background-image: url(field.png), not like you did it ("image(field.png)")
2.) The height setting for .fieldimg (30%) won't work, because there is no container around it that has a height setting to which the 30% could relate. So this becomes 0px high and therefore won't be visible. To avoid this you can apply height: 100% to the body
If you fix both, you'll have to erase either the background image or the image tag, otherwise you'll get your image twice...
Your CSS contains an error that might be the cause:
.fieldimg {
height: 300px; /* set an absolute amount of pixels here instead of a relative number (which is relative to nothing) */
width: 45%;
background-image: url('field.png'); /* this is how you place images by setting a background image */
background-size: cover;
}
Reference
Also, remember that when not using relative paths in your CSS it is relative to the location of the .css file! So if using an image as a background image in a specific CSS folder, be sure the image is relative to that CSS file location.
Related
I'm very new to HTML, CSS, and JS.
I've just watched a youtube lecture for making the "Rock Paper Scissors" game website.
At the very early stage, I'm stuck when I make a CSS file.
Like this.
#import url('https://fonts.googleapis.com/css2?family=Asap:wght#600&display=swap');
*{
margin: 0;
padding : 0;
box-sizing: border-box;
}
header{
background : white;
padding: 20px;
}
header > h1{
color : #25272E;
text-align: center;
font-family: Asap, sans-serif;
}
body{
background-color: #25272E;
}
.score-board{
margin : 20px auto;
border : 3px solid white;
border-radius: 4px;
width : 200px;
text-align: center;
color : white;
font-size: 40px;
padding : 15px 20px; /*top-bottom left-right */
font-family: Asap, sans-serif;
position : relative;
}
.badge{
background : #E2584D;
color: white;
font-size: 14px;
padding : 2px 10px;
font-family: Asap, sans-serif;
}
#user-label{
position : absolute;
top: 0px;
left : 0px;
}
And in my HTML file, I just add it to the header.
Like the way, I've learned.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rock Paper Sissors Game</title>
<link rel="stylesheet" type="text/css" href="css/page_styles.css">
</head>
<body>
<header>
<h1>Rock Paper Sissors</h1>
</header>
<div class="score-board">
<div id = "user-label" class="badge">user</div>
<div id = "computer-label"class="badge">comp</div>
<span id="user-score">0</span>:<span id="computer-score">0</span>
</div>
<div class="result">
<p>Paper covers Rock. You Win!</p>
</div>
<div class="choices">
<div class="choice" id="r">
<img src="images/hand_rock.png" alt="">
</div>
<div class="choice" id="p">
<img src="images/hand_paper.png" alt="">
</div>
<div class="choice" id="s">
<img src="images/hand_sissors.png" alt="">
</div>
</div>
<p id="action-message">Make your move</p>
</body>
</html>
I've double-checked the file's location and there is no problem at all.
But whenever I launched the HTML file, my page style doesn't change at all.
For the first time, I checked the sources of HTML through the inspecting function in Chrome.
It was like this.
But as soon I reload my page the CSS source file changed to like this.
I really don't know why my CSS file not working in Chrome browser.
Coz in Microsoft's Edge the problem doesn't appear.
My Html CSS image :
My chrome screen :
When I push F4(Reload Page) :
It seems like my CSS file has gone.
Ok first your CSS file is fine and it is not gone at all. To find the CSS file and check it out go to your editor and navigate to the CSS link:
<link rel="stylesheet" href="assets/css/style.css">
hover over the href and alt + click you will find your file, another way to locate your CSS file in the editor and reveal in Explorer.
If you were able to find your CSS file make sure you are adding the accurate path in your link tag.
In case you still can't find the file please use the search in your PC it will show up for sure.
Also based on the images you posted every single change you were making is only restricted to the copy on the browser. Since you were using the page option as I have seen from the images you showed us, try to use a hard reload by clicking ctrl + shift + R maybe that will solve the Chinese letters thing. or close the page and try to reopen it after the hard reload.
Also if you added body { background-color-:red; } at the top of your page it will be overridden by your CSS code Since order matters.
body {
background-color: #25272E;
}
another thing since you are using the developer tools to make changes to your files, here is a tip for you do please use this feature to make the changes apply to your local copy too.
1- navigate to Sources > overrides > selete folder to override (your project folder)
2- make sure the local override is checked.
3- choose the file you want to edit after that save your changes and reload the changes will happen and your local copy has been changed as well.
I'm not sure if this what you are trying to say. But anyway I hope this was helpful.
I have a <embed> element inside a div that contains a .txt file and I want to set it to automatically fit the size of the txt files contents.
However none of the tips I found here seem to work.
height: 100% or auto does absolutely nothing.
<!DOCTYPE html>
<html>
<head>
<title>Testpage</title>
<style>
body {
background: #aaa;
}
div {
width: 800px;
background: white;
}
embed {
padding: 25px;
width: 750px;
height: 100%;
}
</style>
</head>
<body>
<div>
<embed src="file.txt">
</div>
</body>
</html>
Also using <object> instead of <embed> as suggested in many questions here doesn't change the behavior at all.
It can't be that hard to do something this basic in CSS?
You maybe can try to use the font-size property of CSS.
An example of usage with it:
embed {
font-size: *what you need here*;
width: 100%;
}
Otherwise you may wanna look into CSS properties in JavaScript, and read lines, length etc. of content and base of it and take the users screen width into fact for the best result!
EDIT:
You could use XMLHttpRequest, AJAX, jQuery aswell in JavaScript.
And then change font size based on length of content.
I cannot get this background image to appear. It is supposed to appear in the background with the header overlapping it. I'm using an id selector. I literally copied this straight from the book i have for my class and it's not working at all.
Here is my code. I'm very new to css
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fall Nature Hikes</title>
<style>
#content { background-image: url(fall.jpg);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
width: 640px;
height: 480px;
padding-top: 20px; }
h1 { background-color: #FFFFFF;
opacity: 0.6;
font-size: 4em;
padding: 10 px; }
</style>
</head>
<body>
<div id="content">
<h1>Fall Nature Hikes</h1>
</div>
</body>
</html>
In my browser it works right for another image, you can check the url(fall.jpg) path is right？
I checked, your code can show the image, you can see this sample:
> https://jsfiddle.net/a9qm1j2t/
It's just copy all your html and css source code.
I think you should check image path and image type again, and make sure it's right.
May be your image path is not proper.
First check where is your css file and image file.You can verify your image path by inspecting your code on browser and in style check your image path.
When I put this code in my html file, it is working without issue:
<style type="text/css" media="screen">
#headerimg
{
display: block;
background-image: url('/Content/images/epp/ebweblogo1.gif');
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:100%;
margin: 0;
padding: 0;
}
</style>
but when I move it to my css file as this:
#headerimg
{
display: block;
background-image: url('/Content/images/epp/ebweblogo1.gif');
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:100%;
margin: 0;
padding: 0;
}
This is my html:
</head>
<body>
<div class="page">
<div id="header">
<div id="headerimg" />
I am assuming it's due to the image location but I'm not sure since I've tried variations of the path and never got it to work.
Any suggestions?
EDIT
Sorry, you can't read my mind, I know.
When I place the css in the html file, the image displays fine. When I move it to the css file (site.css) it is not displaying at all. I've tried several different paths and it isn't being displayed no matter what I put in there.
UPDATE #2
When I change my html to this:
<div class="page">
<div id="header">
<div id="headerimg">test</div>
I am getting the image behind the text as 1 line that says test but not the full size of the image.
So it is apparently not displaying the image due to the size of the div? I changed the css to this:
height:130px;
but that did not change the height at all.
The two bits of CSS are not equivalent.
In one, you have #headerimg (id selector) which is a very different selector to .headerimg (class selector).
#imgplacement is also missing from the second sample.
As for the image issue - you need to ensure the correct path to the image directory.
This will be relative to where the CSS is - if in a CSS file, the image needs to be relative to the CSS file. If it is embedded in the HTML, it needs to be relative to the HTML file.
Since the path is rooted (starts with /), it should work everywhere. Use the developer tools to determine where it is looking for the image.
Include your css like this on the home page:
<link rel="stylesheet" type="text/css" href="route_to_your_style.css" media="all" />
And then be careful on routes for your image.
include the CSS file between the <head></head> section of your HTML like this:
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/css/cssfile.css" />
I'm new to HTML and CSS in general. Please help me with the code. I cannot get the background-image to appear in my browser although i typed the syntax correctly. All i get is an orange box, with no alert.png image. I'm following an online tutorial btw: http://dev.opera.com/articles/view/31-css-background-images/#thecode
Edit 1: The image, html file and css file are all inside the same folder. Yet no success.
Edit 2: I used an unique css file name instead of a generic "style.css" (which i have several of them in my system) and it worked! Make sure there's no space between url and the parenthesis.
HTMl code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>alert message</title>
</head>
<body>
<p class="alert">
<strong>Alert!</strong>
This is an alert message.
</p>
</body>
</html>
CSS code:
.alert {
width: 20em;
background-image: url(C:\Documents and Settings\USER\My Documents\alert.png);
background-color:orange;
margin: auto;
padding: 2em;
}
The url must be a string:
url("C:\Documents and Settings\USER\My Documents\alert.png");
I would guess it's a permissions issue, regardless you will most likely have problems with the URL being a file reference when you move this to a server, I would recommend moving your image into the same location (or better yet an image folder in the root of your site) as your html file and then modify your css to be this
.alert {
width: 20em;
background-image: url('/alert.png'); /* '/images/alert.png' */
background-color:orange;
margin: auto;
padding: 2em;
}
Another way of doing things is to put your text into a div, and set the image as the div's background image using css, like so:
<div class="alert">
<p>
<strong>Alert!</strong>
This is an alert message.
</p>
</div>
And, for the CSS:
.alert {
width: 20em; (Width of entire div, which includes text and bg image)
background-image: url('../alert.png');
background-color: orange;
margin: auto;
padding: 2em;
}
You can see the live JSFiddle example here: http://jsfiddle.net/Cwca22/TdDJY/
Also, in the code above, the background image will tile (repeat) both horizontally and vertically to fill the space of the div. In order to prevent this, you could make the div the same height and width as your background image, or put background-repeat: no-repeat in your css under the .alert class.
Hope this helps and good luck!
Please check your URL, if possible you can use firebug which is addon of firefox, which will definitely help you, by indicating if image has been loaded or not.
Else another solution would be give height to your alert class as follows
.alert {
width: 20em;
background-image: url('/alert.png'); /* '/images/alert.png' */
background-color:orange;
margin: auto;
padding: 2em;
height: /* height of image*/
}
First put your alert.png picture in the same folder as your html file.
Then try this in your CSS file:
body {
background: orange url("alert.png") no-repeat;
}
I think the problem was the "\" in \alert.png
Good luck!
In the original question he had in his css
background-image: url(C:\Documents and Settings\USER\My Documents\alert.png);
I ran into problems with a gallery page that had images as background thumbnails. Any image filename that had spaces would not appear. It was only the fact that one image happened to have underscores in place of spaces and that did appear that I was able to track it down. As there are spaces in his url, this could be the problem. I fixed my problem by using \ to escape any characters like spaces causing the problem. i.e.
A\ space\ in\ the\ filename.jpg
though this might not work in a Windows pathname!
If the image is in the same directory as the script he shouldn't need the full url anyway.