Jump to content

[SOLVED] How can I have different background image for the index page

Ensign
 Share

Recommended Posts

razaro Proficient

razaro

Posted
Posted

There are maybe better ways but this works.
In global.css add two classes 

.bg1 {background:url("../img/bg1.jpg") repeat scroll 0 0 #FFF;}
.bg2 {background:url("../img/bg2.jpg") repeat scroll 0 0 #CCC;}


Obviously you need two background images bg1.jpg and bg2.jpg in img folder ,in your theme folder.
And also check that body doesn't have background property.Looks something like this

body {    
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #000;
   text-align:center;
}



Then edit header.tpl and replace body tag code with this

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} {if $page_name == 'index'} class="bg1"{else}class="bg2"{/if}>

Link to comment
Share on other sites
Ensign Newbie

Ensign

Posted
  • Author
Posted

In global.css add two classes 
.bg1 {background:url("../img/bg1.jpg") repeat scroll 0 0 #FFF;}
.bg2 {background:url("../img/bg2.jpg") repeat scroll 0 0 #CCC;}


Obviously you need two background images bg1.jpg and bg2.jpg in img folder ,in your theme folder.
And also check that body doesn't have background property.Looks something like this

body {    
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #000;
   text-align:center;
}



Then edit header.tpl and replace body tag code with this

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} {if $page_name == 'index'} class="bg1"{else}class="bg2"{/if}>
















It works. Thank you very very much.
Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

I suggest using the following:

body#index { background: url('../img/bg-home.jpg') }
body { background: url('../img/bg.jpg') }



If your issue is resolved, please edit your first post and add [sOLVED] to the front of the title.

Link to comment
Share on other sites
Ensign Newbie

Ensign

Posted
  • Author
Posted
I suggest using the following:

body#index { background: url('../img/bg-home.jpg') }
body { background: url('../img/bg.jpg') }



If your issue is resolved, please edit your first post and add [sOLVED] to the front of the title.



Sorry, where do I put the 
body#index { background: url('../img/bg-home.jpg') }
body { background: url('../img/bg.jpg') }



Can I use this code for index page and the CMS page, and the rest use the default bg.jpg?

And how do I edit the first post?

Thank you for the help.

Link to comment
Share on other sites
razaro Proficient

razaro

Posted
Posted

Thanks rocky for right solution.

body#index { background: url('../img/bg-home.jpg') }


You need to paste this line in global.css in your theme folder/css , at beginning.
Similar for cms.
So it look like similar to this 

* {
   padding:0;
   margin:0;
}
body#index { background: url('../img/bg-home.jpg') }
body#cms{ background: url('../img/bg-cms.jpg') }
body {
   background:url("../img/bg.jpg") ;
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #000;
   text-align:center;
}



And to Edit button is under your post

Link to comment
Share on other sites
  • 2 months later...
Raggy786 Newbie

Raggy786

Posted
Posted
I suggest using the following:

body#index { background: url('../img/bg-home.jpg') }
body { background: url('../img/bg.jpg') }



If your issue is resolved, please edit your first post and add [sOLVED] to the front of the title.



how do i stop the background image to scroll?
Link to comment
Share on other sites
  • 11 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...