www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: background code that works in ALL browsers.

  1. #1
    Join Date
    Feb 2012
    Posts
    12

    Angry background code that works in ALL browsers.

    i need this code by wensday. so that i have enough time to actually get the code and get my site working.
    no i can not provide you links to the actual pages *they arent real yet
    they just live in a folder right now.
    i can not seem to find a GOOD working piece of code that works in all browsers.

    i have 1 image i want it to be the background with no repeating.

    when working on my mini laptop which has a 10 inch screen while using firefox the fallowing code works really great
    <body background="images/background.jpg" style="background-repeat:no-repeat; background-attachment:fixed">
    only problem is that i have about an inch of white space on right hand side of the screen.

    however when i test the code on a college computer whose screen is 24 inchs and i have to use IE on them the code does not work.
    the image shows up in the top left hand cornor. and the rest of the screen is white.

    so i was told to use the propertie background-image. it worked great as long as i had a super large image.

    <style type="text/css">
    body {
    background-image:url('images/titlepage3.jpg');
    }
    </style>

    worked great in ie on a large screen i test in on my laptop *where i do 95% of my work* and i only see a small fraction of the image. i need to be able to see the image 100% on both a large screen and a small screen, on both ie and firefox.
    i read online to use these

    <style type="text/css">
    body {
    background-image:url('images/titlepage3.jpg');
    background-repeat:no-repeat;
    background-position:bottom right;
    }
    </style>

    it didnt work i ended up with the image in the bottom right and alot of white space around it.

    -_- ive been trying to get this code to do this one simple thing for weeks now. i really need the images i have to be the background. i can not have any repeating of the image. the image needs to cover the whole page and needs to work in what ever browser im using at the minute on what ever size of screen im using.

    here is the code for one of the pages that i have not messed up with the background-image property.

    <html>

    <head>

    <title> Images of Illusion - images </title>

    </head>
    <body background="images/background.jpg" style="background-repeat:no-repeat; background-attachment:fixed" text="white "link="green" vlink="blue" alink="red">

    <br />

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a href="home.htm"> &nbsp; &nbsp; Home &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="images.htm"> Images &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="forms.htm"> Forms &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="register.htm"> Register &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="memberpages.htm"> Member Pages &nbsp;&nbsp;</a>

    <br />
    <table>

    <tr>
    <td align=center>Angles</td>
    <td align=center>Demons</td>
    <td align=center>Animals</td>
    </tr>
    <tr>
    <td><a href="angles.htm"><img src="images/angels/angles1.jpg" width="200" height="200"/> </td>
    <td><a href="demons.htm"><img src="images/demons/demon1.jpg" width="200" height="200"/> </td>
    <td><a href="animals.htm"><img src="images/animals/Animals1.jpg" width="200" height="200"/> </td>
    </tr>

    <br/>
    <tr>
    <td align=center>Magical</td>
    <td align=center>Royal</td>
    </tr>

    <tr>
    <td><a href="magical.htm"><img src="images/magical/Magical1.jpg" width="200" height="200"/> </td>
    <td><a href="royal.htm"><img src="images/royal/royal1.jpg" width="200" height="200"/> </td>
    </tr>
    </table>
    </body>
    </html>

    this code *other than the fact that it has a 1-2 inch bar of white on the right side* works perfectly on my laptop using firefox.

    this code works really good, except that the text is not centered, on IE, on the 24 inch screen college computer.

    <html>

    <head>

    <title> Images of Illusion </title>
    <style type="text/css">
    body {background-image:url('images/background5.jpg');}
    </style>
    </head>
    <body text="white "link="green" vlink="blue" alink="red">

    <br />

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a href="home.htm"> &nbsp; &nbsp; Home &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="images.htm"> Images &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="forms.htm"> Forms &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="register.htm"> Register &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="memberpages.htm"> Member Pages &nbsp;&nbsp;</a>

    <br />
    <p> <font size="5" color="red" face="Monotype Corsiva">
    <b>Again welcome to <i>Images of Illusion</i> we are a brand new site, so we
    <br/> dont have to much to offer you yet, but give us some time and we <br/> will start adding more. please register and than message the admin, <br/> if we do not have a catogory that you would like to have added.
    <br/> all so send any images you would like to add for review, as will as <br/> the information as to what catogory you would like it uploaded to.</b></font>
    </body>
    </html>

    however when i run the pages on the other one it doesnt work right.
    what other code is there that i can use to fix this problem?

  2. #2
    Join Date
    Feb 2012
    Posts
    12
    also im only allowed to use notepad/word pad, so only these programs please, no dream weaver, or something similer.

  3. #3
    Join Date
    Mar 2011
    Posts
    1,145
    Your example HTML code does not include a <!DOCTYPE> statement. It's vital to use a complete <!DOCTYPE> to set browsers to Standards Compliance Mode for page rendering. An improper or missing <!DOCTYPE> is a major cause of cross-browser issues, so if you aren't using one, you need to check it out. Search on "DOCTYPE switch" and you'll find some good advice. Good luck!
    Rick Trethewey
    Rainbo Design

  4. #4
    Join Date
    Feb 2012
    Posts
    12
    tried doctype, none of them work so doctypes dont fix my problem.
    my page looks 100&#37; the same in either browswer with or with out the doctype.

    doctype in code that does not change anything

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>

    <head>

    <title> Images of Illusion - images </title>

    </head>
    <body background="images/background.jpg" style="background-repeat:no-repeat; background-attachment:fixed" text="white "link="green" vlink="blue" alink="red">

    <br />

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a href="home.htm"> &nbsp; &nbsp; Home &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="images.htm"> Images &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="forms.htm"> Forms &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="register.htm"> Register &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="memberpages.htm"> Member Pages &nbsp;&nbsp;</a>

    <br />
    <table>

    <tr>
    <td align=center>Angles</td>
    <td align=center>Demons</td>
    <td align=center>Animals</td>
    </tr>
    <tr>
    <td><a href="angles.htm"><img src="images/angels/angles1.jpg" width="200" height="200"/> </td>
    <td><a href="demons.htm"><img src="images/demons/demon1.jpg" width="200" height="200"/> </td>
    <td><a href="animals.htm"><img src="images/animals/Animals1.jpg" width="200" height="200"/> </td>
    </tr>

    <br/>
    <tr>
    <td align=center>Magical</td>
    <td align=center>Royal</td>
    </tr>

    <tr>
    <td><a href="magical.htm"><img src="images/magical/Magical1.jpg" width="200" height="200"/> </td>
    <td><a href="royal.htm"><img src="images/royal/royal1.jpg" width="200" height="200"/> </td>
    </tr>
    </table>
    </body>
    </html>

    also tried it as

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>

    <head>

    <title> Images of Illusion - images </title>

    </head>
    <body background="images/background.jpg" style="background-repeat:no-repeat; background-attachment:fixed" text="white "link="green" vlink="blue" alink="red">

    <br />

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a href="home.htm"> &nbsp; &nbsp; Home &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="images.htm"> Images &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="forms.htm"> Forms &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="register.htm"> Register &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="memberpages.htm"> Member Pages &nbsp;&nbsp;</a>

    <br />
    <table>

    <tr>
    <td align=center>Angles</td>
    <td align=center>Demons</td>
    <td align=center>Animals</td>
    </tr>
    <tr>
    <td><a href="angles.htm"><img src="images/angels/angles1.jpg" width="200" height="200"/> </td>
    <td><a href="demons.htm"><img src="images/demons/demon1.jpg" width="200" height="200"/> </td>
    <td><a href="animals.htm"><img src="images/animals/Animals1.jpg" width="200" height="200"/> </td>
    </tr>

    <br/>
    <tr>
    <td align=center>Magical</td>
    <td align=center>Royal</td>
    </tr>

    <tr>
    <td><a href="magical.htm"><img src="images/magical/Magical1.jpg" width="200" height="200"/> </td>
    <td><a href="royal.htm"><img src="images/royal/royal1.jpg" width="200" height="200"/> </td>
    </tr>
    </table>
    </body>
    </html>

    there is no change i need code to fix this problem please

  5. #5
    Join Date
    Mar 2011
    Posts
    1,145
    That's an incomplete <!DOCTYPE> and it leaves the browser in Quirks Mode where it doesn't have to follow the standards and every browser will behave differently. To get consistent cross-browser compatibility, use:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    and stick to it. This will put all browsers in Standards Compliance Mode so that they're all at least *trying* to behave properly. Otherwise, you'll always be adding "fixes".
    Rick Trethewey
    Rainbo Design

  6. #6
    Join Date
    Feb 2012
    Posts
    12
    i am sorry but like i said i did use the <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    and it did nothing the pages they still worked in one browser and not the other one. so the doctype has done nothing to help me and even if i leave it there i still need code to fix my problem of the background images.

  7. #7
    Join Date
    Nov 2002
    Posts
    2,632
    Monitor size is irrelevant. A 10' and 24' monitor can have the same resolution.

    Also, look here for code.

    http://css-tricks.com/perfect-full-p...kground-image/

    You can also use CSS to clean up the rest of your code as well.

  8. #8
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266

    Mishmash

    What school are you attending? Do they offer tutoring help?

    You have a mishmash here: using OLD method of adding attributes to <BODY> tag and CSS inline style, etc.

    Note most HTML tags come in pairs. defining content between the opening <A href="page.html">... and closing </A>. You are not closing the all-important anchor tag </A> The image <img> tag is an "empty" tag that does not have a closing counterpart. In XHTML (based on XML), you need to add space slash <img src="pic.jpg" /> for "self-closure" of "empty" tags. You wrap the anchor <A href="page.html">around <img> tag </A>

    [Uppercase for emphasis only, type everything lowercase.]

    Your questions are more CSS than HTML. CSS (Cascading Style Sheets) can be (1) in an external text.css file and linked to <LINK REL="stylesheet" TYPE="text/css" HREF="path.css"> (LINK is an "empty" tag, with no closing counterpart); (2) embedded in file using HTML tags <STYLE TYPE="text/css" > selector { property:value; property2: value2;} </STYLE>,; or (3) added to element tag as an inline attribute <p STYLE="property:value; property2: value2;">...<p>. The more "specific" style rules (e.g., inline) override the less specific (e.g., external CSS file).

    You would do well to create an overall stylesheet, which could be embedded in <HEAD> of your document for easy reference. Use CSS background-image property (not OLD attribute in <BODY> tag) or background: shorthand to set the background iamge to your BODY element or your HTML element (with a transparent BODY element).

    Is the professor allowing use of deprecated <FONT>tags</FONT>?

    Dreamweaver is an editing tool. You can work in "Code" or "Split" view like a helpful Notepad text editor.
    Last edited by auntnini; 04-21-2012 at 04:17 PM. Reason: add color

  9. #9
    Join Date
    Feb 2012
    Posts
    12
    @spufi thank you for the reply about the monitor. i assumed that was a problem because of how the site showed up on my laptop and than how it showed up on the colleges desk top. but after reading that its irrelevant it makes me feel a bit better.

    @auntnini no they dont have tutoring here, i went to the professor for help and he sugested i try and use the background-image property, so i did and it was not working, he even checked my code and couldnt figure it out. thats when i came here. in class we are really only learning how to go about doing the old way of coding a website. using programs like dreamweaver sadly is not allowed. ive used it a bit with an other class though, and sometimes the code in dreamweaver was way more than what we had covered in class. so i think if i was to use dreamweaver to help edit my code he would be able to figure it out. and yes he is allowing the use of the font tags. thank you also for pointing out the lack of </a>'s i had to leave the <a href> in the menu bar

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a href="home.htm"> &nbsp; &nbsp; Home &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="images.htm"> Images &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="forms.htm"> Forms &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="register.htm"> Register &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="memberpages.htm"> Member Pages &nbsp;&nbsp;</a>

    with out the </a> other wise my menu bar would have brakes in it so when i went on to code in the images later i guess i was just use to the coding with out them that i forgot.

  10. #10
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    Well Dreamweaver isnt going to solve any problems for you. You need to learn how to do it by hand before you start using frameworks and other things. Anyone who strictly uses Dreamweaver design view is either too lazy to learn properly or went to a ****ty school and was taught improperly. Being stuck using proprietary software to make a website is not how its supposed to be done. Call it elitist but WYSIWYG editors are absolutely horrible and should never be used for any production environment. Yes Dreamweaver has a nice code editor but at least knowing the code you are not tied to it and screwed when you are not able to access it.

    Also use CSS to layout a site. Don't use &nbsp to do it for you. simple class with margin tag would solve that in a jiffy and be much more update-able in the future.
    ----------------------------------------------------------------------------------------------
    WYSIWYG editors will never beat my hand written code!!!! Learn to do it in notepad and learn how to actually control your website! Current Project http://www.jmcanineservices.com

  11. #11
    Join Date
    Feb 2012
    Posts
    12
    ok i fixed the </a>'s, added DOCTYPE *even though its done nothing so i find it a waste*, and i removed the code from the body and put it in a <style>

    so here is my code now. still cant seem to fix the style to where the image is the full background.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>

    <head>

    <title> Images of Illusion - images </title>

    <style tpye="text/css" >
    body
    {
    background-image:url('images/background.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:100&#37; 100%;

    }


    </style>





    </head>
    <body text="white "link="green" vlink="blue" alink="red">

    <br />

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a href="home.htm">

    &nbsp; &nbsp; Home &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="images.htm"> Images &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="forms.htm"> Forms &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="register.htm"> Register &nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="memberpages.htm"> Member Pages &nbsp;&nbsp;</a>

    <br />
    <table>

    <tr>
    <td align=center>Angles</td>
    <td align=center>Demons</td>
    <td align=center>Animals</td>
    </tr>
    <tr>
    <td><a href="angles.htm"><img src="images/angels/angles1.jpg"

    width="200" height="200"/> </a></td>
    <td><a href="demons.htm"><img src="images/demons/demon1.jpg"

    width="200" height="200"/> </a></td>
    <td><a href="animals.htm"><img src="images/animals/Animals1.jpg"

    width="200" height="200"/> </a></td>
    </tr>

    <br/>
    <tr>
    <td align=center>Magical</td>
    <td align=center>Royal</td>
    </tr>

    <tr>
    <td><a href="magical.htm"><img src="images/magical/Magical1.jpg"

    width="200" height="200"/> </a></td>
    <td><a href="royal.htm"><img src="images/royal/royal1.jpg"

    width="200" height="200"/> </a></td>
    </tr>
    </table>
    </body>
    </html>

    i use &nbsp alot because its the code for a space, and i need x amount of spaces between links, this is the only coding ive learned so far that does this.

    in my other class i did not have a choice i had to use dreamweaver, however because i had learned coding from my other class i was able to fix the coded area of dreamweaver to correct my project for that class.

    also since most are saying this is a css problem, not html problem, will someone please tell me how to move this topic to the right form section thank you.
    Last edited by genova90; 04-21-2012 at 05:49 PM.

  12. #12
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    Code:
    body {
    	background: url(path/to/image.jpg) no-repeat center center fixed;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    		}
    This is what I use to make the background stay the same and scale the whole thing. Its CSS3 but it should do the trick.
    You have to realize that all styling is done by CSS now. HTML should NOT be used to style the layout of elements on the page. CSS can handle this. For your spaces between links you can simply use css to set the margins between the links. Look up the CSS box model to get a better idea of what I am talking about. You would be able to set the margin right and left of any <li> tag to a set distance to get the spacing you need. I suggest that you go and read http://www.w3schools.com/html5/default.asp
    and
    http://www.w3schools.com/css/default.asp
    http://www.w3schools.com/css3/default.asp

    These will give you a solid understanding of at least HTML5 and CSS2 and CSS3
    Last edited by PBSWebDesign; 04-21-2012 at 06:22 PM.
    ----------------------------------------------------------------------------------------------
    WYSIWYG editors will never beat my hand written code!!!! Learn to do it in notepad and learn how to actually control your website! Current Project http://www.jmcanineservices.com

  13. #13
    Join Date
    Feb 2012
    Posts
    12
    @PBSWebDesign thank you very much, i tried a similar code from the site spufi gave me except i had background-image: url and in the html where as you have it just background: url in the body, and after resizing a few of my images editing my code and than trying it on another computer and getting the same results my problem has been fixed. i now have the full background image like ive been wanting thank you again.

  14. #14
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    Quote Originally Posted by genova90 View Post
    @PBSWebDesign thank you very much, i tried a similar code from the site spufi gave me except i had background-image: url and in the html where as you have it just background: url in the body, and after resizing a few of my images editing my code and than trying it on another computer and getting the same results my problem has been fixed. i now have the full background image like ive been wanting thank you again.
    Anytime!
    ----------------------------------------------------------------------------------------------
    WYSIWYG editors will never beat my hand written code!!!! Learn to do it in notepad and learn how to actually control your website! Current Project http://www.jmcanineservices.com

  15. #15
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266

    try this

    You should define a background color (or bgcolor) as well as text color. Text "white" did not show on default white background. Your links have color but not ordinary text like | pipe.

    If you don't want the link to go anywhere, use hash mark # (and add nogo so it does not jump to top of page) <a href="#nogo">Home</a>.

    Put the links inside a paragraph or header tag, or add them to <TABLE><tr><td colspan="3"></td></tr>. You can add bgcolor to table, or row, or cell. I would <table align="center">. With a <TABLE >, you need the same number of <td> cells in each <tr> row, or use colspan (or rowspan).

    There was a typo in <style TYPE="text/css">

    I'm not sure why you are using background-attachment: fixed; (which would not scroll). I stuck in background-position: top center;

    The self-closing "space slash" for empty tags <br /> or <img src="pic.jpg" /> is really for XHTML doctype, but it doesn't seem to matter much in HTML4.01 Transitional (which would ordinarily just be <br>).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> Images of Illusion - images </title>
    <style type="text/css">
    body
    {
    background-image:url('images/background.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment:fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    </style>
    </head>
    <body text="black" link="green" vlink="blue" alink="red" bgcolor="#CCFFFF" background="images/background.jpg">
    
    <h3 align="center">
    <a href="#nogo"> Home </a>&nbsp;&nbsp;
      | &nbsp; &nbsp;<a href="images.htm"> Images </a>&nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="forms.htm"> Forms </a>&nbsp;&nbsp;
    | &nbsp; &nbsp;<a href="register.htm"> Register</a> &nbsp;&nbsp;| &nbsp; &nbsp;<a href="memberpages.htm">Member&nbsp;Pages</a> 
    </h3>
    
    <br />
    <table align="center" bgcolor="#FFFFFF">
    <tr bgcolor="#FFFFFF">
    <td colspan="3"> &nbsp;</td> </tr>
    <tr>
    <td align=center>Angles</td>
    <td align=center>Demons</td>
    <td align=center>Animals</td>
    </tr>
    
    <tr>
    <td><a href="angles.htm"><img src="images/angels/angles1.jpg"
    width="200" height="200" /> </a></td>
    <td><a href="demons.htm"><img src="images/demons/demon1.jpg"
    width="200" height="200"/> </a></td>
    <td><a href="animals.htm"><img src="images/animals/Animals1.jpg"
    width="200" height="200"/> </a></td>
    </tr>
    
    <tr>
    <td align=center>Magical</td>
    <td align=center>Royal</td>
    <td align=center>?</td>
    </tr>
    
    <tr>
    <td><a href="magical.htm"><img src="images/magical/Magical1.jpg"
    width="200" height="200"/> </a></td>
    <td><a href="royal.htm"><img src="images/royal/royal1.jpg"
    width="200" height="200"/> </a></td>
    <td>&nbsp;</td>
    </tr>
    </table>
    
    </body>
    </html>
    P.S. -- See PBSWebDesign's post for using background-size. Otherwise, you would have to make the background image big enough to cover page (which would be a slow download). I was not sure how to approach size because of OLD coding inside <BODY> tag,
    Last edited by auntnini; 04-21-2012 at 10:26 PM. Reason: add P.S.

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