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;
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);
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..
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 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);