Kryptronic Software Support Forum

You are viewing this forum as a guest. Login to an existing account, or create a new account, to reply to topics and to create new topics.

Pages: 1

 

#1 05-22-2016 01:13:43

watchtime
Member
From: Melbourne, Australia
Registered: 10-24-2003
Posts: 83
Website

how do I place a separate background image behind the skin header

With the help from Nick and other forum members I have successfully replaced background image on my splash page's main body.
How do I do the same on my skin header (top of splash page), to the left & right of my Logo?

with thanks,
George

Offline

 

#2 05-23-2016 08:08:14

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19861
Website

Re: how do I place a separate background image behind the skin header

You'll likely want to apply a background image to the body tag to accomplish this.

Nick Hendler

Offline

 

#3 05-24-2016 04:22:54

watchtime
Member
From: Melbourne, Australia
Registered: 10-24-2003
Posts: 83
Website

Re: how do I place a separate background image behind the skin header

many thanks.
could you please provide instructions for a "low-tech" person :-)

is this the section in the all.css?:

body {
     color: #333333;
     background-color: #D2D2D2;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: normal;
     text-align: left;
     margin: 0px;
     padding: 0px;
     }

with thanks,
George

Offline

 

#4 05-24-2016 07:03:33

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19861
Website

Re: how do I place a separate background image behind the skin header

Yes.  Assuming you put a background image in the same skin's media directory and call that bg.jpg, and you want to position it at the top center, stretching to the width of the browser, without allowing it to tile, or scroll with the page (you have tons of options):

body {
     color: #333333;
     background-color: #D2D2D2;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: normal;
     text-align: left;
     margin: 0px;
     padding: 0px;
     background-image: url('../media/bg.jpg');
     background-position: top center;
     background-attachment: fixed;
     background-repeat: no-repeat:
     background-size: 100% auto;
     }

Nick Hendler

Offline

 

#5 05-25-2016 01:49:02

watchtime
Member
From: Melbourne, Australia
Registered: 10-24-2003
Posts: 83
Website

Re: how do I place a separate background image behind the skin header

I am not sure if I did this correctly; my logo is still in the centre but the left & right sides are white colour.
Below is the body & Skin background details (the same image Movement_1.jpg is used- it works for the back ground but does not work for the skin header.
Probably doing something wrong

/* +------------------------------------------------------------+ */
/* | General XHTML Elements                                     | */
/* +------------------------------------------------------------+ */

body {
     color: #333333;
     background-color: #D2D2D2;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: normal;
     text-align: left;
     margin: 0px;
     padding: 0px;
     background-image: url('../media/Movement_1.jpg');
     background-position: top center;
     background-attachment: fixed;
     background-repeat: no-repeat:
     background-size: 100% auto;
     }

a {
     color: #333333;
     font-weight: normal;
     text-decoration: underline;
     cursor: pointer;
     }

a:hover {
     color: #000000;
     }

/* +------------------------------------------------------------+ */
/* | Skin Background                                            | */
/* +------------------------------------------------------------+ */

#skin_background {
    /* background-color: #EFEFEF;*/
     padding: 0px;
     margin: 0px;
     background-image: url('../media/Movement_1.jpg');
     background-position: top left;
     background-repeat: repeat;
     background-attachment: fixed;
     }

with thanks,
George

Offline

 

#6 05-25-2016 02:51:25

west4
Member
From: UK
Registered: 04-16-2008
Posts: 646
Website

Re: how do I place a separate background image behind the skin header

Hi George,

Try removing the background colour (background-color: #ffffff;) from your #skin_header. It might be overlaying colour to the image.

Cheers,
Bruce.

I'd rather have a full bottle in front of me, than a full frontal labotomy.

Offline

 

#7 05-25-2016 03:08:44

nigel
Member
From: Peterborough, UK
Registered: 04-27-2008
Posts: 418
Website

Re: how do I place a separate background image behind the skin header

try this:

Code:

#skin_header {
     margin: 0px 0px 10px 0px;
     width: 100%;
     background-color: transparent  /*#FFF*/;
     padding: 10px 0px 5px 0px;
     -moz-box-shadow: 0px 2px 2px #999999;
     -webkit-box-shadow: 0px 2px 2px #999999;
     box-shadow: 0px 2px 2px #999999;
     clear: both;
     }
Nigel
https://www.oybcycles.com - V9

Offline

 

#8 05-25-2016 04:03:23

watchtime
Member
From: Melbourne, Australia
Registered: 10-24-2003
Posts: 83
Website

Re: how do I place a separate background image behind the skin header

Thanks west4 & Nigel;
Tried west4's first and it worked :-)
here is what I did:

#skin_header {
     margin: 0px 0px 10px 0px;
     width: 100%;
     /*background-color: #FFF;*/
     padding: 10px 0px 5px 0px;
     -moz-box-shadow: 0px 2px 2px #999999;
     -webkit-box-shadow: 0px 2px 2px #999999;
     box-shadow: 0px 2px 2px #999999;
     clear: both;
     }

with thanks,
George

Offline

 

#9 05-31-2016 04:46:32

watchtime
Member
From: Melbourne, Australia
Registered: 10-24-2003
Posts: 83
Website

Re: how do I place a separate background image behind the skin header

one more thing......
There is a horizontal line above and below my logo which looks rather untidy
Is there a way these can be removed?
Here is the link to my Web site to view the issue:

http://www.watchwinderworks.com.au/index.php

with thanks,
George

Offline

 

#10 05-31-2016 07:31:13

zanart
Member
From: bedford
Registered: 04-02-2008
Posts: 1716

Re: how do I place a separate background image behind the skin header

remove or comment out the box-shadow: line from both the #skin_top and #skin_header classes

Rob

Offline

 

#11 05-31-2016 08:04:00

watchtime
Member
From: Melbourne, Australia
Registered: 10-24-2003
Posts: 83
Website

Re: how do I place a separate background image behind the skin header

Thank you very much.
I tried the #skin_top first and it worked :-)

here is what I've done in "all.css":

/* +------------------------------------------------------------+ */
/* | Skin Layout Divs: Top                                      | */
/* +------------------------------------------------------------+ */

#skin_top {
     margin: 0px;
     width: 100%;
     background-color: #000000;
     padding: 5px 0px 5px 0px;
     -moz-/*box-shadow: 0px 2px 2px #555555;
     -webkit-box-shadow: 0px 2px 2px #555555;
     box-shadow: 0px 2px 2px #555555;
     z-index: 10;*/
     }

with thanks,
George

Offline

 

#12 05-31-2016 08:23:52

zanart
Member
From: bedford
Registered: 04-02-2008
Posts: 1716

Re: how do I place a separate background image behind the skin header

#skin_top {
     margin: 0px;
     width: 100%;
     background-color: #000000;
     padding: 5px 0px 5px 0px;
     /*-moz-box-shadow: 0px 2px 2px #555555;
     -webkit-box-shadow: 0px 2px 2px #555555;
     box-shadow: 0px 2px 2px #555555;*/
     z-index: 10;
     }

Rob

Offline

 

#13 05-31-2016 08:34:56

watchtime
Member
From: Melbourne, Australia
Registered: 10-24-2003
Posts: 83
Website

Re: how do I place a separate background image behind the skin header

OK
thanks again-
have amended as advised

with thanks,
George

Offline

 

 

Pages: 1

Board footer