Jump to content

[SOLVED]Title with Background image

Blu-Express VA

By Blu-Express VA
in Support Forum

 Share

Recommended Posts

Blu-Express VA Newbie

Blu-Express VA

Posted
  • Author
Posted

Hi,

this is my code:

*{
margin:0;
padding:0;
}
body{
background:#fff;
font:11px/20px Tahoma,Helvetica,sans-serif;
color:#222;
}

/* Layout Styles Starts */

#wrapper{
width:900px;
margin:0 auto;
position:relative;
padding:0 0 10px 0;
}
#header-top{
	height:80px;
	overflow:hidden;
	padding:20px 25px 0 25px;
}
	#logo{
		float:left;
	}
		#logo h1{
			background:url(../images/logo.jpg) no-repeat;
			width:220px;
		}
			#logo h1 a{
				display:block;
				height:66px;
			}
				#logo h1 a span{
					display:none;
				}
#s3slider{
	position:relative;
	height:263px;
	overflow:hidden;
}
	#s3sliderContent {
	   width: 900px; /* important to be same as image width or wider */
	   position: absolute; /* important */
	   top: 0; /* important */
	   margin-left: 0; /* important */
	}

	.s3sliderImage {
	   float: left; /* important */
	   position: relative; /* important */
	   display: none; /* important */
	}

	.s3sliderImage span {
	   position: absolute; /* important */
	   left: 0;
	   font: 10px/15px Arial, Helvetica, sans-serif;
	   padding: 10px 13px 15px 13px;
	   width: 874px;
	   background-color: #000;
	   filter: alpha(opacity=50); /* here you can set the opacity of box with text */
	   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
	   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
	   opacity: 0.5; /* here you can set the opacity of box with text */
	   color: #fff;
	   display: none; /* important */
	   bottom: 0;

	   /*
		   if you put
		   top: 0; -> the box with text will be shown at the top of the image
		   if you put
		   bottom: 0; -> the box with text will be shown at the bottom of the image
	   */
	}
#menu{
	background:url(../images/menu-bg.jpg) no-repeat;
	height:62px;
	margin:1px 0 0 0;
	overflow:hidden;
}
	#menu ul{
		list-style:none;
		text-align:center;
	}
		#menu li, #menu li a, #menu li a.current{
			display:block;
			float:left;
		}
		#menu li{
			line-height:44px;
			text-transform:uppercase;
			border-right:1px solid #444444;
		}
		#menu li.noborder{border:none;}
			#menu li a{
				color:#939393;
				text-decoration:none;
				padding:0 10px;
			}
				#menu li a:hover{
					color:#fff;
					text-decoration:none;
				}
			#menu li a.current{
				text-decoration:none;
				padding:0 31px;
				color:#fff;
				text-decoration:none;
			}

#container{
	margin:0 0 10px 0;
	padding:15px 10px 0 10px;
	background:transparent url(../images/container-divider.jpg) no-repeat 625px top;
}	
	#mainarea{
		width:605px;
		float:left;
	}
	#sidearea{
		width:245px;
		float:right;
	}
               #sample { 

                       width: 220;

                       height: 210;

                       margin: 30px;

                       background: transparent url(http://bluepanoramava.joomlafree.it/Background.png) no-repeat;
		text-align:center; }


               }
	.block1{
		width:286px;
		margin:0 10px 10px 0;
		display:block;
		float:left;
	}
		.block1 p{
			text-align:center;
		}
		.block1 img{
			border:1px solid #d9d9d9;
			padding:3px;
			background:#fff;
		}

#footer{
	background:url(../images/footer-bg.jpg) no-repeat;
	height:60px;
	overflow:hidden;
	color:#939393;
	padding:0 20px;
	line-height:44px;
	font-size:10px;

}
	#footer a{
		color:#939393;
		text-decoration:none;
	}
		#footer a:hover{
			color:#fff;
			text-decoration:underline;
		}

/* Layout Styles Ends */

/* Panel Tab/button */
.tab {
 	background: url(../images/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
   top: 0;
   z-index: 999;
}

.tab ul.login {
display: block;
position: relative;
 	float: right;
 	clear: right;
 	height: 42px;
width: auto;
 	font-weight: bold;
line-height: 42px;
margin: 0;
right: 50px;
 	color: white;
 	font-size: 80%;
text-align: center;
}

.tab ul.login li.left {
 	background: url(../images/tab_l.png) no-repeat left 0;
 	height: 42px;
width: 30px;
padding: 0;
margin: 0;
 	display: block;
float: left;
}

.tab ul.login li.right {
 	background: url(../images/tab_r.png) no-repeat left 0;
 	height: 42px;
width: 30px;
padding: 0;
margin: 0;
 	display: block;
float: left;
}

.tab ul.login li {
	text-align: left;
 	padding: 0 6px;
display: block;
float: left;
height: 42px;
 	background: url(../images/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {
color: #bfbfbf;
}

.tab ul.login li a:hover {
color: white;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(../images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(../images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(../images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(../images/bt_close.png) no-repeat left -19px;}

/* sliding panel */
#toppanel {
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 999;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
}

#panel {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}

#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}

#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}

#panel p {
margin: 5px 0;
padding: 0;
}

#panel a {
text-decoration: none;
color: #bfbfbf;
}

#panel a:hover {
color:#fff;
}

#panel a-lost-pwd {
display: block;
float: left;
}

#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}

#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}

#panel .content .right {
border-right: 1px solid #333;
}

#panel .content form {
margin: 0 0 10px 0;
}

#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}

#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}

#panel .content input:focus.field {
background: #545454;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}

#panel .content input.bt_login {
width: 74px;
background: transparent url(../images/bt_login.png) no-repeat 0 0;
}

#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(../images/bt_register.png) no-repeat 0 0;
}
#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}

/* Links Styles Starts */

readmore{
font-size:9px;
}
a.readmore{
font-size:10px;
}
#container p.hr{
border:solid #d3d3d3;
border-width:1px 0 0 0;
margin:0;
outline:none;
}
#mainarea a{
border-bottom:1px dotted;
}
#mainarea a:hover{
text-decoration:none;
}
/* Links Styles Ends */

/* Form Styles */


#mainarea form{
padding:0 5px;
}
#mainarea form p{
margin:0 0 5px 0;
}
#mainarea form p.floatleft{
margin-right:15px;
}
.input{
border:1px solid #a5a5a5;
background:none;
cursor:text;
margin:5px 0;
padding:2px;
width:200px;
}
textarea.input{
width:415px;
height:100px;
}
.input:focus, .textarea:focus{
border:1px solid #000;
}
.signin-btn, .button1{
background: transparent url(../images/bt_register_black.png) no-repeat 0 0;
width:94px;
height:24px;
line-height:20px;
margin:8px 0;
padding:2px 10px !important;
padding:2px 0;
color:#fff;
font-weight:bold;
border:none;
outline:none;
cursor:pointer;
}

/* Form Styles */


/* Paragraph and list Styles */

#container p{
margin:0 0 15px 0;
}
#container form p{
margin:0 0 5px 0;
}
#container p img.floatleft{
margin:0 20px 0 0;
}
#container p img.floatright{
margin:0 0 0 20px;
}
#mainarea img.floatleft, #mainarea p img.floatleft{
margin:10px 10px 10px 0;
}
#mainarea img.floatright, #mainarea p img.floatright{
margin:10px;
}
#container ul, #container ol{
margin:0 0 0 20px;
}
#container ol{
margin:0 0 0 30px;	
}
#container ul#works{list-style:none;margin:0;}
#container dt{
font-weight:bold;
margin:5px 0;
}

/* Paragraph Styles */

/* Genric Styles Starts */

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
a {
color:#222;
text-decoration:none;
font-weight:bold;
}
a:hover {text-decoration:underline;color:#ea4900;}
h1{font-size:32px;}
h2{font-size:22px;}
h3{font-size:18px;}
h4{font-size:16px;}
h5, h6{font-size:14px;}
h1,h2,h3,h4,h5,h6{margin:0 0 15px 0; color:#5c5b5b;font-family:"Trebuchet MS";font-weight:normal;}
img{border:none;}
.clear{clear:both;}
.floatleft{float:left;}
.floatright{float:right;}
.center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.normal, .normal a{font-weight:normal;}
.textbold{font-weight:bold;}
#container .nomargin, .nomargin{margin:0;}
#container.nobg, .nobg{background:none;}

/* Genric Styles Ends */

Whatch my website ;D

Link to comment
Share on other sites
James142 Newbie

James142

Posted
Posted

Sorry but i not view the button "Edit" :D

So, thanks in advance ;)

Try changing the width and height in this section: 

 #sample { 

                       width: 220;

                       height: 210;

                       margin: 30px;

                       background: transparent url(http://bluepanoramava.joomlafree.it/Background.png) no-repeat;                        text-align:center; }

As for the colour, you will have to edit the background.png image you have or change

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing
×
×
  • Create New...