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/
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");
}
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;
}
we are about 10 danish people from an IT class in Denmark, and we have discovered that the background-image thing in css isnt really working like we want it to.. Maybe anyone out there can help us?
I personally havent worked much with the problem, but my friend Jacob (Who is busy atm so he cant write this for himself) has used like the past hour on figuring out how it works.
What he has found is, that it works when you give it a URL like:
background-image: url("i.imgur.com/AO4oM9a.jpg");
It will work just fine, but if you try with a local file:
background-image: url("images\background.jpg");
It wont work, we have tried some different stuff, like putting in the full destination of the file, like "c:/desktop/website/images/background.jpg" you know, (Probably not valid, i just typed something so you would understand what i meant by full destination).
Anyone know how or why this wont work?
BTW we are doing it in the HTML tag in a .css file, like:
html { background-image: url("images\background.jpg"); }
You are using back slash (\) instead of forward slash (/). And other thing to remember is you should give correct path of image.
if your css file and image is in same folder than you can do like this
html {
background-image: url("background.jpg");
}
if your css is inside css folder and in same directory you have your image inside images folder then you can do like this
html {
background-image: url("../images/background.jpg");
}
Try to use like this:
html { background-image: url("/images/background.jpg"); }
Or
html { background-image: url("images/background.jpg"); }
Try this one:
html { background-image: url("../images/background.jpg"); }
Just write:
background:url('../images/background.jpg');
Add more css as:
background-size:cover; min-height:400px; width:100%;
background-position:center center;
See below working example:
/*--CSS--*/
.image-box{background:url("https://cdn.pixabay.com/photo/2014/03/22/22/05/sunbeam-292987_960_720.jpg");
background-size:cover;
min-height:300px;
background-repeat:no-repeat;
background-position:center center;
}
<!--HTML-->
<div class="image-box">
<h1>This example</h1>
</div>
This may help:
always remember to give background image in style.css(css file) and if you have no choice left then define it in HTML and always keep images and css files in a folder names assets and then you can call them out easily.
background-image: url('assets/TYdollarsign.jpg');
I need to create a small website that can be opened and functional in a single file. I can't quite figure out how to get an image background to show up. I have my image in Desktop/assignment/Website-Background.jpg. I have tried a bunch of different ways to get it to work, but it just wont. My current code is:
body{
height: 100%;
}
.bg {
background-image: url("Website-Background.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
And I have tried also tried
body {
background-image: url("Website-Background.jpg");
}
Can somebody point out what I'm doing wrong?
First in your browser press F12 and youll see if the image is being called or not in the console window, Then if it is being called and there is no error then maybe set a height of 200px and see if the image shows up.
I do not believe you are indicating the location of the image properly. Remember for CSS, you have to back out of folders and go into others to find the file. Where is your HTML file? You may have to back out of its location and into your assignment folder.
If you are backing out:
body {
background:url("../assignment/Website-background.jpg");
background-size:cover;
}
If you simply have to go deeper into your folder:
body {
background:url("assignment/Website-background.jpg");
background-size:cover;
}
Just a side note that if you "really" want to have your website as a single file (meaning that background image is another file), you can encode your image into base64 via some tool (like) and then have it in your file.
Just put the image and your html document in the same folder and your code will work like a charm...You will have to change nothing in code to make it work..
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");