Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2002
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to make background gifs look good in all browsers and resolutions?

    I worked very hard on the background gifs for the various parts of my web page. Now they look good using Internet Explorer at 1024 x 768 resolution. However, when I test my page on Firefox or Netscape, the backgound gifs are all messed up - such as starting to repeat at the bottom or right side of the table that is holding them. The same happens when I change the resolution to 800 x 600. How do I get the background gifs to look the same for all browsers and resolutions???

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,876
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    Without seeing your problem we canít help you in a million years. We arenít psychic, you know? A link to your page is mandatory.

  • #3
    New Coder
    Join Date
    Jul 2002
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Here is the link for this problem:

    Here is the link for this problem:

    http://www.jewishuniverse.net/video_...ndQuestion.htm


    Thanks in advance.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,876
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    OK, thatís better.
    Well, it seems there are two problems:
    1. You have fixed size ("static") background images that canít adapt to the amount/size of content while also having a flexible, liquid HTML layout. You need to abandon one practice. Either make the page layout fixed or cut the images so they will adapt to the changing sizes. The first option is probably the easier one.
    2. Background images repeat themselves automatically and you didnít tell them to not repeat. With CSS you would write background-repeat: no-repeat;


    I can promise that it will be a PITA to edit this site. If you were using semantic HTML and CSS to style it it would reduce your code and make it much easier to fix errors.
    Last edited by VIPStephan; 07-16-2007 at 02:37 PM.

  • #5
    New Coder
    Join Date
    Jul 2002
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

    fixed page layout

    Please explain what you mean by making the page layout fixed.

    What would be the full statement for:background-repeat: no-repeat;
    Is that only once at the beginning of the html or for every backgound gif?

    Thanks.

  • #6
    New Coder
    Join Date
    Dec 2006
    Posts
    80
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Tess,

    In between the <HEAD> and </HEAD> tags you could write:

    Code:
     
    <STYLE type = "text/css">
     
    img
    {
    background-repeat:no-repeat;
    }
    </STYLE>
    This means that any HTML image element will have the above style applied to it when the document loads. If you wanted to exclude an image(s) from this treatment, there are a couple of ways. One way would be to give the image an ID and reference it that way.

    HTML:
    Code:
    <img id = "excludeThisImage" src = "myImg.gif">
    CSS:
    Code:
     
    <STYLE type = "text/css">
     
    #excludeThisImage
    {
    background-repeat:no-repeat;
    }
    If you wanted to exclude several images (rather than just one) from the above treatment then you would use classes. Like so:

    HTML:

    Code:
     
    <img class = "excludeImagesWithThisClass" src = "1.jpg">
    <img class = "excludeImagesWithThisClass" src = "2.jpg">
    <img class = "excludeImagesWithThisClass" src = "3.jpg">
    CSS:

    Code:
     
    <STYLE type = "text/css">
    .excludeImagesWithThisClass
    {
    background-repeat:no-repeat;
    }
    </STYLE>

    The # defines an ID, the dot defines a class.

    HTH
    Joe
    http://www.Kanotix.com --My OS of choice, the best hardware detection on the planet!-
    http://distrowatch.com -Linux is the future-
    http://www.packetstormsecurity.org -Security Gurus-

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,876
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    The only flaw with the above statement being that HTML <img> elements and CSS background properties donít have anything to do with each other.

    What you need to write in order to make the background images non-tiling images is:
    Code:
    <style type="text/css">
    table, td {background-repeat: no-repeat;}
    </style>
    What I meant by suggesting to make the page layout fixed is that the colums, or rather the entire page, should have a fixed width that it doesnít stretch on resizing the browser window but rather stays in the dimensions of the background images. Maybe it helps already if you gave your outermost table a specific width in pixels rather than percent.

  • #8
    New Coder
    Join Date
    Jul 2002
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks for your help

    Thank you,VIPStephan and LFCFan, for your help. I will try out your suggestions.


  •  

    Posting Permissions

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