i am trying to have a background image that do not repeat and is always at the bottom left of the screen. i am able to do this using css but i have a small problem. i need to change the background image for different pages. is there anyway to do this all in 1 css or do i have to create a css for each page.
is it possible to do the same thing, background image that do not repeat and is always at the bottom left of the screen, using just html?
below is a segment of my css code
body{
BACKGROUND-IMAGE: url(images\bg.jpg);
BACKGROUND-POSITION: bottom left;
BACKGROUND-REPEAT: no-repeat;
}using just html?
Not really. You can put a bgimage in bottom-left table cell, but that image will be bottom-left with respect to the table and not the viewport.
is always at the bottom left
You will require "background-attachment: fixed" to keep it fixed.
i need to change the background image for different pages
You can use same common css file. Then, in each html page, add
<script type="text/css">body{background-image('img.gif')}</style>
Or have a javascript (external .js?) that reads the name of the html file, and accordingly document.writes the above-mentioned line.Originally posted by nkaisare
You can use same common css file. Then, in each html page, add
<script type="text/css">body{background-image('img.gif')}</style>
Or have a javascript (external .js?) that reads the name of the html file, and accordingly document.writes the above-mentioned line. That should be a STYLE element and not SCRIPT. And that's the most common typo that I make. Or you can use an inline style.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta content="text/css" name="Content-Style-Type">
<title>Style Example</title>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"style.css" rel="stylesheet" type="text/css">
<body style="background-image:url(someImage.png)">Or add a unique id to the body tag on each page:
body{
BACKGROUND-POSITION: bottom left;
BACKGROUND-REPEAT: no-repeat;
}
body#home {
BACKGROUND-IMAGE: url(images\bg1.jpg);
}
body#site-index {
BACKGROUND-IMAGE: url(images\bg2.jpg);
}
is it possible to do the same thing, background image that do not repeat and is always at the bottom left of the screen, using just html?
below is a segment of my css code
body{
BACKGROUND-IMAGE: url(images\bg.jpg);
BACKGROUND-POSITION: bottom left;
BACKGROUND-REPEAT: no-repeat;
}using just html?
Not really. You can put a bgimage in bottom-left table cell, but that image will be bottom-left with respect to the table and not the viewport.
is always at the bottom left
You will require "background-attachment: fixed" to keep it fixed.
i need to change the background image for different pages
You can use same common css file. Then, in each html page, add
<script type="text/css">body{background-image('img.gif')}</style>
Or have a javascript (external .js?) that reads the name of the html file, and accordingly document.writes the above-mentioned line.Originally posted by nkaisare
You can use same common css file. Then, in each html page, add
<script type="text/css">body{background-image('img.gif')}</style>
Or have a javascript (external .js?) that reads the name of the html file, and accordingly document.writes the above-mentioned line. That should be a STYLE element and not SCRIPT. And that's the most common typo that I make. Or you can use an inline style.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta content="text/css" name="Content-Style-Type">
<title>Style Example</title>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"style.css" rel="stylesheet" type="text/css">
<body style="background-image:url(someImage.png)">Or add a unique id to the body tag on each page:
body{
BACKGROUND-POSITION: bottom left;
BACKGROUND-REPEAT: no-repeat;
}
body#home {
BACKGROUND-IMAGE: url(images\bg1.jpg);
}
body#site-index {
BACKGROUND-IMAGE: url(images\bg2.jpg);
}