background image is not coming from css in joomla 2.5 .
I am writing this css code for background image
background-image: url(images/abc-md.jpg);
However if i am trying on my local machine by creating a folder name website and keeping the html code and css in it ,and images are placed in a folder named images which is also kept in side website folder
Please help how i can make images to come from css whether inline or external in joomla
If you are calling background images in your CSS, then the path to the image is relative to the CSS file, not the root of your website.
If I understand things correctly, your images and CSS directories are both at the same level inside your website folder, in which case what you want is:
background-image: url(../images/abc-md.jpg);
Note the ../ in the image path.
Good luck!
Most likely the style sheet you're editing is your template's? In that case, images/abc-md.jpg would be in /templates/your_template/images/ and not in the root.
To make it simple, just add / to the URL of the image:
background-image: url(/images/abc-md.jpg);
If it still doesn't work, give it a go with firebug (or chrome dev tools) and see if the rule is picked up at all (maybe you're using the wrong css selector) and if the image can be loaded and if the container size is large enough to display it and the possibilities are endless, why don't you try the above and let us know some more, i.e. at least your site's address ?
Related
So I am remaking a site for my company moving from our wordpress site that has been failing. I am running into issue of using any image with a relative path. I can use the absolute path to the image on the wordpress site but that's not going to last so I need to be able to use relative. I am using asp.net to create the site.
My file path is like this:
Root
|-Images
|---Image in question
|-Views
|---Home
|------Index.cshtml (This is where I want the image showing up)
In my Index file I am trying to use an image as a background so I have the following:
<style>
body{
background-image: url("/../Images/Church-Main-Homepage-Image-3.jpg");
}
</style>
So far I've tried:
/Images/Church-Main-Homepage-Image-3.jpg
../Images/Church-Main-Homepage-Image-3.jpg
../../Images/Church-Main-Homepage-Image-3.jpg
/../../Images/Church-Main-Homepage-Image-3.jpg
/../../../Images/Church-Main-Homepage-Image-3.jpg
<Application>/Images/Church-Main-Homepage-Image-3.jpg
I know I'm going a little too far with the "../" but I've been just trying different things to try and get this working. When using an absolute path for the background it works fine with no error.
Is there some special way I need to do this in asp.net that it just doesn't like these relative paths?
Update
screenshot of files
Issue turned out that I needed to have my images folder in the wwwroot folder. Thank you #thanzeel
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 used notepad++ with html5 and css3. The problem is that the css isn't loading the images, though in the editor it did. I need help. here's my text for one of the images named content, and yes the content tag is on purpose since it's id:
#content{
width:900px;
height:600px;
background:url(images/content.png);
border-radius:20px;
}
So, the folder is on desktop, it's named images and the image is a png named content. It worked on the editor but it's not showing up on the website. On the website it's just showing the grey background.
I took screenshots of it working in edit viewer and it on the actual website.
http://postimg.org/image/mdeso350h/ -- looks fine on edit viewer
http://postimg.org/image/gb75xlgkh/ -- not working on website
First you need to check the file path of css and the images.,
I think this is your file structure
--folder
----index.html
----name.css
----content.png
so, just try that background:url(content.png); this will help you
incase your file structure like
--folder
----index.html
----name.css
----images/content.png
in this case your style works fine background:url(images/content.png);
Always use quotes for linking images like;
background-image: url("images/content.png");
And inside your root folder in your server (in x10host.com), use file manager to create a folder named images where you have uploaded your file index.html, and then you can see index.html file and images folder in a single place. Then upload your images to images folder. Hope this helps.
Sometimes design tools tend to save file extensions capitalized (.PNG for example), and not every server is aware of that, so you should be.
Check your folder location of the image as well.
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.
Well I built a page which is working absolutely fine as you can see below:
but when i copy my folder to C:\wamp\www\myFolder and run it through localhost using WAMP Server it look something like this
the problem is that the attached Style Sheets are not working and the Java Script is not working.
see below
where you see the green dots here the images are loaded fine...
where you see the pink dots the images are not loaded
where you see the black dot.. 5 boxes in the red section... they are javascript rollover images well they loaded but are not working.. once mouse over the rollover image is not displayed
on the top right where you see the yellow boxes.. the links and the textbox and the button have css style attached which is not working...
WHATS HAPPENING
Perhaps your assets (css and js) are served incorrectly?
If you view source of you page in Firefox, you will be able to click on css link. Do it and see if it take you to your css. If not, then you have the answer - assets path is wrong.
It looks like the images are in the wrong place.
WAMP by default points to C:\www. If your images in your CSS/HTML are referenced by "/images/example.png", then Apache interprets this request as:
"Look for the file example.png in the folder C:\www\images\"
You need to either add the directory "/myFolder/images/" to the image URL or reference the images relative from the CSS file.
This means if your css file is in your C:\www\myFolder and you have an images folder in C:\www\myFolder then your images inside your css will be declared like this:
url('images/example.png');
Note that the trailing slash has been removed, this means it will be relative from the CSS rather than from the root directory (C:\www)
Hope that helps.
i had my links like
href=".\images\image.png"
just changed them to
href=".\images/image.png"
the server was doing what it was supposed to do...