This question already has answers here:
background-image css not working
(5 answers)
CSS Background Image Not Displaying
(20 answers)
Closed 3 years ago.
I've been trying to put an image as background, but for some reason, it doesn't work.
Below you will find my HTML and CSS. The name of the image is Background and its size is 1280*720.
The HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body >
<header>
</header>
<footer></footer>
</body>
</html>
The CSS:
body {
background: url("C:\Users\pro tech\Desktop\site web\Nouveau dossier: background.jpeg") no-repeat;
background-size: cover;
}
The image url should be relative to your css file and not your desktop. Or in your case relative to the html file because you have inline css.
The url is way off.
It should be something like...
background: url("/images/background.jpeg")
The url of the background image needs to begin where that CSS file is located. If you need to go back a folder, you use ../, which leads me to my next thing: make sure you are using forward slashes and not back slashes.
Example: If you have your CSS file on your desktop right now, your path would look like this:
url("site%20web/Nouveau%20dossier/background.jpeg");
maybe because there is blank space on the url link?
try to replace the blank url with %20
body {
background: url("C:\Users\pro%20tech\Desktop\site%20web\Nouveau dossier\background.jpeg") no-repeat;
background-size: cover;
}
or just remove the detail URL, and just use image file name if the image is in the same folder as html and css
body {
background: url("background.jpeg") no-repeat;
background-size: cover;
}
Put the image in the same folder where you have your index and Css and then add the css with the new location of the file:
for exemple:
body {
background : URL("./image.jpeg") no-repeat;
}
You need to add some height or content to the body. for now height is 0px so background image is not showing
Related
I know there are similar questions but they don't exactly answer my problem. Am trying something really simple, turning a background image into a link, am following a tutorial and he did it easily so i tried it but it just didn't work, the image just doesn't show, i did all my checks from the tutorial but it just doesn't work for me.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="s017.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>
<body>
<h1>CSS</h1>
</body>
</html>
body{
font-family: open-sans, sans-serif;
}
#fb/*, #tw, #sc, #in, #ig, #wa*/{
height: 60px;
width: 60px;
display: block;
position: absolute;
}
#fb {
background-image: url('image03.png');
background-position: 0px 0px;
}
as for the result:
as you can see there is nothing in there other than the title
i taught it was the browser but i tried it with Mozilla and Chrome with same result.
If you are trying to use this as thumbnails, I recommend just using images instead of trying to set background images. When you are setting the background image, it isn't resizing the image, but showing a small 60x60px section of the image in the background. If the top left corner is white, that's what you are seeing. Instead of background image, try this:
<a href="https://www.facebook.com">
<img id="fb" src="http://blog.addthiscdn.com/wp-content/uploads/2015/11/logo-facebook.png">
</a>
Here's a working codepen showing what I believe you are looking for. If this isn't exactly it, or there's a reason specifically you must use background image, let me know and i'll update my answer to reflect.
At first please be sure that your link for CSS file is working , As you know you should put your Style codes in s017.css file that is in your html file folder.
Probably your image size is big and didnt fit in your 60*60 (a) tag block or your image have a white space in left top position that you intered.For the first you can use background-size in css for " #fb " :
background-size:contain;
and for the 2nd probability you should crop your image with paint or other image editors.Of course,you can set the position in center of image but this is not recommended.
I hope this work for you!
Have fun !!
I want to set my background styling in a css stylesheet, but want to select the background image in the html file. Whilst the style is going to be same across the website, the image needs to be different on each page.
Example of code:
==== CSS ====
body {
backgound-position: center;
background-repeat: no-repeat;
background-size:1200px 800px;
background-position-x: center;
background-position-y: 50px;
}
==== HTML ====
<html>
<head>
<link href="../css/custom.css" rel="stylesheet">
</head>
<body style="background:url('../img/Car.jpg');">
</body>
</html>
This does not seem to work. The styling in CSS is being ignored. Please note that the paths are correct, as all other elements work...
Also, I'm using a Bootstrap template.
Please help!
Thank you
D.
You wrote background:url('../img/Car.jpg'); using only background: will set EVERY background property. Simply change background:url(); with background-image:url(); :)
This question already has answers here:
background-image in <div>-tag not showing up
(3 answers)
Closed 8 years ago.
I would like to insert an image through my CSS style sheet rather than having a link in the HTML.
CSS code:
#bar {
width: 100%;
height: 500px;
background: #000 url(/Users/Macbook/Desktop/test website/bar.png) center no-repeat;
background-size: auto 200%;
}
HTML5 code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="Untitled-3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="bar">
</div>
</body>
</html>
The problem is that when I view this in my browser, I see nothing, just a blank page.
Can you see any problem in my code, or is there an alternative solution?
Change
background: #000 url(/Users/Macbook/Desktop/test website/bar.png) center no-repeat;
to
background: #000 url("/Users/Macbook/Desktop/test website/bar.png") center no-repeat;
And as an aside, in HTML5 you can omit the type="text/css" from your link tag.
You should just create a folder for your test site, lets say mysite, then add an images folder and a css folder to it. Then add your images and css files to their respective folders.
Your folder structure would look like this:
/mysite
/images
/css
index.html
Then you would link to your images like so:
background: url(../images/bar.png) center no-repeat;
This is generally how a website directory should be organized, so if your making a test site you might as well get in the habit of organizing it this way. And also avoid spaces in you folder and file names.
When I put this code in my html file, it is working without issue:
<style type="text/css" media="screen">
#headerimg
{
display: block;
background-image: url('/Content/images/epp/ebweblogo1.gif');
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:100%;
margin: 0;
padding: 0;
}
</style>
but when I move it to my css file as this:
#headerimg
{
display: block;
background-image: url('/Content/images/epp/ebweblogo1.gif');
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:100%;
margin: 0;
padding: 0;
}
This is my html:
</head>
<body>
<div class="page">
<div id="header">
<div id="headerimg" />
I am assuming it's due to the image location but I'm not sure since I've tried variations of the path and never got it to work.
Any suggestions?
EDIT
Sorry, you can't read my mind, I know.
When I place the css in the html file, the image displays fine. When I move it to the css file (site.css) it is not displaying at all. I've tried several different paths and it isn't being displayed no matter what I put in there.
UPDATE #2
When I change my html to this:
<div class="page">
<div id="header">
<div id="headerimg">test</div>
I am getting the image behind the text as 1 line that says test but not the full size of the image.
So it is apparently not displaying the image due to the size of the div? I changed the css to this:
height:130px;
but that did not change the height at all.
The two bits of CSS are not equivalent.
In one, you have #headerimg (id selector) which is a very different selector to .headerimg (class selector).
#imgplacement is also missing from the second sample.
As for the image issue - you need to ensure the correct path to the image directory.
This will be relative to where the CSS is - if in a CSS file, the image needs to be relative to the CSS file. If it is embedded in the HTML, it needs to be relative to the HTML file.
Since the path is rooted (starts with /), it should work everywhere. Use the developer tools to determine where it is looking for the image.
Include your css like this on the home page:
<link rel="stylesheet" type="text/css" href="route_to_your_style.css" media="all" />
And then be careful on routes for your image.
include the CSS file between the <head></head> section of your HTML like this:
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/css/cssfile.css" />
I'm new to HTML and CSS in general. Please help me with the code. I cannot get the background-image to appear in my browser although i typed the syntax correctly. All i get is an orange box, with no alert.png image. I'm following an online tutorial btw: http://dev.opera.com/articles/view/31-css-background-images/#thecode
Edit 1: The image, html file and css file are all inside the same folder. Yet no success.
Edit 2: I used an unique css file name instead of a generic "style.css" (which i have several of them in my system) and it worked! Make sure there's no space between url and the parenthesis.
HTMl code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>alert message</title>
</head>
<body>
<p class="alert">
<strong>Alert!</strong>
This is an alert message.
</p>
</body>
</html>
CSS code:
.alert {
width: 20em;
background-image: url(C:\Documents and Settings\USER\My Documents\alert.png);
background-color:orange;
margin: auto;
padding: 2em;
}
The url must be a string:
url("C:\Documents and Settings\USER\My Documents\alert.png");
I would guess it's a permissions issue, regardless you will most likely have problems with the URL being a file reference when you move this to a server, I would recommend moving your image into the same location (or better yet an image folder in the root of your site) as your html file and then modify your css to be this
.alert {
width: 20em;
background-image: url('/alert.png'); /* '/images/alert.png' */
background-color:orange;
margin: auto;
padding: 2em;
}
Another way of doing things is to put your text into a div, and set the image as the div's background image using css, like so:
<div class="alert">
<p>
<strong>Alert!</strong>
This is an alert message.
</p>
</div>
And, for the CSS:
.alert {
width: 20em; (Width of entire div, which includes text and bg image)
background-image: url('../alert.png');
background-color: orange;
margin: auto;
padding: 2em;
}
You can see the live JSFiddle example here: http://jsfiddle.net/Cwca22/TdDJY/
Also, in the code above, the background image will tile (repeat) both horizontally and vertically to fill the space of the div. In order to prevent this, you could make the div the same height and width as your background image, or put background-repeat: no-repeat in your css under the .alert class.
Hope this helps and good luck!
Please check your URL, if possible you can use firebug which is addon of firefox, which will definitely help you, by indicating if image has been loaded or not.
Else another solution would be give height to your alert class as follows
.alert {
width: 20em;
background-image: url('/alert.png'); /* '/images/alert.png' */
background-color:orange;
margin: auto;
padding: 2em;
height: /* height of image*/
}
First put your alert.png picture in the same folder as your html file.
Then try this in your CSS file:
body {
background: orange url("alert.png") no-repeat;
}
I think the problem was the "\" in \alert.png
Good luck!
In the original question he had in his css
background-image: url(C:\Documents and Settings\USER\My Documents\alert.png);
I ran into problems with a gallery page that had images as background thumbnails. Any image filename that had spaces would not appear. It was only the fact that one image happened to have underscores in place of spaces and that did appear that I was able to track it down. As there are spaces in his url, this could be the problem. I fixed my problem by using \ to escape any characters like spaces causing the problem. i.e.
A\ space\ in\ the\ filename.jpg
though this might not work in a Windows pathname!
If the image is in the same directory as the script he shouldn't need the full url anyway.