Webmaster Forum

Go Back   Webmaster Forum > Web Development > Web Design Lobby

Web Design Lobby Forum for general web design issues not specific to scripting or graphics.


Reply
 
LinkBack Thread Tools Display Modes
Old 07-03-2009, 05:53 PM   #1 (permalink)
Junior Member
 
Join Date: 07-03-09
Posts: 5
iTrader: 0 / 0%
Latest Blog:
None

bongodog is liked by many
aligning the background image with a .swf header

this is probably an easy task for someone who knows what they're doing... i'm a noob at web design so could use some advice.

having trouble getting the BG image to align with the Flash header...

when i try this code:

background-position: center center

the BG image is centered horizontally but crammed up top underneath the header

so i tired this:

background-position: horizontal center

and oddly - the BG image is moved down the appropriate amount - but now is aligned on the left and not centered horizontally at all...

what gives?

adding the following line changes nothing:

background-position: vertical center

here is the page as it currently looks:
bongodogdesigns.com/freestyle/main2.html

I appreciate any input...
Cheers!
=D

Last edited by htmlbasictutor; 07-03-2009 at 06:06 PM..
bongodog is offline  
Add Post to del.icio.us
Reply With Quote
Old 07-03-2009, 06:05 PM   #2 (permalink)
Super Moderator
 
htmlbasictutor's Avatar
 
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 2,963
iTrader: 0 / 0%
Latest Blog:
Website Testing

htmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web pro
CSS background-position Property

Quote:
...Note: For this to work in Firefox and Opera, the background-attachment property must be set to "fixed"....

Note: Internet Explorer does not support the property value "inherit"....
The property values are further down the linked page above.

I would think that setting the property values to specific values would solve your problem.
__________________
HTML Basic Tutor - Learn to code your web pages/blogs to be cross-browser compatible
Basic Computer Information - Computer Basics for website owners
htmlbasictutor is offline  
Add Post to del.icio.us
Reply With Quote
Old 07-03-2009, 06:25 PM   #3 (permalink)
Junior Member
 
Join Date: 07-03-09
Posts: 5
iTrader: 0 / 0%
Latest Blog:
None

bongodog is liked by many
thanks for your quick reply...

setting the background-attachemnt to 'fixed" did indeed align the image horizontally.

however, now my div boxes are all out of whack...

the image lines up pretty close in explorer but there is a large gap between the header and image in firefox.

I would think that adding specific values for the alignment properties would cause discrepencies between different screen resolutions and wreak all kinds of havoc.

Any more advice?
bongodog is offline  
Add Post to del.icio.us
Reply With Quote
Old 07-03-2009, 07:16 PM   #4 (permalink)
Meeow!
 
Costin Trifan's Avatar
 
Join Date: 04-13-07
Location: Romania
Posts: 3,235
iTrader: 0 / 0%
Latest Blog:
None

Costin Trifan is a web professional of the highest orderCostin Trifan is a web professional of the highest orderCostin Trifan is a web professional of the highest orderCostin Trifan is a web professional of the highest orderCostin Trifan is a web professional of the highest orderCostin Trifan is a web professional of the highest orderCostin Trifan is a web professional of the highest orderCostin Trifan is a web professional of the highest orderCostin Trifan is a web professional of the highest orderCostin Trifan is a web professional of the highest orderCostin Trifan is a web professional of the highest order
IE8 and FF3.5 display your page 99% the same. Can you post a screenshot of your web page?
__________________
...to be continued
Costin Trifan is offline  
Add Post to del.icio.us
Reply With Quote
Old 07-03-2009, 07:17 PM   #5 (permalink)
Junior Member
 
Join Date: 07-03-09
Posts: 5
iTrader: 0 / 0%
Latest Blog:
None

bongodog is liked by many
actually, i see now that the mis-alignment of the div boxes, and background image with the header are all relative to the browser window - see this example:

bongodogdesigns.com/freestyle/main3.html

so how is it possible to center all three elements (.swg header, BG image, and html template) and align them properly???

is it recommended to use tables?

thanks in advance for your advice!

=D

Last edited by htmlbasictutor; 07-03-2009 at 08:33 PM..
bongodog is offline  
Add Post to del.icio.us
Reply With Quote
Old 07-03-2009, 07:23 PM   #6 (permalink)
Meeow!
 
Costin Trifan's Avatar
 
Join Date: 04-13-07
Location: Romania
Posts: 3,235
iTrader: 0 / 0%
Latest Blog:
None

Costin Trifan is a web professional of the highest orderCostin Trifan is a web professional of the highest orderCostin Trifan is a web professional of the highest orderCostin Trifan is a web professional of the highest orderCostin Trifan is a web professional of the highest orderCostin Trifan is a web professional of the highest orderCostin Trifan is a web professional of the highest orderCostin Trifan is a web professional of the highest orderCostin Trifan is a web professional of the highest orderCostin Trifan is a web professional of the highest orderCostin Trifan is a web professional of the highest order
you use absolute positioning to align your layout, and that's a very bad practice. You can actually see it in action in IE. FF displays it centered alright, though.
So, you should better start redesign your page and use a fluid layout; use margins and paddings to separate your divs and you will be good to go in no time.
__________________
...to be continued
Costin Trifan is offline  
Add Post to del.icio.us
Reply With Quote
Old 07-03-2009, 08:39 PM   #7 (permalink)
Super Moderator
 
htmlbasictutor's Avatar
 
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 2,963
iTrader: 0 / 0%
Latest Blog:
Website Testing

htmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web pro
The first step to troubleshooting is to validate your code so you eliminate that possible problem. You have a few coding issues that could be contributing to your problem.

After you get those errors sorted out, then divide your design into containers (divs) as Costin said.

Manipulate the background image with CSS. Info provided in my previous post.
__________________
HTML Basic Tutor - Learn to code your web pages/blogs to be cross-browser compatible
Basic Computer Information - Computer Basics for website owners
htmlbasictutor is offline  
Add Post to del.icio.us
Reply With Quote
Old 07-03-2009, 09:09 PM   #8 (permalink)
Junior Member
 
Join Date: 07-03-09
Posts: 5
iTrader: 0 / 0%
Latest Blog:
None

bongodog is liked by many
thanks for the tips, guys!

That's so cool - I didn't know you could layer DIV boxes on top of eachother!

All I had to do to get the background and text content to line up center and keep from shifting around was put the BG image in a DIV box...

I did the same with my .swf header - but it's not showing up inside the DIV box (just getting the dreaded white square...)

I'm gonna google it right now but maybe you have an easy fix for me???

thanks again!
=D
bongodog is offline  
Add Post to del.icio.us
Reply With Quote
Old 07-03-2009, 09:42 PM   #9 (permalink)
Junior Member
 
Join Date: 07-03-09
Posts: 5
iTrader: 0 / 0%
Latest Blog:
None

bongodog is liked by many
never mind about the .swf header not showing up -my error (inserted the wrong file)

works great now - thanks everybody!
bongodog is offline  
Add Post to del.icio.us
Reply With Quote
Go Back   Webmaster Forum > Web Development > Web Design Lobby

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


Similar Threads
Thread Thread Starter Forum Replies Last Post
background image with css madcaptains Coding Forum 6 03-30-2009 05:45 AM
Need to Code a Different Background Behind Header hbixler03 Coding Forum 1 05-26-2008 12:47 PM
Different Background / Page Color in Header vs Post and side bard Educator Blogging Forum 5 12-28-2007 09:10 AM
aligning image to the top of the page chillami Coding Forum 4 12-30-2006 08:28 PM
CSS background image IE paranoidandroid Coding Forum 3 06-04-2006 01:28 PM


Sponsor Links
Get exposure! Contextual Links V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 09:30 AM.
© Copyright 2008 V7 Inc
Powered by vBulletin
Copyright © 2000-2009 Jelsoft Enterprises Limited.


Search Engine Optimization by vBSEO 3.3.0 ©2009, Crawlability, Inc.