Hi I have been stuck for a good amount of time with what I believe is a file path issue. I am creating a simple layout with a background image, the background image loaded as a http url but once I saved the file to my computer and altered the image I cannot get it to load. the file structure is as follows :
new project/css/images/index.html
the code:
header {
height: 450px;
background-image: url('../images/bg_blur.png'), center, center;
background-size: cover
}
I have run into the same issue with my logo image as well.
<div class="logo">
<img src="images/icon.svg">
</div>
As a novice, I have spent over a day trouble shooting this issue double and triple checking my paths, trying different methods. I have read multiple stack overflow answers and still cannot figure this out, I apologize for re-posting but I am at a loss.
Thanks,
Dave
If the file is in the exact same path then make sure that the filename of the images is exactly the same as well.
The background-image property enables you to provide an image for the
background,
it accepts only uri() / none values, you can't specified several values.
Instead try to use background shorthand property like this:
header {
background: url(../images/bg_blur.png) center center;
}
background shorthand property can accepts several values
<’background-color’> || <’background-image’> || <’backgroundrepeat’>
|| <’background-attachment’> || <’background-position’>
Initial value: n/a
the values should be separated by white spaces .
I agree with what Konrud said but also, you're missing a semicolon on the end of the final CSS rule you put, the background-size one.
background-size: cover should be background-size: cover;
Related
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 know it's repetitious question but I have problem with my code.
I have searched stackoverflow and w3schools for a background image setting
and wrote the code that was on both sites exactly but still I have problem with the following code.
body {
background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg");
}
or
body{ background-image: url("Male-Fitness-Models-BAck.jpg"); }
above are the codes I used for setting background, but neither of them work.
HTML picture
If the background image file location is correct you might need to add a height and width to the container of the background image.
body {
height: 500px;
width: 500px;
background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg");
}
There are a few things to investigate to ensure it always works:
1) Using the project absolute path:
ensure you have FollowSymLinks in your vhosts enabled, that way you can use / in the src to call the image.
e.g. <img src="/images/dog.png" />
2) Make sure the image exists
copy and paste the src that's displayed in the browser (inspect with firebug, or view-page source to get the link) into the url bar and see what it returns - if it's a 404 then it doesn't exist on the path you gave, if it's 403 the path might be set to really strict permissions (755 on directories and 644 for files is recommended) and you might have to tweak your vhosts file to allow people to view the content, but not access the file tree.
3) If the image does exist, there is no message (other than 200) and you're using the path correctly - then it's probably because the div is empty. A background on a div with no content will result in empty space, because the background is stretching itself over 0 pixels. Add a min-height and min-width rule to your css or use inside the div:
CSS:
div {
background: url('/images/dog.png');
min-height: 50px;
min-width: 50px;
}
HTML:
<div> </div>
4) Use a proper folder structure
by using a file tree that makes sense, it makes resources easier to manage.
Hosting every file in the DOCUMENT_ROOT is messy, I'd recommend the below structure:
|--index.html
|----images/
|----css/
|----js/
that's a basic structure, then you can add more folders based on area e.g.
|--index.html
|----[area]/
|----images/
|----css/
|----js/
body
{
background : cover;
background: url("http://quizdoo.com/wp-content/uploads/qc-images/58d2957b47354.jpg");
}
<body>
</body>
Add background size to make it visible
body
{
background: cover;
background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg");
}
If you are using a PC saved image path make sure to replace the \ with / and it will work.
example:
background-image:url("C:/Users/foldername/Desktop/images/City_Landscape_Background.jpg");
I've been trying to apply a simple background image to a div. It seems like such a simple problem but after hours of searching through many threads on Stack and other sources, and trying many of the solutions, i'm still looking at an empty div.
I've verified that the asterisk.png file exists and renders when called by itself from an tag.
Here is the HTML
<div class="element"></div>
Here is the CSS
.element{
background-image: url('images/asterisk.png');
background-repeat: repeat-x;
width: 400px;
height: 50px;
}
Im hoping someone can point out the simple error I'm making here ... Thanks!
It should work, check in inspector if any other styles are not added to this element.
Something may make your element display: inline in this case, yes BG will be not visible, change it to display block or inline-block
Fixed it. I was incorrectly linking to the image file. 'images/asterisk.png' vs '../images/asterisk.png'.
My apologies ... I guess I had been staring at the screen for way too long and just needed to rest!
Thanks everyone.
I got issue with background image on my webpage (won't show). I tried to place it in different <div>s but I cannot find solution, how to solve it. Also I tried to find solution here, but nothing worked for me. I don't have written long path to image, because all is in one folder. Also I know, I have it little chaotic.
I don't want to repair my wrongs, but just want to know how I can solve it and why it not work.
Here is my HTML source
And here is my CSS source
Place the URL within quotes, within the CSS file in the background property of the CSS file. url(limo.jpg) should instead be url("limo.jpg")
Depends what browser you're on. Try putting limo.jpg in quotation marks and adjusting to background-image:
body {
margin:0;
padding:0;
line-height: 1.5em;
background-image: url("limo.jpg") no-repeat center fixed;
background-size: cover;
}
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.