I've been attempting to link my external images in my css using background-image: Url('Background.png'); and also tried background-image: Url("Background.png"); but theyre both not working and not showing up on my webpage, however the html page is linking perfectly to my css. I am attempting to build a website locally.
Here is the current file path for my images:
Users/admin/Desktop/images
and the file path for my css:
Users/admin/Desktop/stylesheets
Assuming that by Users/admin/Desktop/stylesheets you mean /Users/admin/Desktop/stylesheets/something.css then Url("Background.png");* would reference /Users/admin/Desktop/stylesheets/Background.png.
You need to include the directory path too. ../images/Background.png.
* if it works at all. I don't know if url is case sensitive or not.
you need to do Url(../images/Background.png)
Related
i can only see the background image when accessing the HTML file directly but not when accessing it through the localhost server (i'm using Flask as framework)
This is the code of the background part:
<style>
body {
background-image: url(file:///C:/Users/LENOVO/Desktop/chatbot-in-python-master/network.jpg);
background-repeat: no-repeat;
background-size: cover;
}
</style>
Nevermind it's because the local file system path and not a web server URL.However, recommend for me the best website to get the url without losing the quality of the image.
The addressing method is not correct!
First, try copying the image to the source folder (for convenience).
Or address using dots and slashes
Example:
background-image: url(./images/network.jpg);
or similar examples
you can not use of local file system path!
You can't access the resource using that type of path since is a file system path.
You could upload images to imgur and generate a short link to the image without losing the quality of the image.
enter image description here
I am trying to make a full page background image when the site loads. The problem is, none of the images i tried wont' load.
I checked my code syntax, checked the image format, checked my path to image folder, everything seems to be fine but images still won't load.
CSS:
.header-nav-menu{
background-image: url("../project/full.jpg");
}
I am not getting any error messages so I can't figure out where is the problem.
Try referencing the image at root level. Like this:
.header-nav-menu{
background-image: url("/project/full.jpg");
}
You should also be able to check the file path with your code editor, if it redirects to the image then the path is good and syntax are good. Check if you uploaded your img correctly to the server if you are using one, otherwise put it directly at the root as said below, it can't be messing for a lot of possibilities.
You should try your browser's development tools to investigate. (F12 on Chrome). You can see if the image section is present in the page. Try using a full path, rather than a relative one to see if that gives you anything. Also it could be a permissions issue where the folder containing the images is not accessible.
.header-nav-menu {
background-image: url('full.jpg');
}
Read up on pathing: Difference between Relative path and absolute path in javascript
I have html/css image slider.My images is loaded from css and all works on localhost but on server images is not loaded...
background-image: url("assets/images/slider/slider1.jpg");
all other images on css is load successfully, only this cant....like this one:
background-image: url("assets/images/card2.jpg");
Some servers require image urls to be case-sensitive to load that image. Make sure the names of all folders and image files are lower-case (as is in your requirement). Also check if the card2 file extension .jpg or .jpeg
One more thing you can try is adding a "/" at the beginning of url like
Change:
background-image: url("assets/images/card2.jpg");
to:
background-image: url("/assets/images/card2.jpg");
Hope it helps.
I have encountered an issue and I really don't know what is causing it. I am working in brackets and the site works perfectly in preview.
However, when I click on the actual index.html file my background images from my scss are missing.
Uploaded images via src are working
Rest of my sass is working
Js is working
Only the images for my backgrounds ( using url ) are not working anymore, so I presume it has something to do with the url.
An example of the scss:
.jumbfirst {
background: url('/imagini/images/background6.jpg');
background-size: cover;
width: $fullwidth;
min-height: 600px;
}
Any ideas? Thank you!
It depends on your devel setup, meaning you use relative paths but depending on the structure of your files and how you run your index.html the browser reads the paths differently.
I'm guessing that double clicking the index.html file doesn't show it from your local server but as an absolute path like
file:///Applications/XAMPP/xamppfiles/htdocs/devel/test/index.html
This example is from a MAC and it's the path to the index.html in the file system.
You should either have a local devel server (e.g. XAMPP) or if you already have one change the address in your browser to something like
http://localhost/devel/test/index.html
In this case I'm calling index.html from my local server, inside the devel/test/ directory.
Hope this helps.
It's because path relativity to your image file. When it comes to domain image shows because the path is set to current directory. But with index.html image path will be converted to something like this http://www.example.com/index.html/imagini/images/background6.jpg. Since the browser try to find image in that path image wont be found. Check your console in developer tools of chrome browser. You may get more details from there.
This might be fixed by removing starting / from your image url or creating a .htaccess with proper parameters.
I have this:
body {
background-image: url("Images/Background.jpg");
}
But the url it generates is incorrect no matter what variation I use.
When I run my website, the url is localhost/MYSITE as it's plonking it on a local IIS server (not iisexpress).
The image is stored in a folder called Images on the root of the application.
if I inspect the element this is what I get:
background-image: url("Images/Background.jpg");
gives
url("http://localhost/MYSITE/Styles/Images/Background.jpg")
I don't know where the Styles comes from.
background-image: url("/Images/Background.jpg");
gives
url("/Images/Background.jpg")
Which is wrong since it needs to be MYSITE/Images.
background-image: url("~/Images/Background.jpg");
gives
url("http://localhost/MYSITE/Styles/~/Images/Background.jpg")
Styles is the location of the LESS file so I guess that is sorta why?
background-image: url("~/../Images/Background.jpg");
gives
url("http://localhost/MYSITE/Styles/Images/Background.jpg")
What is going on?! Why does it keep doing these weird things?
When I deploy to live it will no longer be IP/MYSITE it will be mysite.mydomain.com so I have to get the relative pathing correct.
If you give url of image in css it path start right from the folder where your css is so if your css file is inside Styles folder and you give background-image url as
url("/Images/Background.jpg");
localhost/MYSITE/Styles/Images/Background.jpg
because your folder structure is like this
Root
Styles
Images
so if you want to point some image in the Images folder from your css file in Styles folder you should write like this
url("../Images/Background.jpg");
It means go to the parent folder that is Root and then Images and then Background.jpg