dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: different background image

  1. #1
    Join Date
    May 2003
    Posts
    3

    different background image

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

  2. #2
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    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.

  3. #3
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    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="style.css" rel="stylesheet" type="text/css">
    <body style="background-image:url(someImage.png)">
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  4. #4
    Join Date
    Apr 2003
    Location
    London, UK
    Posts
    95
    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);
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles