Setup:
Product -> src -> static -> ostatic [ contains two folders css and images ] -> images -> this contains all my images.
Using bootstrap and trying to add background-image: to jumbotron, having spent two hours now it's really bothering me. Within django I can just call {% static 'images/imagename.jpg' %}" and it'll work fine, but when trying to do i.e. background-image: url('images/imagename.jpg'); this will not work and I've tried many other combinations too, including reading a lot of stackoverflow questions on topic..none of the solutions have seemed to help me though =/
I think you need to make the path relative to the site root. Based on the structure you tell us:
background-image: url('/src/static/ostatic/images/imagename.jpg');
The leading / should start the path at the site root.
I had the same problem!
it looks like you can't use a local picture there and that it must be a link
I mean something like this:
background-image : url(https://image.freepik.com/free-photo/bight-orange-colored-light-bulb_23-2148182084.jpg);
not that specific link tho ^_^
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'm trying to apply a background-image to a header in a site.master file. If I use:
background-image:url('./themes/Modern/images/bg_full.png')
It works fine for all root level pages, but for any dynamic pages higher up directory structure it does not apply. So I changed it to:
background-image:url('~/themes/Modern/images/bg_full.png')
But when I do this the image does not show on any of the pages. Any help appreciated.
CSS is client based. Basically what your code does is creating a GET request like: http://domain.com/css/~/themes/Modern/images/bg_full.png
You probably want something like:
background-image:url('/themes/Modern/images/bg_full.png'); since this will result in a request like http://domain.com/themes/Modern/images/bg_full.png
background-image:url('http://your-domain-host.com/path_to_images/bg_full.png');
try it if not working then give me your page url i will give you exact code
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 trying to include a background image using a relative link in the css.
My tree looks like this
/_css
/_css/gcrm.css
/_images
/_images/bg-grad1.gif
The css I am using to use to call it is like so
background-image: url(../_images/bg-grad1.gif);
It displays as expected in Visual Web Developer however when I put it on the web, no background. When I inspect element in Chrome this is the linked file
mysite.com/_css/../_images/bg-grad.gif
Unfortunately I cannot link to it with the / root as I am trying to setup SSL and my hosting company has allowed us to use as shared cert that mirrors the site 1 level deep in the domain tree.
I must be missing something incredibly simple but I can't figure out what it is to get it working.
Your url looks fine in regards to your file structure. Assuming this is your file structure:
/_css/
...
gcrm.css
...
/_images/
...
bg-grad1.gif
...
From the fact that it's actually outputting the .. in the url in the code, maybe you need to enclose the url in quotes:
background-image: url("../_images/bg-grad1.gif");
Use following code:
background-image: url(../../_images/bg-grad1.gif);
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)