Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   [SOLVED] Background Image; Align Top Center Problems... (http://forum.bytesforall.com/showthread.php?t=15180)

Bubblefunk Aug 22, 2011 09:49 AM

[SOLVED] Background Image; Align Top Center Problems...
 
Hi there,
This is my first post. I have a problem in that I cannot get the background image to stay aligned to the center of the page and to the top of the page across the whole website.

I've checked the pages (refreshing the cache each time I make a change) in Firefox, Safari and Chrome and the background image seems to do different things in each browser and on different pages of the website.

Is there a CSS insert or something I can use to make the background image universally the same on all pages in all browsers?

I also would like to align the main body flush to the top of the page (which shows up ok in some browsers and on some pages but not on others).

Pages so far:
http://www.bubblefunk.com/Wordpress/dj_music_biog/
(page aligns to top perfectly but not to center - also image repeating down has been truncated)
http://www.bubblefunk.com/Wordpress/...y/dance-music/
(Page align center ok, but image is truncated at the top)
http://www.bubblefunk.com/Wordpress/...ornia-soul/37/
(Page Aligned to center ok but body is not flush to the top of the page)

Current Body Style html:

background color: #D2FFF0;
background: url(/Wordpress/wp-content/themes/atahualpa/images/BG_Lounge_DJ_House_Chillout_DJs.jpg) aligntop center no-repeat;
font-family: arial, helvetica, sans-serif;
font-size: 16px;
line-height: 1.4;
padding-top: 0px; padding-bottom: 0px;
-moz-border-radius:7px;
-khtml-border-radius: 7px;
-webkit-border-radius:7px;
border-radius: 7px;

What I'm ideally looking for: (Universally across the website:)
Body & Background Image to Align flush to the top of the page.
Repeat Background Image down but not across.
Setting the background color so the background image will match.

(PS; I realize the images are large with slow download - I will change this).
Any help would be appreciated,
Many Thanks,
James.

juggledad Aug 22, 2011 10:09 AM

It looks like you don't have the 3.6.7 PATCHES applied. Here are the links.
  • PATCH 367-01: Odd effects when 'CSS: Compress' = 'Yes'
  • PATCH 367-02 is incorporated in PATCH 367-04
  • PATCH 367-03: PHP errors when adding widget areas in index.php
  • PATCH 367-04: Hovering over a Post/Page title only shows "Permanent Link to"
  • PATCH 367-05: Site Title appended after the 'WordPress SEO by Yoast' title

Bubblefunk Aug 25, 2011 06:32 AM

Hi Juggledad,
Many Thanks for the update patches. I've applied all of them.

I now cannot see the background image at all. The code remains the same as above for the body style html and the image file in the same place, which I've double checked.

I'm stuck and don't know what to do.

Any help would be gratefully received,
Thanks in advance,
James.

SharonJ Nov 18, 2011 05:09 PM

Atahualpa 3.6.1, this worked

body
{
background-image: url("http://skookumheritagechurch.ca/body-bg.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
width: 100%;
}

Atahualpa 3.7.1 this has the same problem as bubblefunk
body
{
background-image: url("http://haropacific.com/background.jpg");
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed;
width: 100%;
}

Juggledad, do I do the 3.6.7 patches to 3.7.1?

Thanks!

juggledad Nov 18, 2011 06:18 PM

Quote:

Juggledad, do I do the 3.6.7 patches to 3.7.1?
nopem there are currently no patches for 3.7.1

SharonJ Nov 18, 2011 08:29 PM

Atahualpa 3.7.1
body
{
background-image: url("http://haropacific.com/background.jpg");
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed;
width: 100%;
}

Well, then what must I do to make the image vertical align to to the top?

I am thunder-struck...happens quite frequently , actually!!

juggledad Nov 19, 2011 04:30 AM

lookup the 'background-position' syntax ;)

SharonJ Nov 19, 2011 09:57 AM

You are a genius. I had assumed that background-position was only for left/center/right but once I changed it to 'top' it worked like a charm. Thanks again.


Issue resolved.


All times are GMT -6. The time now is 09:42 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.