Jump to content


Photo
- - - - -

Background Image Problems


  • Please log in to reply
6 replies to this topic

#1 HatchFunk

HatchFunk

    Soho Novice

  • Members
  • PipPip
  • 10 posts

Posted 15 February 2009 - 07:42 PM

Hello,

Im having a problem with my background image.

when I enter my backgrnd img in my .css file it seems to be overiding the "header Picture" of my page? www.secretscienceof.ca
(see where is says "secret science - learning beyond" 2 the right of the picture)

Im adding this in the
.bgcol {
background-color: #FFFFFF;
background-image: url("redbackground.jpg")

**** The background image is not currently in the .css code - i took it out until i figure it out***



When I add my background image.. that section where it says "secret science - learning" just turns into the background image? However, if I just change the color from FFFFF to CCCCCC etc... it stays fine?

How do I add the background image while still keeping the entire top header photo the same?

Thank you
If you like JAZZ FUNK MUSIC....

Feel free to check out my band and... Enjoy the Groove :wassup:

HATCH-FUNK

#2 kyle04

kyle04

    Senior Member

  • Moderators
  • 411 posts

Posted 15 February 2009 - 10:35 PM

If you want a background image that surrounds your main web page only - use it in the <body> tag only.
For the page content area, use it in the <td>#CONTENT# tag.

AndyP

#3 HatchFunk

HatchFunk

    Soho Novice

  • Members
  • PipPip
  • 10 posts

Posted 16 February 2009 - 06:09 PM

Hey,

to my rescue again Kyle.. thanks bro

Question (reminding you that Im a newbie to this)

Which file am I placing this in? the .css or index.htm ?

my main goal is to have it set so that every page of the site has my custom background color/image on the left and right side of my site where there is no content (where it is currently white right now on the left and right)

Im not exactly sure what I should be adding and where exactly.

Do I just add a one liner of - background-image: url("redbackground.jpg"); ????
If I place that under <body> in its own line, it just makes an odd color pattern at the very bottom of my page underneath everything?

Do I need more code with it? Do I need tags surrounding it? eg <body>background-image: url("redbackground.jpg");<body> ???


Also, when Im editing the codes... do I use the "Edit" or "Code Editor" or "HTML Editor" To me, they all seem to do the same thing ?


check out- www.secretscienceof.ca Ive placed the code in the place where I did the first time (I got this from some html learning site and placed it where it told me) -
If you see, my background on the sides is what i want... its just that it messed up the section at the top where it says Secret Science of - Learing beyond basics. That section usually has its own color background which is pretty much the same as the custom background I added. But again, after I add my background that section's normal background pic just blends in with my added custom background? (it should have a shaded line of black at the top of that section)



Please help this newbie :uh:
If you like JAZZ FUNK MUSIC....

Feel free to check out my band and... Enjoy the Groove :wassup:

HATCH-FUNK

#4 kyle04

kyle04

    Senior Member

  • Moderators
  • 411 posts

Posted 16 February 2009 - 10:50 PM

Either index.html and/or custom.css.
In this case, upload your background image to the same directory as the index.html file, ie :
sohoadmin/program/modules/site_templates/your_template_folder.

In the index.html file, alter the <body> tag to read <body onkeydown="mouse_capture( event );" background="yourimage.jpg">, or "yourimage.gif" or "yourimage.png" etc depending on the image type - be very specific on this. Specify the image within the <body> tag.
For the header, a separate background image willl be needed, placed in the <td> tag :
<TD class="bgcol" align="left" valign="top"><img id="main_img" src="sohoadmin/program/modules/site_templates/pages/ANDREW-RED-Secret_Science/swirl_red-grad.jpg"></TD>
either specify it in the custom.css ,the "bgcol" class - {backround-image: url("yourimage");}
or directly in the opening <td> tag :
<TD class="bgcol" align="left" valign="top" style="background-image:url('yourimage');">
Again make sure the image is in the template_folder.


AndyP

#5 HatchFunk

HatchFunk

    Soho Novice

  • Members
  • PipPip
  • 10 posts

Posted 17 February 2009 - 07:23 PM

thanks for the help... it just wasnt working or Im just not getting it.

Another question.....

What do you call that section.... where the Secret Science of - Boyond Learning Title and Slogan are?
From what I can see in the code, the pic that came with the template that is supposed to be there... should be there? its called "grad_red.jpg"

Why this is vanishing when I include my custom background is beyond me. I guess Im just having trouble understanding where everything goes.

When I include my custom background "redblack.jpg" in my .css does this overide the other picture?


www.secretscienceof.ca

thanks

Kyle... is your name Andy? My name is also Andrew - cheers to that
If you like JAZZ FUNK MUSIC....

Feel free to check out my band and... Enjoy the Groove :wassup:

HATCH-FUNK

#6 kyle04

kyle04

    Senior Member

  • Moderators
  • 411 posts

Posted 17 February 2009 - 11:08 PM

You might see a reference to the grad.red image in the index.html as #LOGO IMG# or something like that.
(you have an extra > at the end of your body tag - you might want to delete that.....)

An image referenced as a background will not override your placed image.
If you want to use css to define your body background :

.bodybg {background-image: url("redblack.jpg");}

Then in you body tag :
<body class="bodybg" .........>

AndyP

#7 HatchFunk

HatchFunk

    Soho Novice

  • Members
  • PipPip
  • 10 posts

Posted 19 February 2009 - 04:47 PM

From what I can tell now.... the template was set up so that the background image that is where the "secret science - learn beyond" title and slogan are was the background. It is not a seperate picture.

So I guess this changes things and explains why it didnt stay. It was sized and positioned for that one spot.

So, I think Im just going to forget about it.

I just figured out how to make web pages with word so I dont have to really get into the coding part of things...

I think I may get Dreamweaver and leave soho behind until I learn how to use html and css properly cause this is all confusing the hell out of me and the soho templates arent exactly that great. hahahah

cheers
If you like JAZZ FUNK MUSIC....

Feel free to check out my band and... Enjoy the Groove :wassup:

HATCH-FUNK




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users