CSS - Background
Here you learn how to format a background using CSS.
Background Color
External CSS File
This is your external CSS file named "stylesheet.css".|
.bg1 { background-color: orange; } .bg2 { background-color: #a0c0a0; } | ||
PHP Page
|
<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <span class="bg1">This has a yellow background.</span><br><br> <span class="bg2">This has a light green background.</span><br> </body> </html> |
||
This is how it looks
|
This has a yellow background. This has a light green background. |
||
Background Image
External CSS File
This is your external CSS file named "stylesheet.css".|
.bg1 { background-image: url(cssbg.jpg); } .bg2 { background-image: url(http://www.webpageblueprint.com/cssbg.jpg); } | ||
PHP Page
|
<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <p class="bg1">This particular section<br> has a background image<br> coded using a relative file location.</p><br><br> <p class="bg2">This particular section<br> has a background image<br> coded using an absolute file location.</p><br> </body> </html> |
||
This is how it looks
|
This particular section This particular section |
||
Background Images Repeating
External CSS File
This is your external CSS file named "stylesheet.css".|
.bg3 { background-image: url(cssbg.jpg); background-repeat: repeat-y; } .bg4 { background-image: url(cssbg.jpg); background-repeat: repeat-x; } .bg5 { background-image: url(cssbg.jpg); background-repeat: no-repeat; } | ||
PHP Page
|
<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <p class="bg3">This particular section<br> has a background image<br> that repeats<br> only vertically.</p><br> <p class="bg4">This particular section<br> has a background image<br> that repeats<br> only horizontally.</p><br> <p class="bg5">This particular section<br> has a background image<br> that doesn't repeat<br> - it only shows up once.</p><br> </body> </html> |
||
This is how it looks
|
This particular section This particular section This particular section |
||
Background Image Positioning
External CSS File
This is your external CSS file named "stylesheet.css".|
.bg6 { border: 1px solid #999999; background-image: url(cssbg.jpg); background-repeat: no-repeat; background-position: 20px 20px; } .bg7 { border: 1px solid #999999; background-image: url(cssbg.jpg); background-repeat: no-repeat; background-position: 30% 30%; } .bg8 { border: 1px solid #999999; background-image: url(cssbg.jpg); background-repeat: no-repeat; background-position: top center; } | ||
PHP Page
|
<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <p class="bg6">This section<br> has a background image<br> that is positioned 20 pixels from<br> the left and 20 pixels from the top.</p><br><br> <p class="bg7">This section<br> has a background image<br> that is positioned<br> 30% from the<br> left and<br> 30% from the top.</p><br><br> <p class="bg8">This section<br> has a background image<br> that is aligned to the<br> top and center of the section.</p><br> </body> </html> |
||
This is how it looks
|
This section has a background image that is positioned 20 pixels from the left and 20 pixels from the top. This section has a background image that is positioned 30% from the left and 30% from the top. This section has a background image that is aligned to the top and center of the section. |
||
Bookmark this page:
|
