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
Related
I'm trying to build a tool that allows you to create a HTML-page using Blockly-Blocks (Blockly).
It is a HTML-page that looks like this at the moment:
It can already create code out of blocks, but now I need a way to preview the result live on the page in the upper right corner. Does anyone have an idea how that could be somewhat easily implemented? I've looked around a bit but only found tools that are able to Live-Preview HTML but none to use in your own page.
Thanks in advance!
You could document.write the page into an iFrame
This will alas not work here at SO since iFrames are sandboxed
but it does work in a jsfiddle
PS: Your HTML is malformed.
const ifr = document.preview;
const html = `<!doctype html>
<head>
<meta charset="UTF-8" />
<title>Preview</title>
</head>
<body>
<div style="font-family:Ariel, sans-serif; background-color: #ffcc00; color: #003300">
<ol>
<li>Line 1</li>
<li>Line 2</li>
</ol>
</div>
</body>
</html>`;
ifr.document.write(html);
ifr.document.close();
#preview {
width: 500px;
height: 500px;
float: right;
}
<iframe name="preview" id="preview"></iframe>
You can save the code in a file ex: "index.html"
Copy the code from the right side bottom from
<DOCTYPE HTML> to the end </html>
And open the file with your browser simple as that :)
I keep trying to use different images as a background but I am unlucky so far in figuring out if it is an issue with the photo file size or is there something wrong with the pictures i use? Asking since i tried with one image and the background image shows and works but any other picture that I want to use will not show up or work properly even though I have looked over my code multiple times and it is correct. Here is my current code
<!DOCTYPE html>
<html>
<head>
<title>Winston Berz</title>
<style>
body {
background-image: url("C:\Users\apere\OneDrive\Desktop\HTML Progress\Winston Berz\All Photos\img5.jpg") no-repeat center center fixed;
min-height: 100%;
background-size: 100%;
}
</style>
</head>
<body>
<div id="Navbar">
<nav>
Main
About Me
Contact
Photos
</nav>
</div>
<div id="Main Title">
<header>
<h1>Winston Berz</h1>
</header>
</body>
</html>
Want to also note that I also was using a separate document for css and got the same results so this time I resorted to internal css.
Help! Please and thank you I am still relatively new to coding.
you could try to clear your browser cache (here is how) maybe the browser is storing previous images.
Also, you could consider creating a <div> and place your background images there instead of setting the image inside css.
inside the <body> tag you can add
<div class="background-images-wrapper">
<img src="image/link/path" alt="background1"><img>
</div>
and inside your css style sheet you add this
.background-images-wrapper{
height: 100%;
width: 100%:
object-fit: cover;
z-index: -1;
z-index: -1 is to make sure that your images will always stay behind the rest of your elements
I am embedding base64 images in my web page projects and I want to keep it all organized but the base64 takes up large sections of the markup making it hard to read and debug.
Is there a way to separate base64 strings to another location on the page?
<html>
<head>
</head>
<body>
<!-- markup here -->
<!-- markup here -->
<!-- markup here -->
</body>
</html>
Is there a way to organize the base64 string all together at the beginning of the body tag or at the end?
Update
There are examples of moving the image data to CSS as a background image and then assigning the class. That might work for some cases but not for cases where an image behavior is expected.
If you are using CSS and want to keep the code organised you can place the data image url in css and call it using div in the body. check the example code
<!DOCTYPE html>
<html>
<head>
<style>
#someclass {
/* single gray pixel - repeated */
background-image:
url('data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==');
background-repeat: repeat;
background-position: left top;
position: absolute;
left: 30px;
top: 68px;
}
</style>
</head>
<body>
<div id="someclass">sssssss....</div>
</body>
</html>
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.
There's obviously something fundamental I don't understand about styling so please help me out.
Let's take the following simple HTML :
<!DOCTYPE html>
<html>
<div>
<div style="border: 1px solid black;">
Hi!
</div>
</div>
</html>
So I have a DIV inside of a DIV and you can see a nice border around it. All is well. Now, let's remove the inline style and put it inside a CSS file.
HTML :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<div>
<div class="test">
Hi!
</div>
</div>
</html>
CSS :
.test {
border: 1px solid black;
}
No border appears now. I've tested this on both Chrome and Firefox so I don't think this is browser-specific behavior. There's certainly a good reason why there's no border in the second case but I can't seem to find it. Why is this and how do I fix it in my CSS?
Your CSS file mustn't be getting loaded somehow or you have an older version cached in your browser.
Your code works fine. Here it is working in a jsFiddle.
Try performing a hard refresh (generally CTRL+F5 on Windows, CMD+SHIFT+R on Mac) and ensuring your CSS file is located in the same directory as the HTML file you're trying to open.
Did you put the css file in a sub folder?
If so, you'll need to point to it:
<link rel="stylesheet" href="subfoldername/test.css" />