I am new to web design and I think I need to convert a jpeg into a url. I have an image saved locally on my computer. An example website that I am using as a reference has a one page for their html/source code and a different page for their css. All of the images are listed under the css page, however, they are typed in as a url. For example url(..green sea.jpeg) When I try to replace their css code with my image, it can't be found. I know I'm new, so I figure I must be making a simple simple mistake, but everytime I try and look it up online, I find directions on how to convert a jpeg into a url and it looks like you need another kind of software to do this, but I'm not exactly sure. Any help/direction would be very much appreciated!
Thanks!
When you replace your image name for the one you see in the CSS:
url(..green sea.jpeg)
...make sure that the image you are wanting to use is in the same location (folder / place) as the green sea image.
So if I want to replace it:
url(..myNewimage.jpeg)
I would make sure it was in the same place as the image I'm replacing it with.
ALSO, I just noticed that your path is wrong. You have ".." when it should probably be "../".
So try this:
url(../green sea.jpeg)
The url you need for your code is just wherever you have posted the image on your server in relationship to the css file. For example, if your directory is structured like this:
/CSS
-style.css
/JS
/images
-green-sea.jpg
index.html
Then your url would be (../images/green-sea.jpg)
Related
I can't find solution to load image linked in css. Chrome inspector shows me message:
404 (not found)
and shows me this link: http://127.0.0.1:5500/components/css/img.png
even if I have in my css
background-image: url(../src/splash_1/img.png)
Could anyone please help me with appropriate linking... I can't find answer how to correctly link that image in that folder structure.
UPDATE:
Below in the second picture attached, I added print screen with real data from Chrome Inspector and code and the element. Maybe that will be more helpful. I want to link correctly
ccbackground.jpg
Thank you!
You just need to pass the path as a string in single quotes with the same path you tried first. The .. is needed to step one folder up from the css folder.
background-image: url('../src/splash_1/img.png');
Note: it can be that the path is cached locally on the client side, you may need to clear browser cache to make it work.
Eventually it turned out I had 2 pairs of the same css files in different location. One pair in correct location and the other in main folder. I was changing css files in editor located in main folder, but in index.html css files were linked to specified folder. So even I changed css it didn't reflect changes in index.html, because the changes were done in the same name css files but in other location. I wonder how it happened I had 2 pairs of css files in different location, this is something really unclear for me. Thank you All for your help and your time.
Try this
background-image: url('/src/splash_1/img.png');
Please try below code...
background-image: url('components/src/splash_1/img.png');
I started to work with mautic (open source email marketing automation).
Im trying to build a template for a landing page and therefore I'm editing "*.html.twig" files. At least I could find out that twig is a PHP engine by Symfony. What I could not find out yet though is something actually totally simple, at least in css/html.
All I want to do is specify the correct file path to an image file as a background-image:url(''); within the style attribute of the body tag. (See example below)
How on earth is this twig working with file paths? It seems to automatically change the file path I specify, but in a way that is not comprehensible to me.
I tried several options, but the only thing that works at least partially is specifying the absolute path. As soon as I start using the template in mautic though and build a page from it and save it, even the absolute file-path gets 'crashed' on the output source code. What the heck?
I did not find much info on file path syntax in twig. What I found sounded so horribly complicated that I can't believe it should really be that complicated to simply put in a file path? Am I wrong?
Here is the example, specifying the absolute path in the actual source code.
<body style="background-image:url('http://sawiya.de/mautic/themes/mautictheme1/img/background.jpg'); background-color:#213E4C;">
When viewing the result in the browser, without adding content to the landing page template, the source code output is the following (path changed, but the result is at least that the image is being shown):
background-image:url(http://1.1.1.2/bmi/1.1.1.5/bmi/sawiya.de/mautic/themes/mautictheme1/img/background.jpg);
After adding content on top of the template in mautic, the file path is being changed even more and reads the following from the source code output (now the background image does not get displayed anymore, so its clearly broken):
background-image: url(http://1.1.1.3/bmi/sawiya.de/mautic/"http://1.1.1.5/bmi/sawiya.de/mautic/themes/mautictheme1/img/background.jpg")
What is this all about? Where can I get the info on how to easily and correctly specify the file path? Is it really that hard?
Ok, now I found out something strange. It might be a bug in mautic here.
When I open the page where I specified the image via the background-image:url() through the https:// -Protocol, instead of http://, it works!
And the resulting source code looks as expected:
background-image: url("http://1.1.1.5/bmi/sawiya.de/mautic/themes/mautictheme1/img/background.jpg")
So, wrong adress here, I think. At least to solve the bug. Hope someone finds this as a solution, until the bug is fixed.
Cheers!
Edit: Of course its better to specify the file path in a relative way, so that when the theme is used on another server, the path is still correct. In twig the best way to do that seems to be this. At least it works perfectly well.
background-image: url('{{ getAssetUrl('themes/'~template~'/img/logo.png', null, null, true) }}';)
This is my coding, I want to change my background-image, but it seems not working.
I have tried this coding, it is not working, i don't know what's wrong.
<header style="background-image:url('C:/Documents and Settings/Administrator/desktop/images/navigationBackground.jpg')"></header>
Because you are using full path of file instead of URL.
Change url to http://localhost/images/navigationBackground.jpg, or better without server name, just relative url images/navigationBackground.jpg (and move image to web accessable location instead of desktop)
you have to specify the url of the image, instead of the filesystem path
You should restructure your webpage path. You can put all your resources in a single folder and just specify the url of your image, instead of using filesystem path.
OK so I am Trying To Organize a file directory for a website. It looks like this.
- My Blog Site
- HTML-CSS-DOCUMENTS
- CSS-MAIN.css
- BACKGROUND-IMAGES
- Background.png
But in the CSS document I cant seem to get it to use the image.
Here is the code I have been using
background-image:url("My Blog Site\BACKGROUND-IMAGES\Background.png");
Can someone please fix it or tell me what I'm doing wrong, thanks!
You need to go back in the path and get your image. something like this:
background-image: url('../BACKGROUND-IMAGES/Background.png');
Here ../ means going one step back in the path. And use / instead of \.
You would use in your CSS:
background-image: url('../BACKGROUND-IMAGES/Background.png');
You go back one directory using the ../ and then link from that directory.
This should work fine:
background:url('http://mywebsite.com/background-images/background.png');
I am looking to write a stream filer in a http module that anyalyze the output html of a page, search through the pages html for any images within the page, check if the source of the image has a full path or relative path. If its a relative path, alter it to have a full path. Anyone ever write anything anything like this? Looking for some examples of such?
I suggest to direct use the WebControlAdapter for the img tag and not go by analyse the full page for many reasons.
Here is an example how you can you this adapter, you can simple change it to just fix the full path:
http://www.codeproject.com/KB/web-image/IePngControlAdapter.aspx
Here is one more example more close to what you ask