body {
background: url("images/bg/cloud.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
root folder has css folder with index.css in it. root folder also has images and bg folder with cloud.jpg in it.
When the css is in the root directory it works fine. However once I move it the css file within a css folder and relink it via the new html path it can find the image! I feel like the css file is searching for the images file and cant find it. It needs to go BACK/OUT of the css folder THEN search for the images/bg/cloud.jpg? I think i am on the right track, does it make a difference if i did /images vs images? and also does adding .. make me go back a layer in the folder hierarchy?
it seems like I can have the image file inside a folder but not the css file or my file path is wrong?
If images folder and css folder are in the root.
Change this:
background: url("images/bg/cloud.jpg") no-repeat center center fixed;
To this:
background: url("../images/bg/cloud.jpg") no-repeat center center fixed;
It is because of the relative path from the .css file, adding the ../ makes the file path go back one file (back to the root in this case).
It's because of the relative paths. You have to add dots and a slash. Like think of the css file wants to find the image from where itself is. Use:
background: url("../images/bg/cloud.jpg") no-repeat center center fixed;
This should work.
With the two dots you say move one folder out, like out of /css/ and then into /images/...
Related
I'm having trouble getting my background image to show on all of my html pages. I was able to get the image to be the full background on all pages before, but after I put the image into a folder in my project, it's no longer working. I have a folder called images inside of my project that contains the image I want to use as my background so I added the images/ path. I double checked the name of the folder, name of my image, and also to see if its a jpg (which it is). I also checked my CSS code and no not have body mentioned anywhere else or background-image anywhere else. Can't think of anything else I'm doing wrong. Any suggestions? Thanks!
body{
background-image: url(images/main.jpg);
background-repeat: no-repeat;
background-size: cover;
}
If the images directory is next to the css file then it will be like this
background-image: url(./images/main.jpg);
but if the style file is inside a directory next to the images directory, then it will be like this
background-image: url(../images/main.jpg);
I am trying to set multiple background images for my page but I am unable to do so using an external CSS file and I don't know if I am doing something wrong or there is something wrong with Notepad++ or XAMPP because my code seems to be functional.
NOTE:
The images I am using has all the permissions turned on.
I am able to see the image if I use in-line CSS but not when I use an
external CSS file.
I am also able to see the image when i use the image tag.
Image Tag (this Works)
<img src="img/bg1.png" alt="">
Test HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<!-- Custom Cascading Styling Sheet -->
<link rel="stylesheet" type="text/css" href="css/custom-styles.css">
</head>
<body>
</body>
</html>
External CSS Code: custom-styles.css
Example 1 (this doesn't work):
body {
background-image: url('img/bg1.png'), url('img/bg2.png'), url('img/bg3.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Example 2 (this doesn't work):
body {
background-image: url('img/bg1.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Example 3 (this doesn't work):
body {
background-image: url('img/bg1.png');
}
Images in external css files are relative to that css file. Images inside your html (be it an img tag or (inline) css) are relative to that html document.
Supposing you have a structure like this:
/
/css
style.css
/img
image.jpeg
index.html
Inside index.html you would reference that image as img/image.jpeg. Inside style.css however, you would have to go up one directory first, so the url would become ../img/image.jpeg.
You could also use absolute urls, or url relative to the root. Those would work in any file they are referenced from. So if you would use http://example.com/img/image.jpeg or /img/image.jpeg those should work anywhere. Do note that full urls are a pain when developing on localhost, as your hostname will probably be different then online.
To debug these kind of issues (in chrome), you should open your developer console, go to the "network" tab, filter by "img" and look for any lines in the list that are red. They will most likely say that a 404 response was returned from the server (the image was not found). Check the urls the browser is trying to fetch. It should be easy to spot what went wrong if you know the directory structure of your site. Also note that you can see who initiated the request in the initiator column. Clicking on the link brings you straight to the line of code that requested the image.
You need to give the relative path, so I'm guessing all you need is:
body {
background-image: url('/img/bg1.png');
}
background: url('../../../static/images/index_hero.jpg');
.nameofclass {
background: url('../../../static/images/index_hero.jpg');
}
But the following code itself worked for me
body {
background-image: url('img/a.png');
}
You just follow trail and error method from html template from simple code..
Caution : check whether you have turned off image viewing in your bowser.
:-))))
I'm trying to create my first Wordpress theme, and I've been stuck on this for a few hours. I know how to add images using HTML(Through Wordpress), but I can't add images in the CSS, specifically, through background-image.
My guess is that it has something to do with the file path, but I was sure I had everything right. Also, I tried checking for spelling errors. If I didn't mess up the file path, I don't know what I did.
Does anyone have any ideas of what is wrong?
.jumbotron {
background-image: url('Images/header.jpg')
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}
To give additional information about the file path, All the files are inside of the theme's folder. The CSS stylesheet, header.php, footer.php, and the "Images" folder are located here. In the images folder is a picture named header.jpg.
the problem is that you forgot ; after url()
Fix this:
background-image: url('Images/header.jpg')
to
background-image: url('Images/header.jpg');
and maybe try adding no-repeat like:
background-image: url('Images/header.jpg') no-repeat;
I am trying to put an image into the background of my app. I seem to be running into some issues with the CSS. I have the following class:
.fixedBar {
position: fixed;
left:0%;
top: 0%;
width:100%;
padding:15px 15px;
background-color:#003c0c;
background-image: url(NavAppPics/city-clipart-black-and-white.gif);
background-blend-mode: multiply;
background-size:cover;
z-index: 6;
}
I am trying to use an image from a folder, but I cannot figure out how to load the image from the folder. I've looked at other similar questions os Stack Overflow, but i cannot tell what I am doing differently.
As well, I am trying to make the bottom of the image line up with the bottom of the fixed bar (the class i am using) however it seems to be lining up the image incorrectly (i switched to an online URL to test this). any ideas or help would be greatly appreciated!
edit:
My folder structure for this section is:
Public
bower_components
directives
NavAppPics
city-clipart-black-and-white.gif
styles
styles.css (where the class is)
tpl
EDIT: The filepath must be wrong for your image. Where is the NavAppPics folder located? If it's in the root directory, add a / to front of the URL to tell it start from the root directory rather than the current folder:
background-image: url(/NavAppPics/city-clipart-black-and-white.gif);
As far as aligning the image to the bottom of the div:
background-position: center bottom;
More info about the background-position property:
http://www.w3schools.com/cssref/pr_background-position.asp
The address of the image is relative to the CSS style file.
Since your CSS is at styles/styles.css, the background image is being looked for at styles/NavAppPics/city-clipart-black-and-white.gif.
Specify a relative or absolute path to fix the problem:
background-image: url(/NavAppPics/city-clipart-black-and-white.gif);
Or:
background-image: url(../NavAppPics/city-clipart-black-and-white.gif);
I changed my main image to a css background property but when i open my index.html the image does not show up.
I used the following property inside my custom.css file.
background: url("/img/banner-bg.jpg");
background-repeat: no-repeat;
height: 80%;
background-attachment: fixed;
background-position: center center;
background-size: contain;
However the weird is when i try to live preview with brackets it is showing up just fine.
Put trailing dots before your img folder path and make sure the file is in the folder
If that doesn't work, find the image in explorer, right click to get the properties and find the full image path. Use the full image path preceded by
file://
e.g.
background-image:url("file:///C:/Users/Rachel/SkyDrive/webdesign/img/banner-bg.jpg");
and that should work
I think the problem is a slash at the start of the string. There's a difference between if you start path with slash or not.
For example if you working on localhost and path to the folder where the css file exists looks like that:
localhost/yourProjectFolder/and/all/of/subfolders/
With slash:
background: url("/img/banner-bg.jpg");
//returns absolute path : localhost/img/banner-bg.jpg
Without slash:
background: url("img/banner-bg.jpg");
// returns absolute path : localhost/yourProjectFolder/and/all/of/subfolders/img/banner-bg.jpg