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.
:-))))
Related
So I would like to have the background of the body be one gif that fills the entire thing. It won't show up.
<style type="text/css">
body{
width:100vw;
height:100vh;
background-image: url("The More You Know1.gif");
background-size: cover;
}
</style>
Spaces don't work in the title of assets. Replace all spaces in the image name with %20 in your CSS, or change the file name to feature underscores or hyphens in the place of each space.
Fix #1
background-image: url("The%20More%20You%20Know1.gif");
Fix #2
Change the file name to TheMoreYouKnow.gif and update your CSS accordingly.
If the file still doesn't load, check your file structure to make sure that your GIF is located in the same directory as your index.html file. If it isn't, you need to navigate to it in your css like this:
background-image: url("/images/The%20More%20You%20Know1.gif");
I have tried looking up several ways to make my specific image the background of a webpage, but it hasn't worked.
I tried
<style>
body {
background-image: url("ice_dna.jpg");
background-repeat: no-repeat;
}
</style>
to no avail. I even tried
<body background="File:Ice-Binding-DNA--.jpeg">
<p><a href="http://*LINK*"</a></p>
</body>
But this just made the background into a link to the image... I tried making the background just the link, but that didn't work either. The only way I can display the image is as img src="...". Is there a way to make that image source into the background?
If you can display the image using <img src="...">, then there shouldn't be anything wrong with the image itself. Your CSS also looks good to me. Indeed, it works just fine in a snippet like this:
body {
background-image: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png");
background-repeat: no-repeat;
}
Since you say that you're using an inline <style> element for your CSS, the problem can't even be caused by relative URLs (which, in an external style sheet, would get resolved relative to the location of the style sheet rather than the location of the HTML page).
Thus, I'm forced to conclude that your problem cannot be reproduced as described, and must be caused by something that you have not described in your question. I have therefore voted to close your question, as any answers to it at this point would have to be pure guesswork.
Ps. This really should have been a comment, but one can't include snippets in a comment. I've instead marked this answer as Community Wiki, so that I won't get any rep from up/down votes to it.
You would need to make the page itself "full height". By default, it has no height. And then you should be able to apply your background:
body, html {
height: 100%;
}
body {
background-image: url("img_girl.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
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..
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/...
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