View Full Version : CSS Backgrounds
nebsta
February 2nd, 2005, 05:25 PM
I have a separate CSS file that declares the background as follows:
body {
background-transparency: 20%;
background-image: "seaside.jpg";
background-style: "image stretch";
}
How do I then use this on a HTML page? I have used the following code to use other features of the CSS (such as the <h1> tag):
<link rel="Stylesheet" href="stylesheet.css" type"text/css" media="screen">
Do I need to put anything in the HTML file to use the background stated in the CSS file?
degsy
February 2nd, 2005, 06:10 PM
Hi,
Where did you get the code from?
There isn't a background-transparency or background-style attribute in CSS2
nebsta
February 2nd, 2005, 08:31 PM
Oh yes, I picked that up from a website but ive just read it and its wrong. So is there any way to make a background picture stretch (instead of tiling the picture) also is there any way to make the picture slightly transparent to make text stand out?
When those two lines are deleted from the CSS, the background still does not show on the HTML page, should it?
rockboy
February 2nd, 2005, 10:13 PM
You'll want to write the css like this:
background-image: url(seaside.jpg);
If the image is in a different directory than the html file then you'll need a path to it that includes the file name. Possibly something like this:
background-image: url(images/seaside.jpg);
There are a number of things you can do to control a background image, they're listed in any CSS reference. There's a good one at http://www.w3schools.com/css/default.asp
You can find out how to keep the image from tiling and also how to position it.
If you want to adjust the background image intensity, color, size, etc. then you'll need to do that in a graphics program like Photoshop, Paint Shop Pro, IrfanView, etc. Sounds like you want to resize larger and maybe reduce the saturation, contrast, adjust gamma, etc. That's a whole different subject though.
Drum2jc
February 3rd, 2005, 02:08 AM
as far as i know, you cannot stretch images in html or css. and about transparency, it's not a very reliable code/tag, and usually only works in internet explorer...
just use photoshop/paintshop or something to lower the opacity
like rockboy suggested