My background image not appearing in WordPress though I have included this code in my style.css
body{
background: url("/wp-content/themes/my_theme/images.png");
}
Please help.
To add the theme background image in wordpress add the below code in css file .Used ../ to go to folder instead of using the full path
body{
background: url("../images.png");
}
body { background: url("./images.png");}
I tried this out with a test site local hosted on XAMPP. Single dot for relative URL in the same directory, it must be a Wordpress/localhost thing because usually just "images.png" works.
okay I find it out.
My wp-content folder was also inside a folder named wordpress.
so the correct code would be :
body {
background : url("/wordpress/wp-content/themes/my_theme/images.png");
}
Related
So I have created a simple html file with a CSS page linked to it. I am trying to put an image entitled "texture.png" as that background. It is contained within the file "images" while the "CSS" folder contains the CSS page. Both of these folders containing the necessary files are within the same folder. Because we are within the CSS folder I thought we needed to go out of the CSS folder and tell it to go into the images folder. This is what I had:
body {
background-image: url("../images/texture.png");
background: black;
}
I was pretty sure that the .. at the beginning of the url would work, but still it would not work. Any idea of any solutions?
It will always take the last condition you apply. Here you apply the last condition as color not the image, so it was always taking color.
Try:
body {
background: black;
background-image:
url("http://yourdomain.com/images/texture.png");
}
Demo
May it helps!
body {
background-image: url("../images/texture.png");
background-color: black;
}
I'm trying to put in a background image for my website and the background remains white. On inspect element it says that my image could not be found.
The CSS file is linked with the HTML file because other images work, and the full directory is:
F:\Pete\Web Design\Assignment\images\background.jpg
Image link for the error, if it helps:
body{
background-image:url(images\background.jpg);
}
This is the code for the background image I'm using.
Try using a Forward-Slash /
body{
background-image:url(images/background.jpg);
}
If you have your CSS in a subfolder, the following may solve the problem:
body{
background-image:url("../images/background.jpg");
}
Put your path in quote
body{
background-image:url("images/background.jpg");
}
If it is different it will not work.
F:\Pete\Web Design\Assignment\images\background.jpg
F:\Pete\Web Design\Assignment\index.html
I do not know what the problem is. I made a style.css and used this as my code
.jumbotron {
background-image:url(images/bikebg.jpg);
margin-top:-20px
}
before putting the background in the images folder, it worked fine. But since I changed it, it will no longer work. The site is live here http://bikesite.web44.net/bikes.html
try this
.jumbotron {
background-image:url(../images/bikebg.jpg);
margin-top:-20px
}
your folder path was wrong
try
url(../images/bikebg.jpg);
This is quite embarrasing. I am learning new things but I am surprised I can't figure this out on my own.
On my desktop, I have a folder called Test and in that I have index.html and a folder called CSS, which contains index.css and another folder called images with an image called logo.png.
In my index.css file, I have the following line:
background: url("images/logo.png") no-repeat;
Using the above line I can't display the image locally. I tried using /images and test/images but it doesn't work. How can I display this if I am viewing it locally?
As you mentioned, you have different folders for CSS and images inside your root folder Test. Since you are writing code for background in your CSS file:
Case 1:
background:url("logo.png");
Will search for your image inside CSS folder.
Case2:
background:url("images/logo.png");
Will search for images folder first inside CSS folder and then will search for logo.png inside that images folder. (But there is no images folder inside your CSS folder).
Case3:
background: url("../images/logo.png") no-repeat;
In this case .. will take you back to the main directory (i.e. from css folder to your root forder Test. Then /images will take you inside images folder and it will find /logo.png as a path to your image.)
Change img to the name of your class. Use content instead of background or background-image, and Set some width.
img {
content: url("../img/Wizard-of-os-black.png");
width: 90px;
}
Try changing this to
background-image: url("images/logo.png") no-repeat;
Basically, you would have to think logically. If your in a CSS file in contained within a folder, all links in the file are searched in the folder. If you want to link to an image in a folder called /img in the root of your site, you would have to move up a level by using
../img/pic.extension
I have a really weird problem. I have tried to use CSS to set the backgorund of the body, but it doesn't allow me. When I'm using the simple HTML tags within the tag
<body background="images/bg.jpg">
its WORKING! BUT when I'm using this in CSS:
body {
background-image: url(../images/bg.jpg);
}
It doesn't shows the BG image.
Everything is correct, if I check the folders, everything is in its place. I have tried this in Chrome and Mozilla, but neither of them are working.
Any suggestions?
If your CSS is inline:
<style>
body { background-image: url('images/bg.jpg'); }
</style>
If you're using a file, say css/main.css:
body { background-image: url('../images/bg.jpg'); }
Alternatively, you could use an absolute path:
body { background-image: url('/images/bg.jpg'); }
This example requires the image directory to be in the root web directory.
Try url("./images/bg.jpg") or url("/images/bg.jpg").
I had exactly the same trouble here. I thought that I tried everything but ... There was one more thing.
Firstly, my css path as followed:
assets/css/custom/main.css
my image folder as followed:
assets/img/bodyBackround.jpg
In order to display my backround on the page using css I had to go 2 folders back. Example from my page:
body{
background: url(../../img/bodyBackround.jpg) repeat;
}
Where ../../ means go back 2 folders. Hope this helps.
More information can be found here http://jeffreybarke.net/2013/06/paths-and-urls-relative-and-absolute/