Folder StrucThis is so simple, but nothing is working for me. I am trying to have a background of a local picture I own. I have read a bunch of other sites, and no one is consistent. I have tried every combo of ../ or ./ or file/// or someone even said web/port_back. Half include "" within the () and half don't. Tried every combo with that. Cleared my cache data constantly just in case that has affected it.
My Image is located /Portfolio/port_back.JPG and
My css is located /Portfolio/static/index_app/index.css
CSS:
body {
background-image: url("../../port_back.jpg");
/* background-repeat: no-repeat; */
background-size: cover;
}
You should go 3 folders back, try:
background-image: url("../../../port_back.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 have a simple project which has a product page. A splash (full width, fixed height div) will display a background-image which will change depending on the department.
I created the splash <div> using the following CSS class in my custom.css file.
.page-splash {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
padding: 180px 50px;
height:600px;
}
I have then moved a step further to create a separate class for each of the background images I would like to use.
.splash-chocolate {
background-image: url("abc.jpg");
}
.splash-vegetables {
background-image: url("123.jpg");
}
I call the classess in my html file as shown in the next piece of code below and this is where the fault begins. It causes my page to crash when loading.
Have I taken the wrong approach? or have I made a syntax error that I have overlooked? (image file / department names e.g chocolate have been simplified for the question).
<div class="page-splash splash-chocolate"></div>
All help greatly appreciated as always!
Edit - thanks to linus for correction:
Check to make sure you have the correct url path to the image. It could be trying to pull the image but is unable to find it
CSS background-image property not loading
If your css classes are in separate folders, you may need to specify in your url property the path to the correct folder.
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;