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;
}
Related
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");
}
I know it's repetitious question but I have problem with my code.
I have searched stackoverflow and w3schools for a background image setting
and wrote the code that was on both sites exactly but still I have problem with the following code.
body {
background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg");
}
or
body{ background-image: url("Male-Fitness-Models-BAck.jpg"); }
above are the codes I used for setting background, but neither of them work.
HTML picture
If the background image file location is correct you might need to add a height and width to the container of the background image.
body {
height: 500px;
width: 500px;
background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg");
}
There are a few things to investigate to ensure it always works:
1) Using the project absolute path:
ensure you have FollowSymLinks in your vhosts enabled, that way you can use / in the src to call the image.
e.g. <img src="/images/dog.png" />
2) Make sure the image exists
copy and paste the src that's displayed in the browser (inspect with firebug, or view-page source to get the link) into the url bar and see what it returns - if it's a 404 then it doesn't exist on the path you gave, if it's 403 the path might be set to really strict permissions (755 on directories and 644 for files is recommended) and you might have to tweak your vhosts file to allow people to view the content, but not access the file tree.
3) If the image does exist, there is no message (other than 200) and you're using the path correctly - then it's probably because the div is empty. A background on a div with no content will result in empty space, because the background is stretching itself over 0 pixels. Add a min-height and min-width rule to your css or use inside the div:
CSS:
div {
background: url('/images/dog.png');
min-height: 50px;
min-width: 50px;
}
HTML:
<div> </div>
4) Use a proper folder structure
by using a file tree that makes sense, it makes resources easier to manage.
Hosting every file in the DOCUMENT_ROOT is messy, I'd recommend the below structure:
|--index.html
|----images/
|----css/
|----js/
that's a basic structure, then you can add more folders based on area e.g.
|--index.html
|----[area]/
|----images/
|----css/
|----js/
body
{
background : cover;
background: url("http://quizdoo.com/wp-content/uploads/qc-images/58d2957b47354.jpg");
}
<body>
</body>
Add background size to make it visible
body
{
background: cover;
background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg");
}
If you are using a PC saved image path make sure to replace the \ with / and it will work.
example:
background-image:url("C:/Users/foldername/Desktop/images/City_Landscape_Background.jpg");
It's a silly question but I can't find the right way to do it.
I am making a Wordpress theme for myself and in the CSS, I am specifying image sources with my full domain.
Example:
#header {
background: #ffffff url("http://mydomain.com/wp-content/themes/mytheme/images/header-bg.jpg");
}
I want to make sure that everything works if I install the theme in another domain. What is the proper way to specify the source in this case?
You just have to use relative paths to the CSS file, for example if you have the following structure:
/mytheme/images/header-bg.jpg
/mytheme/style.css
Then at style.css make the rule like this:
#header {
background: #ffffff url("images/header-bg.jpg");
}
As Wesley had said before - just remove http://mydomain.com
And you need to work out a correct relative path to images catalog. I suppose your css is in wp-content/themes/mytheme/css, so i would change it to:
#header {
background: #ffffff url("../images/header-bg.jpg");
}
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/
I have this in an external css file, but its not working at all. I would assume I'd written it wrong, but when placed internally, it works fine. Any ideas as to what might be going on?
html
{
background-image:url(images/background-grid.jpg);
background-repeat:repeat;
}
I assume your CSS file is in a folder like this.
/
css/
yourcss.css
images/
background-grid.jpg
index.html
The paths given in your CSS file are relative to the path of the CSS file (in the example I given, the css folder). So you should use ..:
background-image: url(../images/background-grid.jpg);
I think you didn't write it completely wrong
But it's better to use body instead of html.
Explanation why to use body
It allows you to use an overlay on top of that body tag. Like a grid-ish background on the body and a shade on the side. But both are correct. Depending on what you are trying to do ofc.
If you don't repeat your background there is a possibility that your picture doesn't use the whole page and then you should use the html tag. But in this case it gives the same solution because of that repeat.
SO replay: tnx to attronics
Explanation of your 'error'
If your images are in a different folder than your html page (which should be the case).
You should use .. as relative path to your css file.
Without the .. it would mean that you are going to look for that image in the same folder as your html page.
body{
background-image:url(../images/background-grid.jpg);
background-repeat:repeat;
}
Here is a site that gives some Basics of CSS. Didn't check the source though.
It may be your folder structure, try
html
{
background-image:url(../images/background-grid.jpg);
background-repeat:repeat;
}
When we have these folders
css
img
and index.html
when we write css in style tag in index page which is called internal css then it works right but when we right css in styles.css in css folder then background img does not work.
because you move with in folder and path of background img does not work. so you have to write like this:
background-image: url('../img/bg.jpg');
then it will work properly
.. this mean go one level up.
So, if your folder structure is like this:
image/
background.png
css/
stylesheet.css
then your css rule should be like this:
html {
background-image: url('../image/background.png');
}
If your folder structure is like this:
style/
image/
bgr/
background.png
css/
deeper/
stylesheet.css
then, go up two levels to the image directory like below:
html {
background-image: url('../../image/bgr/background.png');
}
And so on. Just add up the .. followed by trailing slash /.