I'm sure there is a very simple explanation for this but... How do I add a background image to my Joomla site? I am using a modified version of Atomic. The obvious thing to do would be to simply go into the template.css file and add a background-image property to my body or divs... however, it doesn't take. If I change the background color however that works fine. Perhaps the path is incorrect but I've tried it a hundred times and I doubt I'd get the path wrong every time. I've even tried placing the image file in the root folder, thus eliminating the possible mistyped path to the file.
Any ideas?
Thanks.
Editing the template CSS file is definitely the way to do it. This should help -
Folder to put image in:
JOOMLA FOLDER/templates/atomic/images
CSS to use:
#ID.class{background:URL(../images/background.png);}
If that doesn't work, post a link so we can debug for you.
Related
I am trying to access the first picture in the img folder but I can't seem to get the right file directory. I've tried it with ../img/model-1.jpg, with /img/mode1-1.jpg, and without the img. I've tried the to copy the path as well but nothing seems to work. I don't know if I'm doing it wrong or is it a glitch.
I found out the problem. I was using background-image and it was only focusing on the url and the other text probably cancelled it out. I used background and the link path worked fine. Thanks for all of your help!
I am just starting to look into html and css. I have already build something that should become a website, however when I wanted to organize the files I have put picture and code in two seperate folders and now the preview won't show the images. The rest of the CSS file still applies ...
Can anyone help with this newbie problem?
Thanks ! :)
You'll need to change the paths in the CSS file too; if they used to be e.g.
style.css
apple.jpg
and you had
background-image: url(apple.jpg);
and now you move them to
css/style.css
images/apple.jpg
you'd need a relative path like
background-image: url(../images/apple.jpg);
I have been getting this weird problem where, when I upload a new CSS file to the public_html folder in cPanel, it is not updating on the website.
Whats really weird about it was that I uploaded the entire website again. Every html file, every folder, everything. And when I checked the CSS file it was the updated version, but the browser was somehow reading the old one.
To fix this issue I had to change the name of the CSS file (in all of the html files too because without it they were still using the old one even tho it was nowhere in the folder) and re upload the whole website again.
So, am I missing something here? Is this supposed to happen? Or is this actually weird and shouldn't happen at all?
I've also run into this problem. It seems to be a caching issue. Trying this person's trick is how I narrowed it down to being a caching issue:
https://www.sitepoint.com/community/t/css-html-files-updating-on-cpanel-but-not-on-website/271683/5
Smells like cache to me.
If your recent changes are NOT there, then play a trick on the URL by changing the path a little. For example if the path was /themes/mytheme/assets/custom.css or whatever it is, change the version and do something like /themes/mythemes/assets/custom.css?v=1234567
By changing the URL in this way, it would bypass any kind of cache that would be looking for the previous URL. In other words, you should now see your correct CSS file.
After moving a wordpress site i noticed it didnt look the same so i figured there would be something wrong with a css file, turns out one of the css files of the lambda theme has a bad request and the request URL is constructed weirdly.
The left screen is the one after moving and the right screen is the fully working one that was moved.
Any suggestions?
The problem here is obvious (even thought the solution is not so obvious), There is a incorrect link to the css file on the page:
http://www.laakland.nl/wordpress4/D:/www/laakland.nl/www/wordpress4/wp-content/uploads/lambda/stack-493.css?ver=4.8.1
Since you said you didnt know where this is coming from, you can start here:
Check header.php to see if the CSS is added directly
Check functions.php to see if the CSS file has been added there using wp_register_style
Any plugins might have added this too, so you might check there too.
For convenience, use an IDE to search for the text stack-493.css on the whole wordpress folder to see if you find the file where it is being added from and then fix the link there.
Oke i fixed it, i tried the whole migration through duplicator plugin process again, but on step 3 of importing, i removed 'path' (which was "D:/www/xxxx.nl/www/wordpress4") so that after removing that, i thought it wouldnt add the unnecesary part from amit's answer.
thanks all!
For some reason my Application isn't finding my glyph-icons in my Aseets folder. This is the message that I'm receiving
ActionController::RoutingError (No route matches [GET] "/assets/images/glyphicons-halflings.png"):
I'm sorry if this is a stupid question and or it's already been answered, I'm fairly new to rails and I just can't seem to figure it out.
It depends on what you are using. Try adding this to your application.css.scss or whatever file you are using to override some bootstrap stuff.
[class^="icon-"], [class*=" icon-"] {
background-image: url(/assets/glyphicons-halflings.png)
}
My guess is that it's not searching in the right location. So figure out where it is and then just direct the link there.
If your view code called /assets/images/glyphicons-halflings.png, it would look for them in that absolute path. Posting your view code and your application.js/application.css files would be helpful
well the default location of that file is in img. Are you sure it isn't in assets/img?
considering that the file is a sprite sheet i'm not sure why you're trying to load it in something like an image tag.
if you are trying to use the images like the bootstrap site advises you to do (here) you may need to go into your bootstrap.css file and edit the path that looks for the glyphicons-halflings.png file. the default path is "../img/glyph.png" which would probably be stopping your images to show up (if thats what you're trying to do)
There are many right answers. But to fix this problem you should do the followings:
go tot he public folder (not the asset)
create a folder call img
place your graphicons in that folder
that should work
I ran into this problem while trying to use a manually installed version of 2.3.2 bootstrap. In the bootstrap.css file it, if you CTRL/command + F for 'glyphicon', you will see that it will be looking for url(../img/glyphicons-halflings.png)
You need to change the two found instances to url(/assets/glyphicons-halflings.png)
I tried changing the original (../img/glyph...) to many things, only /assets/glyph... worked