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.
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.
I am trying out CSS's shape-outside:
shape-outside: url(image_file.png)
Example: https://jsfiddle.net/quzaorg0/3/
However, if I tried this example on the local machine (and used the path just as pikachu300.png for the HTML and CSS), and opened up the HTML file in Google Chrome or Firefox using the file system, then it wouldn't wrap the text around the image.
I had to start a local web server (any local web server, or simply by using ruby -run -e httpd . -p 8080), so that the CSS was able to get that image and wrap the text around the image.
The HTML and CSS had proper URL path, which is just the filename:
The CSS:
#intro-img { float: left; shape-outside: url(pikachu300.png); }
The HTML:
<img id="intro-img" src="pikachu300.png">
So the HTML could load the image, but the CSS couldn't load that image. It had to be served by a local web server.
I tried also
#intro-img { float: left; shape-outside: url(file://pikachu300.png); }
and it didn't work either. Why would the path work for HTML but not CSS, and how to make it work if it is tested as local files?
P.S. in the Developer Console, Network tab, the file cannot be loaded the second time. If I run a web server, the file can be loaded both times:
I ran into this exact problem on a project of my own today.
This behavior is an idiosyncrasy having to do with file permissions via FTP vs. HTTP. The solution is to run a local http server rather than using file:/// when working locally. Only under HTTP does the browser have permissions to read pixel transparency.
(#V.Volkov's comments on the original post give the solution, but I thought I would post the answer so that future users don't have to dig through the comments like I did.)
I can See the problem. usually for relative path for current directory we refer it as ./dir/file but for this case just omit . to become /dir/file this worked for me.
In other words use url("/dir/file") instead of url("./dir/file") once referring to local files in current directory in CSS.
When using url() to point to your local file, if its within the same project folder, you need to refer it relative to where the CSS is located.
background-image: url('./imagename.jpg'); // Image is within the same folder with the CSS
background-image: url('./../imagename.jpg'); // Image is located outside the folder where css is located.
background-image: url('./../image/imagename.jpg'); // Image is located in another folder relative to the css folder.
For retrieving image in folder inside computer (outside the project scope), you can use direct path to that path instead. Right click on the image --> Property --> Location to get the path to the image. Make sure you change the path's \ to / on the URL.
background-image: url('C:/Users/{user}/Downloads/{imagename}'); // Image is located inside the Downloads folder
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 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
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)