I've been teaching myself Wordpress theme development and have a custom made theme on my website(made by another dev a while ago). I want to be able to download the footer background image but I can't seem to find the correct url for it. In the Style.css file the footer background image is declared as
background: url(images/layout/bg-footer-boards.jpg)
But mysite.com/images/layout/bg-footer-boards.jpg, mysite.com/wp-content/images/layout/bg-footer-boards.jpg, and mysite.com/themes/mytheme/wp-content/images/layout/bg-footer-boards.jpg all give me 404's. I think this is just something with the file path that I'm missing but any help would be much appreciated!
Css url() is relative to the file rather than the webroot.
So images/layout/bg-footer-boards.jpg
refers to a folder called images/ located in the same folder as your .css file.
Related
I have been trying to figure this out for sometime now. When I execute my website my images will not upload. As I can see the file on the page
enter image description here
It seems like you have index.html in the same folder as your images. You can either remove images/ from your src='...' or move all of your images into the images folder and add images/ to href='favicon.ico'.
hope that helped.
It looks like your PNG files are stored in the same directory as the HTML, not inside the images/ directory (as you probably intended). Try moving the images inside that folder.
TRY THIS "mountain.png" IF index.html is in the images folder but that is wrong though OR place your index.html out of images folder and add src="./images/mountain.png"
I'm trying to upload one project on github but CSS and img wont read.
I have tried to upload it 2 times, and checked that files names is written with small letters and are the same in the name of the file and the same in the html code but it still wont work.
Site was build using bootstrap, it is first time for me using BS so i'm not sure if it is because of that.
I am attaching link to a site and link to my repositorie on github. are you able to see what problem is?
Link to a site:
https://veljko-premovic.github.io/Tindog/
Link to repositorie:
https://github.com/Veljko-Premovic/Tindog
thank you in advance
Veljko
You are serving your images from a folder called images, but there is not such a folder.
The same with CSS, you are serving your styles.css from a “css” folder that is non-existent in your Github repo.
Either create those folders and add the images and CSS in them, or in every “src=“, remove the folder name.
Your paths are wrong, they all point to images/something.png but the images are in the same root folder as index.html so it should just be
<src img="something.png">
same for the css
I am trying to add a template to cakephp 2. The website is called Calm and is found from the link below. My issue is it isnt loading properly. The instruction were to simple place the files in the correct directory BUT it isnt that simple. I download the file and in webroot
I place index.html in the view.layout and call it test.ctp
I place the style.css in /css
I place all the Js file in /js
I change all the image paths to just "images/"
The layout does load BUT none of the images load and I suspect the js doesnt work
http://www.cakephpexpert.com/blog/free-cakephp-templates
rename index.html to index.ctp, default cakephp image directory is '/img', if you want use your own, try start path with slash```$this->Html->image('/images/your.jpg')``
I have a style sheet where I include background images.
background: url(../Images/myImage.png);
problem is, pages from different directories use this css!
My CSS files are in a CSS folder, images in an Image folder, and my html pages are in many different folders depending on their content and meaning to the website.
All my pages inherit this css as it is the MAIN theme.
The path used in the above example is a relative path. And obviously, this path only works for some of the pages. ALL i need is to link the images in the css from the ROOT folder. Therefore every path is correct no matter where the file is in the folder structure!
I have tried:
~/Images/myImage.png
./Images/myImage.png
/Images/myImage.png
Images/myImages.png
I don't think a root folder selector exists... but I hope it does :/
/Images/myImage.png
this has to be in root of your domain/subdomain
http://website.to/Images/myImage.png
and it will work
However, I think it would work like this, too
images
yourimage.png
styles
style.css
style.css:
body{
background: url(../images/yourimage.png);
}
click here for good explaination!
All you need to know about relative file paths:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backward and starts there
Starting with "../../" moves two directories backward and starts there (and so on...)
To move forward, just start with the first subdirectory and keep moving forward
I use a relative path solution,
./../../../../../images/img.png
every ../ will take you one folder up towards the root. Hope this helps..
For example your directory is like this:
Desktop >
ProjectFolder >
index.html
css >
style.css
images >
img.png
You are at your style.css and you want to use img.png as a background-image, use this:
url("../images/img.png")
Works for me!
This problem that the "../" means step up (parent folder) link "../images/img.png" will not work because when you are using ajax like data passing to the web site from the server.
What you have to do is point the image location to root with "./" then the second folder (in this case the second folder is "images")
url("./images/img.png")
if you have folders like this
then you use url("./content/images/img.png"), remember your image will not visible in the editor window but when it passed to the browser using ajax it will display.
In the CSS all you have to do is put url(logical path to the image file)
Normally when you have items like images or css in the theme folder they get nicely parsed and the url omits the App_Themes part. However I noticed for some background images, set in the css which comes from the same theme, that a request with the App_Themes/MyTheme/someimage.gif gets done. Resulting in an obvious 404 response.
How does this happen? And more important to me: what can I do to get rid of this as it hurts my performance.
Paths in CSS files are always relative to the CSS file. So if you set a background image from a CSS file (located in the theme folder) then the image URL is relative to the CSS file.
If you don't want that behaviour, then you can reference the image using "../../images/myImage.gif" or "/appName/images/myImage.gif" (assuming your image is in the "images" folder of your web app.
Haven't you answered your own question?
"...css in the theme folder"
"...I just specify a call as background image in css to myimage.gif"
if myimage.gif is not located in the same folder as your .css file, you'll need to specify its relative path as per M4N's response.