i've read some post here where the main problem when images are not showing on Github pages is because it is case sensitive. ive been dealing with the same problem of images not showing but in this case i dont see the mistake.
.header--button span{
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url('/assets/icons/down-arrow.svg');
this is the way i've placed most of the images but still ican find where am i mistaking?
thisis the link to my repo
https://github.com/AlejandroCaputo/Batatabit_CryptoProject
this is the link to my github page
https://alejandrocaputo.github.io/Batatabit_CryptoProject/index.html
what am i missing ?
The cause of the problem of icon images not being shown is due to the 'reference path' of the images.
For example, the image named 'down-arrow.svg' is
actually located at
/Batatabit_CryptoProject/assets/icons/down-arrow.svg,
but is being referred as:
/assets/icons/down-arrow.svg
The problem can be fixed in 2 ways:
Refer to the image with its actual full path,
I.E., by using /Batatabit_CryptoProject/assets/icons/down-arrow.svg
Refer to the image using a relative path, I.E. by removing the leading / from the image reference.
Looks like your path was incorrect. Remove the / before assets
.header--button span{
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url('assets/icons/down-arrow.svg');
I'm sure if this gonna work, but I think you could try relative paths instead of absolute ones. For example in your case, change the following
.header--button span {
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url('./assets/icons/down-arrow.svg');
}
I hope your problem solved. But in next time if you can't figure how to solve that problem! just copy image/icon address from your github repo. Open images from your repo and copy the address from it and then paste the link in your imge src. Then it will work.
like your Icon link of git repo is : https://raw.githubusercontent.com/AlejandroCaputo/Batatabit_CryptoProject/069113465c3018bc1b4835cfaa2f658c5be68f0c/assets/icons/batata.svg
you have to post this link into your code icon src option.
This could be due to the following any or all reasons;
github is case sensitive so make sure that following are not same,
images.jpg != Images.jpg != images.JPG
The path directory needs to be checked, down-arrow.svg is actually to be located at /Batatabit_CryptoProject/assets/icons/down-arrow.svg
OR
/assets/icons/down-arrow.svg
Hope this would be helpful.
Related
The image doesn't come up on the stylesheet, I've tried so many different things (changing to background
.vegeta {
height: 300px;
width: 300px;
padding: 10px;
background: url("images/vegeta.jpg");
}
However when I put it in the tags on the html page the image shows. The stylesheet is definitely being called by the html document because the other changes show on the page, its just the image that isn't showing up.
Any help would be appreciated, thank you.
First of all you should check all the directory location and spelling, these are the basic problems which we don't notice many time.
Use can use background-image instead of just background because CSS is updated, maybe this can help.
I hope this may help you! Otherwise you can tell me again with all the directory properly.
I know it's repetitious question but I have problem with my code.
I have searched stackoverflow and w3schools for a background image setting
and wrote the code that was on both sites exactly but still I have problem with the following code.
body {
background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg");
}
or
body{ background-image: url("Male-Fitness-Models-BAck.jpg"); }
above are the codes I used for setting background, but neither of them work.
HTML picture
If the background image file location is correct you might need to add a height and width to the container of the background image.
body {
height: 500px;
width: 500px;
background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg");
}
There are a few things to investigate to ensure it always works:
1) Using the project absolute path:
ensure you have FollowSymLinks in your vhosts enabled, that way you can use / in the src to call the image.
e.g. <img src="/images/dog.png" />
2) Make sure the image exists
copy and paste the src that's displayed in the browser (inspect with firebug, or view-page source to get the link) into the url bar and see what it returns - if it's a 404 then it doesn't exist on the path you gave, if it's 403 the path might be set to really strict permissions (755 on directories and 644 for files is recommended) and you might have to tweak your vhosts file to allow people to view the content, but not access the file tree.
3) If the image does exist, there is no message (other than 200) and you're using the path correctly - then it's probably because the div is empty. A background on a div with no content will result in empty space, because the background is stretching itself over 0 pixels. Add a min-height and min-width rule to your css or use inside the div:
CSS:
div {
background: url('/images/dog.png');
min-height: 50px;
min-width: 50px;
}
HTML:
<div> </div>
4) Use a proper folder structure
by using a file tree that makes sense, it makes resources easier to manage.
Hosting every file in the DOCUMENT_ROOT is messy, I'd recommend the below structure:
|--index.html
|----images/
|----css/
|----js/
that's a basic structure, then you can add more folders based on area e.g.
|--index.html
|----[area]/
|----images/
|----css/
|----js/
body
{
background : cover;
background: url("http://quizdoo.com/wp-content/uploads/qc-images/58d2957b47354.jpg");
}
<body>
</body>
Add background size to make it visible
body
{
background: cover;
background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg");
}
If you are using a PC saved image path make sure to replace the \ with / and it will work.
example:
background-image:url("C:/Users/foldername/Desktop/images/City_Landscape_Background.jpg");
I am following a tutorial to improve my skills. So I don't have great knowledge with CSS and HTML.
My problem is that the following is shown in the tutorial and hero image needs to appear on the website. But it doesn't.
Anyone have recommendations on what I should try to do instead?
Here is the bit in my CSS file:
#hero-image {
height: 580px;
padding-top: 1px;
background: #e8eced url('../images/hero.jpg') no-repeat center;
}
Thank you
Right-click the element and select Inspect. On the styles right-click on the image link and open it in a new tab. It should tell you the URL it's using and double check if the path is correct.
If the image you're trying to use is hosted on the tutorial you're following then you need to provide an absolute path (includes http:// or https://) otherwise your code is looking for an image relative to your file which is in your server.
I'm making a website for myself (for my jewelry business :) ), for the first time. I can't figure out why css is applyed on one page but not on the other, code for getting css is in both html files the same <link rel="stylesheet" href="shizoid.css"> and they are sharing the same css file.
http://imgur.com/UP3Liae
http://imgur.com/aaGZEa1
You can see on the photos above, for example, in html is tag:
<h1>Extravagant, Unique, Handmade Jewelry and Crafts</h1>
and in css the moderation for it is:
h1 {
background-color: #a018ba;
border-radius: 15px;
font-family: Garamond;
font-size: 40px;
text-align: center;
margin-bottom: 0px;
}
On one page this is working, and on the other isn't. It is like thas from yesterday, it was ok before. I tried to view it both in Firefox and Chrome and on two different computers. I'm looking but I can't see, please help. :)
I have found that it is generally better to apply styles such as borders and backgrounds to a div and then put the h1 into it. For example, your CSS would look something like:
#title-box { width: 800px; margin: 0 auto; background-color: #a018ba; border-radius: 15px; text-align: center; }
h1 { font-family: Garamond; font-size: 40px; }
And your HTML would look like:
<div id="title-box"><h1>Extravagant, Unique, Handmade Jewelry and Crafts</h1></div>
From the photos you posted, I would think that perhaps there is some error elsewhere in your code, such as a without a corresponding that is causing the CSS to not be applied.
Without further information on your website it is hard to determine the actual problem, my first guess is that your second webpage is located in a folder and you haven't updated your CSS.
<link rel="stylesheet" href="../shizoid.css">
If your webpage is on a different folder you can use this href to access the previous directory.
Something is wrong in your idea .It is not css related problem.
Your images are difference. You can see just drag each image and move each image in the browser.You can see that each image has difference.Your whole site is just an image. There is no such kind of tags like you mention <h1>Extravagant, Unique, Handmade Jewelry and Crafts</h1> in your whole html code .Just I posted an image check it either save it in your local drive or drag and drop each image in the new tab browser.
Hope the answer.
I would place the CSS (if it is site wide), in a folder called CSS in your root folder. Then you can simply call the script like this:
<link rel="stylesheet" href="/css/shizoid.css">
From any page...
The initial '/' takes you back to the root of your site.
here i am developing a project using VS2010 ultimate and was building some views when i came across this problem. i am defining background-image for some div classes like .jpg,.png but they are being visible only in IE6 and not on chrome
here is the div class
<div class="log_pad">
and here its style
.log_pad
{
background-image: url('~/App_Data/images/login_pallete.png') no-repeat;
width: 478px;
height: 397px;
margin: 0px;
padding: 0px;
overflow:hidden;
float: left;
}
Probably has to do with your url path for background-image. What's with the ~/ at the beginning?
background-image CSS url path is relative to the location of the css file, so if your css file is in the base directory and your image is in subfolder App_Data/images you should type it like that, not with the ~/ at the beginning (I'm not sure about the ~ but a / at the start of a relative file path returns you to the root directory). If your css is in a sibling folder to App_Data/ like css/ you would write it as url(../App_Data/images/login_pallete.png). I would recommend trying to write it as a true relative path to the CSS file rather than starting at the root as a way of troubleshooting.
See this article for more info. If that is not the issue, it is due to something else you did not post here.