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
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 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..
when i change path of imag.Browser doesnot show image
working code
body {
background-image: url("D:\main.jpg");
background-repeat: no-repeat;
background-position : center;
background-attachment : fixed ;
}
same code but changing path of image does not show image in browser .Not Working
body {
background-image: url("D:\Source_Code\HTML\Adventure Time\main.jpg");
background-repeat: no-repeat;
background-position : center;
background-attachment : fixed ;
}
You should give the url path from the current css file and not from the root of you computer. Also it's slash not backslash.
For example if your css file that contains this is in adventure-time directory do : background-image: url("./main.jpg");
Try giving virtual path instead of physical path.
e.g.
background-image: url("/HTML/Adventure Time/main.jpg");
The reason most urls are relative is because that absolute urls will work albeit they do depend on the operating system. Which is not desired for maintainability.
To explain a relative url (since your relative url seems to be working for you) i made this example. I wil use the following file structure.:
Your webpages are in ./myWebsite/Pages
your CSS is in ./myWebsite/CSS
the images are in ./myWebsite/Images
Then the url of the image would be as follows:
background-image: url("./Images/main.jpg");
Breakdown of the url:
The url is made up of different parts to be simple. The first part would be the "./". This is simply to say something like "parent directory".
So the parent directory of the file which this line of code is in(./myWebsite/CSS/stylesheet.css) would be "./myWebsite/".
Then the next part is "Images/". This means something like; "select folder 'Images' ".
So now we navigated to the parent directory and then selected the folder where the images are located. The only thing left to do is to select the image, which is done by specifying its name and extension; "main.jpg".
Keep in mind this is a basic explanation
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 am new to mvc application and creating site in aspx view engine.
i have a css file in mycss/style.css and images are in images/img1.jpg.
what is the difference between
background: url("../images/img1.jpg") no-repeat;
and background: url("~/images/img1.jpg") no-repeat;
in style.css
background: url("../images/img1.jpg") no-repeat;
The above is relative to the current location. It goes up one folder, then down to the images folder and finally gets the picture file.
background: url("~/images/img1.jpg") no-repeat;
The above is invalid. The tilde means start at the site root. But CSS doesn't support that syntax. The equivalent would be background: url("/images/img1.jpg") no-repeat;.
Depending on your site layout, both will work. I tend to use root relative paths because if you move your CSS file to a different folder it might break with a path relative to the current location.
For a good discussion of relative vs site relative vs absolute, see this article.
You can also write it this way background: url("images/img1.jpg") no-repeat;
without any 'prefix' which means 'the images in the images folder.
This would be the correct way.
background: url("../images/img1.jpg") no-repeat;