Header Image Background Help
07-26-2008, 10:29 AM
|
Header Image Background Help
|
Posts: 24
Name: Bobby
|
Hi All,
I would like to make image background on my header section at my site. If it difficult If I would like to make random image background. I am not good at coding and I would like to get help from you.
PHP Code:
<link href="<?php echo SITE_DOMAIN ?>css/articles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style6 {font-size: 16px; color: #000000; }
-->
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#FFFFFF">
<td width="1%" align="left" valign="top">
</td>
<td width="78%" align="center" valign="middle">
<div align="left">
<img src="<?php echo $site_URL ?>images/logo.jpg" width="403" height="138" alt="FreeArticlez.com Free Articles Directory.">
</div></td>
<tr bgcolor="#FFFFFFF"> I don't know who to change to be image background.
Thank you for your help,
|
|
|
|
|
07-26-2008, 10:47 AM
|
Re: Header Image Background Help
|
Posts: 26
Name: Starr Horne
|
You want the CSS background-image attribute.
Say you had 10 background images, named background_1.jpg, background_2.jpg, etc. Also, assume you have these hosted at http://yourdomain.com/images/
To choose a random image, you can do something like this:
PHP Code:
<style>
.header{
background-image: url('http://yourdomain.com/images/background_<?= rand(1, 10); ?>.jpg');
background-repeat: no-repeat
}
</style>
<div class="header">
the header
</div>
.. That's just one way of about a million to do this.
Last edited by upstarter; 07-26-2008 at 10:51 AM..
Reason: Fixed syntax error
|
|
|
|
|
07-26-2008, 11:15 AM
|
Re: Header Image Background Help
|
Posts: 24
Name: Bobby
|
Thank you very much, I appreciate for our help....
Where can I replace the code you give me? I am afraid for make mistake and make problem with the code. My site is running now...
My code as above is the header in top.inc.php file.....
do I need to put your code at top.inc.php or in css file?
Thank you again for your help,
Best,
Bobby
|
|
|
|
|
07-26-2008, 11:20 AM
|
Re: Header Image Background Help
|
Posts: 24
Name: Bobby
|
Oh One more thing at the same php code :
Is it possible to make logo.jpg linkable when click
Code:
<img src="<?php echo $site_URL ?>images/logo.jpg" width="403" height="138" alt="FreeArticlez.com Free Articles Directory.">
How can I change it please?
Thank you |
|
|
|
|
07-26-2008, 11:23 AM
|
Re: Header Image Background Help
|
Posts: 26
Name: Starr Horne
|
Put it in the php file. Then set the class on your div to "header". Also, be sure to change the image url to something that makes sense 
PHP Code:
<div align="left" class="header">
<img src="<?php echo $site_URL ?>images/logo.jpg" width="403" height="138" alt="FreeArticlez.com Free Articles Directory.">
</div>
|
|
|
|
|
07-26-2008, 11:45 AM
|
Re: Header Image Background Help
|
Posts: 26
Name: Starr Horne
|
PHP Code:
<a href="url here"><img src="..." /></a>
|
|
|
|
|
07-26-2008, 02:35 PM
|
Re: Header Image Background Help
|
Posts: 24
Name: Bobby
|
Thank you very much for your reply. I did success make logo.jpg linkable. It is very good but it have link frame around my logo. How can I disable it?
Here is example picture
Here is my website CSS code, I don't know what to edit it
Code:
body {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : normal;
color : #333333;
background : #0a1d2f;
margin : 0;
padding : 0;
background-image : url(../images/background1.png);
}
.authborder {
border-style : solid;
border-width : 1px;
}
.h1article_title {
font-family : verdana, geneva, lucida, arial, helvetica, sans-serif;
margin : 0;
font-size : 14px;
font-weight : bold;
display : inline;
}
.h2article_title {
font-family : verdana, geneva, lucida, arial, helvetica, sans-serif;
margin : 0;
font-size : 12px;
font-weight : normal;
display : inline;
}
.artText {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9px;
font-weight : normal;
color : #000000;
background-color : inherit;
}
.greyborder {
border : 1px solid #ffffff;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : normal;
}
input.search {
font-family : Verdana, Arial, Helvetica, sans-serif;
width : 41px;
height : 15px;
border : 0;
padding : 0;
color : #ffffff;
background-color : transparent;
cursor : pointer;
font-weight : normal;
font-size : 8pt;
}
img.left, img.center, img.right {
padding : 4px;
}
img.left {
float : left;
margin : 0 12px 5px 0;
}
img.center {
display : block;
margin : 0 auto 5px auto;
}
img.right {
float : right;
margin : 0 0 5px 12px;
}
table#width {
width : 875px;
}
td#leftColumn {
width : 177px;
}
table#content {
width : 577px;
}
.bot {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9px;
font-weight : normal;
color : #333333;
background-color : inherit;
}
.bot a, .bot a:visited, .bot a:link {
color : #333333;
background-color : inherit;
text-decoration : underline;
}
.bot a:hover {
color : #ff6600;
background-color : inherit;
}
.main_table {
background-repeat : repeat-y;
background-position : center center;
background-color : #ffffff;
}
.header_repeat {
background-repeat : repeat-x;
background-position : center center;
margin : 0;
padding-top : 0;
padding-right : 5px;
padding-bottom : 0;
padding-left : 5px;
}
.catheader {
color : #ffffff;
background-color : #ffffff;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
background-image : url(../images/nav_blue.png);
background-repeat : no-repeat;
height : 23px;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 0;
padding-left : 0;
}
.box {
background-color : #f0f3fb;
}
.boxright {
background-color : #ffffff;
}
.box3 {
background-color : #f0f3fb;
}
.head_bold {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
font-style : normal;
font-weight : bold;
font-variant : normal;
color : #000000;
background-color : inherit;
}
.fonttitle {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9px;
font-style : normal;
font-weight : bold;
background-color : #ffffff;
border : thin none #cccccc;
color : #000000;
}
.redInst {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #ffffff;
background-color : inherit;
text-decoration : underline;
word-spacing : normal;
}
.subART {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #ffffff;
background-color : inherit;
border : 1px solid #c0c0c0;
}
a.a_right:hover {
text-decoration : none;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : normal;
color : #333333;
padding : 0 0 0 0;
display : block;
}
.a_right {
text-decoration : none;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : normal;
color : #333333;
background-color : inherit;
padding : 0 0 0 0;
display : block;
border : none;
cursor : pointer;
}
.rightnavbox {
padding-right : 2px;
padding-left : 2px;
font-size : 11px;
padding-bottom : 2px;
padding-top : 2px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color : #333333;
background-color : inherit;
}
.rightnavbox a, .rightnavbox a:visited, .rightnavbox a:link {
text-decoration : none;
}
a.a_left:hover {
text-decoration : none;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : normal;
color : #ff6600;
padding : 0 0 0 0;
background-color : #ffffff;
display : block;
}
.a_left_hover {
color : inherit;
background-color : #ff6600;
background-repeat : repeat-x;
}
.a_left {
text-decoration : none;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : normal;
color : #2e1fe4;
background-color : inherit;
padding : 0 0 0 0;
display : block;
}
.spacer {
height : 5px;
color : inherit;
background-color : #f5f5f5;
}
.catroot {
padding-right : 1px;
border-top : 1px solid #cccccc;
padding-left : 1px;
font-weight : bold;
font-size : 9pt;
background : #f1f1f8;
padding-bottom : 1px;
color : #333333;
padding-top : 1px;
border-bottom : 1px solid #cccccc;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
.catsub {
font-size : 11px;
line-height : 1px;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
a:link, a:hover {
color : #000000;
text-decoration : none;
font-weight : bold;
padding-left : 5px;
}
a:active {
color : #000000;
text-decoration : none;
font-weight : bold;
padding-left : 5px;
}
a:visited {
color : #000000;
text-decoration : none;
font-weight : bold;
padding-left : 5px;
}
a:hover {
color : #fd3636;
text-decoration : underline;
}
.topsearchline {
border-top-width : 1px;
border-right-width : 0;
border-bottom-width : 1px;
border-left-width : 0;
border-top-style : solid;
border-right-style : none;
border-bottom-style : solid;
border-left-style : none;
border-top-color : #000000;
border-right-color : #000000;
border-bottom-color : #000000;
border-left-color : #000000;
}
.speciallinks {
padding-right : 0;
padding-left : 0;
padding-bottom : 2px;
padding-top : 2px;
background-image : url(../images/blue_solid.png);
background-repeat : no-repeat;
height : 45px;
}
.speciallinks a, .speciallinks a:visited, .speciallinks a:link {
text-decoration : none;
color : #ffffff;
background-color : inherit;
}
.speciallinks a:hover, .speciallinks a:visited:hover {
background-color : #ffffff;
}
.homelink {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
color : #000000;
background-color : inherit;
}
.mychangebg2 {
background-color : #ffffff;
background-repeat : repeat-x;
color : inherit;
}
.mychangebg {
text-decoration : none;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : normal;
color : #ffffff;
background-color : inherit;
padding : 0 0 0 0;
display : block;
}
.bottom {
padding-right : 0;
padding-left : 0;
padding-bottom : 2px;
padding-top : 2px;
background-image : url(../images/footer.png);
background-repeat : no-repeat;
height : 10px;
}
.bottom a, .bottom a:visited, .bottom a:link {
text-decoration : none;
color : #f3e157;
background-color : inherit;
}
.speciallinks a:hover, .speciallinks a:visited:hover {
color : #f3e157;
background-color : inherit;
}
.img {
list-style-image : url(../images/bullet-yellow.gif);
}
.style6 {
font-size : 16px;
color : #e1bcaa;
background-color : inherit;
}
.style7 {
font-size : 14px;
font-style : normal;
background-color : #ffffff;
border : thin none #cccccc;
color : #000000;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
body {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : normal;
color : #333333;
background : #0a1d2f;
margin : 0;
padding : 0;
background-image : url(../images/background1.png);
}
.authborder {
border-style : solid;
border-width : 1px;
}
.h1article_title {
font-family : verdana, geneva, lucida, arial, helvetica, sans-serif;
margin : 0;
font-size : 14px;
font-weight : bold;
display : inline;
}
.h2article_title {
font-family : verdana, geneva, lucida, arial, helvetica, sans-serif;
margin : 0;
font-size : 12px;
font-weight : normal;
display : inline;
}
.artText {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9px;
font-weight : normal;
color : #000000;
background-color : inherit;
}
.greyborder {
border : 1px solid #ffffff;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : normal;
}
input.search {
font-family : Verdana, Arial, Helvetica, sans-serif;
width : 41px;
height : 15px;
border : 0;
padding : 0;
color : #ffffff;
background-color : transparent;
cursor : pointer;
font-weight : normal;
font-size : 8pt;
}
img.left, img.center, img.right {
padding : 4px;
}
img.left {
float : left;
margin : 0 12px 5px 0;
}
img.center {
display : block;
margin : 0 auto 5px auto;
}
img.right {
float : right;
margin : 0 0 5px 12px;
}
table#width {
width : 875px;
}
td#leftColumn {
width : 177px;
}
table#content {
width : 577px;
}
.bot {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9px;
font-weight : normal;
color : #333333;
background-color : inherit;
}
.bot a, .bot a:visited, .bot a:link {
color : #333333;
background-color : inherit;
text-decoration : underline;
}
.bot a:hover {
color : #ff6600;
background-color : inherit;
}
.main_table {
background-repeat : repeat-y;
background-position : center center;
background-color : #ffffff;
}
.header_repeat {
background-repeat : repeat-x;
background-position : center center;
margin : 0;
padding-top : 0;
padding-right : 5px;
padding-bottom : 0;
padding-left : 5px;
}
.catheader {
color : #ffffff;
background-color : #ffffff;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
background-image : url(../images/nav_blue.png);
background-repeat : no-repeat;
height : 23px;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 0;
padding-left : 0;
}
.box {
background-color : #f0f3fb;
}
.boxright {
background-color : #ffffff;
}
.box3 {
background-color : #f0f3fb;
}
.head_bold {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
font-style : normal;
font-weight : bold;
font-variant : normal;
color : #000000;
background-color : inherit;
}
.fonttitle {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9px;
font-style : normal;
font-weight : bold;
background-color : #ffffff;
border : thin none #cccccc;
color : #000000;
}
.redInst {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #ffffff;
background-color : inherit;
text-decoration : underline;
word-spacing : normal;
}
.subART {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #ffffff;
background-color : inherit;
border : 1px solid #c0c0c0;
}
a.a_right:hover {
text-decoration : none;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : normal;
color : #333333;
padding : 0 0 0 0;
display : block;
}
.a_right {
text-decoration : none;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : normal;
color : #333333;
background-color : inherit;
padding : 0 0 0 0;
display : block;
border : none;
cursor : pointer;
}
.rightnavbox {
padding-right : 2px;
padding-left : 2px;
font-size : 11px;
padding-bottom : 2px;
padding-top : 2px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color : #333333;
background-color : inherit;
}
.rightnavbox a, .rightnavbox a:visited, .rightnavbox a:link {
text-decoration : none;
}
a.a_left:hover {
text-decoration : none;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : normal;
color : #ff6600;
padding : 0 0 0 0;
background-color : #ffffff;
display : block;
}
.a_left_hover {
color : inherit;
background-color : #ff6600;
background-repeat : repeat-x;
}
.a_left {
text-decoration : none;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : normal;
color : #2e1fe4;
background-color : inherit;
padding : 0 0 0 0;
display : block;
}
.spacer {
height : 5px;
color : inherit;
background-color : #f5f5f5;
}
.catroot {
padding-right : 1px;
border-top : 1px solid #cccccc;
padding-left : 1px;
font-weight : bold;
font-size : 9pt;
background : #f1f1f8;
padding-bottom : 1px;
color : #333333;
padding-top : 1px;
border-bottom : 1px solid #cccccc;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
.catsub {
font-size : 11px;
line-height : 1px;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
a:link, a:hover {
color : #000000;
text-decoration : none;
font-weight : bold;
padding-left : 5px;
}
a:active {
color : #000000;
text-decoration : none;
font-weight : bold;
padding-left : 5px;
}
a:visited {
color : #000000;
text-decoration : none;
font-weight : bold;
padding-left : 5px;
}
a:hover {
color : #fd3636;
text-decoration : underline;
}
.topsearchline {
border-top-width : 1px;
border-right-width : 0;
border-bottom-width : 1px;
border-left-width : 0;
border-top-style : solid;
border-right-style : none;
border-bottom-style : solid;
border-left-style : none;
border-top-color : #000000;
border-right-color : #000000;
border-bottom-color : #000000;
border-left-color : #000000;
}
.speciallinks {
padding-right : 0;
padding-left : 0;
padding-bottom : 2px;
padding-top : 2px;
background-image : url(../images/blue_solid.png);
background-repeat : no-repeat;
height : 45px;
}
.speciallinks a, .speciallinks a:visited, .speciallinks a:link {
text-decoration : none;
color : #ffffff;
background-color : inherit;
}
.speciallinks a:hover, .speciallinks a:visited:hover {
background-color : #ffffff;
}
.homelink {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
color : #000000;
background-color : inherit;
}
.mychangebg2 {
background-color : #ffffff;
background-repeat : repeat-x;
color : inherit;
}
.mychangebg {
text-decoration : none;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : normal;
color : #ffffff;
background-color : inherit;
padding : 0 0 0 0;
display : block;
}
.bottom {
padding-right : 0;
padding-left : 0;
padding-bottom : 2px;
padding-top : 2px;
background-image : url(../images/footer.png);
background-repeat : no-repeat;
height : 10px;
}
.bottom a, .bottom a:visited, .bottom a:link {
text-decoration : none;
color : #f3e157;
background-color : inherit;
}
.speciallinks a:hover, .speciallinks a:visited:hover {
color : #f3e157;
background-color : inherit;
}
.img {
list-style-image : url(../images/bullet-yellow.gif);
}
.style6 {
font-size : 16px;
color : #000000;
}
Thank you,
Best,
Bobby |
|
|
|
|
07-27-2008, 03:27 PM
|
Re: Header Image Background Help
|
Posts: 24
Name: Bobby
|
anyone can help me please?
|
|
|
|
|
« Reply to Header Image Background Help
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
