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;
}
Related
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 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..
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.
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;