Okay here's my file structure:
+WWW
index.html
style.css
map.jpg
CSS:
body {
background: #000 url('map.jpg') repeat/repeat-x/repeat-y/no-repeat scroll/fixed top/center/bottom/x-%/x-pos left/center/right/y-%/y-pos;
}
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
</body>
</html>
PROBLEM: map.jpg does not display in any browser (Firefox, Safari) Or TextMate Preview!
You have two issues here, first is your CSS being off, it shouldn't have that laundry list of options for each argument left in there:
body {
background: #000 url('map.jpg');
}
Then your <body> doesn't have any content, so it has no dimensions, you'll need to put something in there to see much if any of the image, otherwise the <body> element's height is going to be very small if not 0, depending on the browser.
Try adding overflow:hidden;. This worked for me.
body {
background: #000 url('map.jpg') no-repeat top left;
}
The example you used showed all possible option values.
That doesn't look like valid CSS, did you forget to remove the sections you didn't need?
Try something like this:
body {
background:#000 url('map.jpg');
}
I was working on wamp... and it works fine with relative url.
body{
background:url(../image/circle.png) no-repeat;
}
This should definitely work.
Try getting rid of all the extra junk in your css:
body {
background: #000 url('map.jpg');
}
Make sure the image is in the same folder that your css file is in.
Related
I'm trying to add a background color to my header but it's not adding it when i have it written in the css file.
HTML Code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="CSSPage.css">
</head>
<!--
<style media="screen">
#background-color {
background-color: hsl(120, 1%, 79%);
padding-top: 20px;
padding-bottom: 20px;
}
</style>
-->
<header id="background-color">
<hr>
<p>Sample</p>
<hr>
</header>
</html>
CSS Code: CSSPage.css
#background-color {
background-color: hsl(120, 1%, 79%);
padding-top: 20px;
padding-bottom: 20px;
}
It only works when it's on HTML but not when it's on the css file.
I've also tried adding !important but it didn't do anything.
The rest of the styles for other id works except this one.
Just change style class(#background-color{...}) as well as id to some other name if possible (other than background-color) and try.
I'm an idiot. Apparently the CSS file doesn't get applied even if you add new things to it if you don't manually save. I'm sorry for wasting everyone's time. It works now. Thank you for pointing me into JsFiddle's direction. Since it worked perfectly there.
I have the code bellow in the html file and the problem is the background picture is not showing, nor when I try doing it from the css file. Can somebody help me out what am I doing wrong? Thanks in advance!
<head>
<style>
body{
background-image: url("trees.jpg");
}
</style>
</head>
try using !important
<head>
<style>
body{
background-image: url("trees.jpg") !important;
}
</style>
</head>
First of all you need to set height of your body if their is no-content in the body then the image will not show
secondly, this code will only work if your html file and image are both in same folder
<head>
<style>
body{
background-image: url("trees.jpg");
}
</style>
</head>
if the image is in say img folder then you need to do this
body{
background-image: url("img/trees.jpg");
}
but if the img folder is not in the same directory as html but is in it's parent directory. you need to do this
body{
background-image: url("../img/trees.jpg");
}
Most likely it can't find the file destination, try to check if you typed the file name right, even the file extension. Sometimes is the file extension in uppercase, like ".JPG".
I have simple code with a text inside body tag for html and one css stylesheet just to have a background image, and I am not sure why background image doesn't show up at all.
Here's my html:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
Test
</body>
</html>
and the CSS is just this :
#body {
background-image: url(images/ninja.jpg);
}
I have "ninja.jpg" inside the images folder. and still background image doesn't show up. I have tried putting images/ninja.jpg within quotes as well(ie: "images/ninja.jpg") but it doesn't work.
Don't use #body
Use bodytry
body { background-image: url(images/ninja.jpg); }
for css
#body refers to the element with attribute id="body"
body {background-color: green;} /*this is the actual body*/
#body{background-color: red;} /*this is the paragraph*/
This is green
<p id="body">This is red</p>
no # required to html tag selectors:
body { background-image: url(images/ninja.jpg); }
You are using a # hash it not needed until you are work with element id for css
Just remove # and it work.
body {
background-image: url(images/ninja.jpg);
}
body is not an ID...we use # for only id selectors,
body is just a tag,
so you can simply use below...it works fine
body { background-image: url(images/ninja.jpg); }
Something weird is happening.
I've a basic html code. html, head, body.
(As I've received some negative votes, here's the full code)
<html>
<head>
</head>
<body>
</body>
</html>
This is my css:
html {
background-image: url(background.png);
background-repeat: repeat;
margin-top:-8px;
}
body {
background-image: url(telefonillo.png);
background-repeat:no-repeat;
}
This is what chrome and firefox shows:
How can I fix this?
I tried to "Inspect" with firefox, and tried to remove the "background.png" from HTML, then the "telefonillo.png" shows up.
Tried "z-index:1" on body, but isn't working, as it isn't content at all.
Edit: I also tried removing all the divs, and other css, incase there was some kind of problems between any rules, but it's still happening.
Why don't you use before like this
body:before {
content:"";
background:url(background.png) no-repeat top left;
width:100%;
height:100%;
}
body {
background:url(telefonillo.png) no-repeat top left;
width:100%;
height:100%;
}
Perhaps you need to add the following tags inside the head of the html document:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Anyway, this has helped me with weird issues like this in the past. I hope it helps someone out there!
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" />