Page Background Image code

Source: Internet
Author: User

Page Background Image code


1. ( Most popular Class)

<style>
Body{background-image:url (logo.gif);
Background-repeat:no-repeat;background-position:center}
</style>

Description: The above code for the page background image fixed code! Web background image Fixed code, so that when the page is pulled down, the background image of the page will not move upward, to achieve the purpose of motionless!

2. ( General category)

3.<p class= "Style6" > </P></SPAN><SPAN>
<table width= "100%" >
<TBODY>
<TR>
<TD class= "ArticleTitle" align=left>
<div id=divtitle style= "font-size:30px" ><B></B> </DIV></TD></TR>
<TR>
<TD class= "articlecontent" style= "font-size:30px; line-height:150% "align=left>
<CENTER> </CENTER>
<style type=text/css><!--Body {background-image:url (image address);

Background-repeat:no-repeat;

background-attachment:fixed;background-position:50% 50%}</style>
</TD></TR></TBODY></TABLE></SPAN>

Description

No-repeat; (Uneven shop)

Change to this repeat (tiled)

You need to look at both sides.

Method One:
When the article is edited, click Create table in the pop-up window to set the border to 0, and then fill in the background image of the link address is good can also use the code:
<table height=600 width=600 background= Your background image address border=0>
<TBODY>
<TR>
<TD> your main content </TD></TR></TBODY></TABLE> method two:
<body background= Your background image address > method Three:
<style type=text/css><!--Body {background-image:url (your background image address); background-repeat:no-repeat; background-attachment:fixed;background-position:50% 50%}--> </STYLE> Method Four: The background map is to add the following code to the previous code in HTML mode:
<body background= "Picture Address" >
Note: The image address must be an existing image on the network, not the local machine, if you want to link the local computer, you must first in the album or other articles uploaded before you can call.

Method Five:
<style type= "Text/css" >
<!--
BODY {background-image:url (picture name. gif);
Background-position:center;
Background-repeat:no-repeat;
background-attachment:fixed;}
-
</STYLE>


Font properties: <font color=00dfff face= "Young Circles" size=4.5> display text </font>

Background, body, connection color: <body bgcolor= "#000000" text= "#ff9933" link= "#ff66ff" >

Add a halo <table style= "Filter:glow (color= color)" > Text </table> Glow to Shadow,dropshadow, etc., producing different effects

Color code URL http://shirley329.blogchina.com/3501281.html

Background pattern: <body background= "http://Picture Address" bgproperties= "fixed" > If you remove the back bgproperties= "fixed" then the selected background will be flipped with the page, Here to give some advice, generally up and down the cohesion of very clever or with flowers, stars and other made into a rolling better, and that the complete picture of the best fixed it? Of course, it is best to try to see which is appropriate to pay attention to the background must choose a lighter color of the picture, to divide the primary and secondary, 3 floor with editing tools Adjust the GAMA value to get a light color picture, there is a picture amplifier, can be interpolated without distortion of the enlarged image

Background music: <bgsound src= "//Music Address" loop=infinite> If you do not add loop=infinite then the background music only one side of the end, if you want to add a beautiful player to their music, you can see here, There are 9 style players in the continuous playback of different songs.

Page map: that is, in the graffiti version of the picture, width can also be height, can also be defined, note that numbers and units do not have spaces, can also be expressed as a percentage, such as the following

Floating picture <div style= "Position:absolute; top:0px;left:250px; " ></div> This one is much more flexible than the last. You can position the picture anywhere on the page by modifying the parameters, and the quotation marks on either side of the resource URL are optional.

Map transparency: Style can be 1.2.3 for different effects, try it yourself opacity is the transparency 0~100 if 0 is completely transparent

Hyperlink: <a href=http://www. address. com target= "_blank" > Connected text </a> connected text can change properties, or you can switch to a favorite picture method is to replace the page map target= "_ Blank "refers to open in a new window, you can also delete the school on the & has restrictions, generally if there is & in the link to take the address in front of it, of course, it is best to try first

Scroll hyperlinks: <marquee scrollamount=2 width=300><a href=http://www. Address .com> Connected text </a></marquee>

Change the mouse style: <body style= "Cursor:url (' http://mouse address ')" > 4 floor with 270 kinds of mouse

The following CSS control mouse: <style type=text/css> <!--body{cursor:url (HTTP/mouse address 1)} A{cursor:url (mouse address 2);--></ Style>

1 is normal, 2 is the effect when the mouse is placed on the link


Show the page with slide transitions:

Scrolling text: <marquee scrollamount=2 width=300 height=160 direction=up> scrolling text </marquee>

a) scrollamount. It represents speed, and the greater the value, the faster. If it does not, the default is 6

b) Width and height, which indicates the size of the scrolling area, width is wide, height is high. Especially when doing vertical scrolling, be sure to set the height value

c) direction. Represents the direction of scrolling, which defaults to right-to-left: ←←←. The optional values are right, down, up. The scrolling direction is: Right means →→up represents ↑,down ↓.

d) Scrolldelay, which is also used to control the speed, the default is 90, the higher the value, the slower the speed. Usually the scrolldelay is not required to be set.

e) behavior. Use it to control properties, default to circular scrolling, optional values are alternate (alternating scrolling), slide (slide effect, refers to scrolling once, and then stops scrolling)

f) How to add hyperlinks to scrolling captions? This is exactly the same as the usual hyperlinks. Just add <a href=***> and </a> on the outside of the text.
g) Change the properties of the scrolling caption

Color: <a style=color:cc6600> scrolling Text </a>
Font: <font color=00dfff face= "Young Round" size=4.5> display text </font>
Note: Scrolling content can also be replaced by other things, try it yourself slowly


Set to scroll: <marquee direction=up marquee scrollamount=3 > When the height=0 is scrolled up, it hides the

Flash Animation: <embed style= "left:0px; Position:absolute; top:50px; "Align=right Src=http://flash address width=1000 height=500 Type=application/octet-stream; quality= "High" wmode= "Transparent" >

I hope you can thoroughly understand this, beautiful pages are not flash such as my page in the small clock, shining stars are used it to achieve, many of the posts provide special effects but modified the inside of the reference address left top is used to locate the bottom width of course can also be used Height to limit the size of the flash align=right for right alignment

Flash Animation (relative positioning is placed in the graffiti Board): <embed style= "left:150px; position:relativity; top:800px; "Align=right Src=http://flash address width=400 height=200 Type=application/octet-stream; quality= "High" wmode= "Transparent" >

If you want to add the clock, then use <embed style= "left:150px; Position:absolute; top:50px; "Align=right src=http://clock address width=1000 height=500 Type=application/octet-stream; quality= "High" wmode= "Transparent" >

Width:hetght: Determine the clock size, Left:top: To make sure the clock is anywhere on the page, the code above is the location of my page clock

Video: <embed src= your wmv address type=audio/x-pn-realaudio-plugin console=clip1 Controls=imagewindow HEIGHT=252 WIDTH=324 Autostart=true loop=true>

Play flash:<embed src=http://play address quality= "High" pluginspage= "Http://www.macromedia.com/go/getflashplayer" type= " Application/x-shockwave-flash "width=" 640 "height=" 480 "></embed>

Change the page text style (see 5 floor for a detailed illustration)
<style type=text/css> <!--a:link{color: #3366FF; font-size:10pt; Font-family: Song Body}; A:visited{color: #3366FF; font-size:10pt; Font-family: Song Body}; A:active{color: #FF0000; font-size:12pt; Font-family: Song Body}; A:hover{color: #FFFFCC};body{color: #3A5FCD; font-size:10pt; Font-weight:normal; Font-family: Song Body}--></style>

A:link is a part of the link
A:visited is a link part that has been linked
A:active is the active link section
A:hover is the display when the mouse is put up
Body is a change in the body part.
Font-size is the font size setting
Font-family: Font Name
Font-weight:bolder is a bold display, you can replace the normal,cite, and so on the default is normal use this allows the connection to create a button animation effect


-----------------------------------------------------------------------------------------


Add some practical tips

Tip 1: A lot of friends have added a background music, if you open more pages are mixed in a piece, this is just click the ESC key, the music stopped

Tip # 2: Add more code to the Graffiti board, change it hard, add a comment bar, the format is as follows: <!--comments--

Add link in post: Open Notepad input <meta content= "0; Url= ' destination page address ' > saved as. html, and then uploaded via attachments; the parameters behind the content represent a few seconds of automatic jump, which of course is set to 0 if you add
To have a certain web base friends: Through the above connection example is not difficult to think, in fact, we completely break the xiaonei of the various restrictions of their own design page, and then upload, as long as not 1M OK, 1M is not small, all the materials used in the design of the single upload to the school, and then make a home organization on the line, In the equivalent of the school provides us with unlimited space, and the speed is not slow, interested friends can try

Look at the code in other people's graffiti board, go to the page right click the mouse, choose to view the original code according to ctrl+f input "Doodle Board" to find the location of the graffiti board, this method is for learning only, do not copy other people's results in the original disk

Establish their own dedicated message board, to my page friends see, through the link can open a special page message, and the original is hidden, make the following:

1: Use the above group column and message class to scroll, the parameter is up, the height is zero

2: Create a link with the http://www.xiaonei.com/GetLeavewordList.do?id= equals sign followed by your own page number (the last few digits after entering your own page)

SOURCE Q Money Resource net: Http://blog.sina.com.cn/hksqbi

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.