Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

[SOLVED] css background image: a top image, followed by a tiled image?


  #1  
Old Nov 3, 2010, 04:05 AM
derekwbeck
 
151 posts · Nov 2010
I'm looking to make a tiled image that handles the body of the entire blog, which is basically a custom field with jagged edges (parchment). But the top image I want to use is also a part of the field, with a top jagged edge, to sit behind the blog's title image.

That is, I want to make:

<top image in background>
<repeating image that marries to above>

How do I do this?
  #2  
Old Nov 3, 2010, 04:39 AM
derekwbeck
 
151 posts · Nov 2010
Alternatively, I could change set my top backgroun image underneath my header image that includes my page's title. If I do this, how do I get the title/header image to be the width of the main body (and no gap left or right)... or, how do I determine the width of that gap to plan my images accordingly?
  #3  
Old Nov 3, 2010, 04:42 AM
juggledad's Avatar
juggledad
 
23,647 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
What version on atahualpa and wp?
What is the URL?
What have you tried?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Nov 3, 2010, 06:41 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Here is one method I have used. Just change the positions and repeats as required.

Place the code for one background image in ATO>Body, Text & Links>Body Style as outlined on that page. Set it to repeat-x and positioned at the top.

Now put the following code into the HTML/CSS inserts:

HTML Code:
html{background:#XXXXXX;background-image:url('http://Path_To_Image/bg-bottom.jpg');background-repeat:repeat-x;background-position:left bottom;}
This adds another background image to the html tag and positions it at the bottom. Put the background color in the html tag and remove it from the body tag.

Basically, You have one background image in the body set to repeat-x and positioned at the top and another in the HTML/CSS inserts:
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old Nov 3, 2010, 02:50 PM
derekwbeck
 
151 posts · Nov 2010
Hi lmilesw, and thanks. This works great. I had to adapt it slightly to my particular situation:

1) one blog-body-wide top image, not repeated, placed at top center (establishing a top edge of a parchment background). I put this code in ATO>Body, Text & Links>Body Style:

background: url(/blog/wp-content/themes/atahualpa353/images/parchment_top.gif) no-repeat top center;

2) repeating blog-body-wide tile images that repeat lengthwise (establinsing the left and right edges of a parchment background). I put this code into the CSS inserts section of the HTML/CSS inserts:

html {
background: #000066;
background-image: url('/blog/wp-content/themes/atahualpa353/images/parchment_center.gif');
background-repeat: repeat-y;
background-position: center;
}

This works fine, but one qwirk with repeat-y that I discovered... and I doubt there's a good fix:

repeat-y ignores any y-position I place with the background-position property. That is, if I put it as background-position: center 240px; (as the top image is 240px tall), the repeat-y ignores the vertical position and repeats the entire length of the page regardless, from top to bottom. What this means is: If I make the parchment tiles png's with nice transparent edges, then behind the edges of parchment_top, we can see the edges of parchment_center behind it.

The work around I'm using right now: not as elegant: is to not make the edges of the parchment transparent, but solid and matching the color I'm using for the blog background. This way, the edges behind parchment_top are now solid and cover the repeating parchment_center in the top region of the page.

Is there a way to control this repeat-y? Primarily, so that I can have better control over the background without returning to Photoshop.

You can see what I'm talking about at http://www.derekbeck.com/1775/ (still under construction)

I'm using WordPress 3.0.1 and Atahualpa 3.5.3.

Thanks,
Derek
  #6  
Old Nov 3, 2010, 02:57 PM
derekwbeck
 
151 posts · Nov 2010
I suppose what I really need is a way to force

html {
background: #000066;
background-image: url('/blog/wp-content/themes/atahualpa353/images/parchment_center.gif');
background-repeat: repeat-y;
background-position: center;
}

to begin 240px from the top... if that's possible.

Derek
  #7  
Old Nov 4, 2010, 11:59 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
I fiddled with this for quite awhile and couldn't get it to work either. It is good to note the the html tag is deprecated and CSS3 will let you add two background images but it will be awhile before it is well supported.

I haven't tested but it would seem like you could use a background images in the header, sidebars, center column, and footer to do what you want but getting them coordinated is kind of a pain. The html tag does seem to work if you use center bottom for a position but no repeat.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #8  
Old Nov 4, 2010, 12:57 PM
derekwbeck
 
151 posts · Nov 2010
Thank you again for your assistance, lmilesw. It is indeed quite a pain.

Bottomline for future readers: it isn't really possible, or if it is, it is so not straightforward that my option to not allow transparency is the best fix for now.

I was aware of the CSS3 feature, but as you say, we have some time before that will be in wide use, could be 5 years.

lmilesw, feel free to mark this thread as "solved".

Bookmarks

Tags
background, fixed header image, image

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Background image at top and bottom of site rosetrees Atahualpa 3 Wordpress theme 2 Sep 22, 2010 10:46 AM
[SOLVED] How to display an background image and two icons on top of it in a customhea dyuane Header configuration & styling 4 May 5, 2010 10:19 AM
How to move the layout container down to show some background image at the top? MikeG Header configuration & styling 3 Apr 1, 2010 06:32 PM
background image over-sized - Full Page Background Image prokopino Atahualpa 3 Wordpress theme 2 Mar 30, 2010 04:42 AM
Active page menu background image css help dixieprosser Page & Category Menu Bars 1 Mar 18, 2010 01:13 PM


All times are GMT -6. The time now is 11:27 AM.


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