hi
you have the background image assigned in two classes, post and post_alt. On posts that are in both classes its displaying twice
try putting the background image on class maincol instead
you will probably need a repeat-y
instead of center center, use percentages – start with 30% 0% (first is horizontal, second vertical) and adjust as needed
Thanks, stvwlf.
I tried what you suggested, commenting out the code in post and post_alt, then putting it into maincol.
The result was that the image spread across most of the page, encompassing the area where the navbar should be & kicking the navbar down to below the last post.
Played with percentages, too, instead of center; center, played with the repeat setting, with no satisfactory results.
I can definitely see, now that you point it out, I cannot have the same code in this case, in two classes, and I think you’re right, it should go into the maincol class. I’m just unsure of what settings to tweak there so that the image displays only once and the navbar stays where it should.
Wish I could find an example of how this is being used successfully somewhere, so that I could look at the CSS there. So far, no luck on that.
Can anyone else offer any suggestions?
Thanks.
update: figured out why the navbar was moving. I was replacing the entire contents of the maincol class with the code I currently have in post.
Still trying to tweak the settings on getting the image to display correctly, though, and any feedback is welcomed.
Hi
you are missing “repeat-y” on the background image. The default is repeat vertical and horizontal unless you specify otherwise. If you only want the image once horizontally, add repeat-y which will only repeat vertically
background: url(.....) repeat-y % %;
I got the image to display in the center horizontally by setting the first % to 40%
The problem you are having is the image is under 400 pixels wide and the content area is wider than that. The background of the image is a different color than the background of the post, so there will be a stripe of a different color on either side of the image in the center.
You need to do one of these:
1) create the image as wide as the post content area
2) change the background color in the post area to the image background color
3) create the image with a transparent background color, and save it as a PNG, which will let the post area background color shine through the parts of the image that are not the tree
4) create the image with a background color the same color as the post background
stvwlf, you’ve been most helpful. Thank you for your time.
Turns out WP was resizing the image when I upped it. I never looked @ image properties once I upped it to WP, but after reading your post, I figured, “why not?” and had a look.
The 538px image that I uploaded had been resized by \wp to 248 (I think) or something like that.
I uploaded the image to a different hosting site and used *that* one, and, voila, things display as I’d intended.
For reference, the code that worked with the correctly sized image (538px) is below.
Thanks again, stvwvlf.
.maincol{
float: left;
width: 538px;
text-align: left;
vertical-align: top;
background-color: #f6fbe5;
background-image: url(http://farm4.static.flickr.com/3315/3544403847_7e7e3f0537_o.jpg);
background-repeat: y;
text-align:left;
background-attachment: fixed;
background-position: 40% 0%;
}
