38 users online (1 members and 37 guests)  


  Results 1 to 3 of 3

Related

  1. Replies: 3
  2. background image    Forum: HTML Forum
    Replies: 9
  3. td background image    Forum: CSS Forum
    Replies: 3
  4. Background image    Forum: HTML Forum
    Replies: 4
  5. Can't get image to set as background    Forum: HTML Forum
    Replies: 4
  1. #1
    p_arulraj's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2008
    Posts
    1

    DIV with image as background

    Hi,


    I am working on the conversion html code to another html file.

    Example: source.htm file may have any html element. This file need to be parsed by javascript and i need to create another file using <div> and <span>. Here i m getting the following problem.

    If we have the <img> element from source.htm, this will be transformed to <div> with style attribute has background-image URL.

    Code sample:
    From the source.html

    <DIV style="border:1px solid red;width:200px;">
    <img src=../images/test.gif" align="right"/>
    <p>asdjalsjdasjldjas djasldjas djalsjd asjdjalsdjla jdljalsdj lasjdlajldkj asljdlajsldj asldjasjdl</p>
    </DIV>

    Generated HTML file:

    <DIV style=";position:absolute;left:10;top:15;height:78px;width:200px;margin:auto;padding:0px;background-color:transparent;font-size:12pt;text-align:left;padding-top:0px;padding-left:0px;color:#000000;font-family:Times New Roman;padding-right:0px;font-weight:400;font-style:normal;padding-bottom:0px;">
    <DIV style="position:absolute;left:145;top:0;;background-image:url( ../images/test.gif);width:50px;height:51px;background-position:top; background-repeat : no-repeat;">
    </DIV><SPAN style="background-color:transparent;font-size:12pt;text-align:left;color:#000000;font-family:Times New Roman;font-weight:400;font-style:normal;"></SPAN>
    <DIV style=";position:absolute;left:0;top:0;height:76px;width:198px;margin:auto;padding:0px;background-color:transparent;font-size:12pt;text-align:left;padding-top:0px;padding-left:0px;color:#000000;font-family:Times New Roman;padding-right:0px;font-weight:400;font-style:normal;padding-bottom:0px;"><SPAN style="background-color:transparent;font-size:12pt;text-align:left;color:#000000;font-family:Times New Roman;font-weight:400;font-style:normal;">asdjalsjdasjldjas djasldjas djalsjd asjdjalsdjla jdljalsdj lasjdlajldkj asljdlajsldj asldjasjdl</SPAN>
    </DIV>
    </DIV>

    When we use the image source as div background-image then text overlaps with the image.

    I need source and generated html output view from the browser should be same.

    Is there any other way to solve this problem?

    thanks
    Raj

  2. #2
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel

    Re: DIV with image as background

    moved to CSS Forum
    AHFBWEB Less customers per server, more power for you!

    Business Class Shared Hosting

  3. #3
    stefradu's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2008
    Posts
    2

    Re: DIV with image as background

    The container for that <div> should have style="position:relative", if not, the container will be the <body>.



Tags for this Thread