Wordpress Themes - WP Forum at BFA - Fit background across screen, regardless of screen size

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)

- - Fit background across screen, regardless of screen size (http://forum.bytesforall.com/showthread.php?t=11838)

Fit background across screen, regardless of screen size

Here is the site I'm working on: http://blog.aimeenez.net/
Atahualpa Version: 3.4.9

I'm designing this for a friend. She said that on her gigantic imac screen, the peacock on the left shows up on the right side of the screen as well -- that is, the background is tiling horizontally (the peacock is only supposed to show on the left side.)

I tried to look for a solution to this and found a suggestion to paste these lines in:

HTML Code:

html {

        background: url(images/bg.jpg) no-repeat center center fixed;

        -webkit-background-size: cover;

        -moz-background-size: cover;

        -o-background-size: cover;

        background-size: cover;

}

I put them into the ADD HTML/CSS INSERTS section, but my friend tells me that the repeating problem is still there. Am I supposed to paste the code somewhere else?

Is there any line of code I can put in that will stop the background from tiling horizontally, regardless of screen size? I'd like it to simply fit across the whole screen or resize itself or something.

I have no problem with the background tiling vertically, especially since some of her pages are longer than the backgrounds actual dimensions.

Thanks for the help!

I would take out the code you have for the background and put the following in ATO>Body, Text & Links

HTML Code:

background: #F0F0D8 url(/wp-content/themes/atahualpa/images/peacockfade.png) no-repeat center center fixed;

To reduce page load time you could also reduce the dimensions of the peacock by cropping the bottom and right blank area of the image. You could further reduce the size by saving it as a jpg with a background of #F0F0DB

Hello,

Thank you for the response. Actually, the lines of code you pulled are from the current background, which I've changed since I posted this question.

What I've basically done is separate the peacock as a transparent png and repeat that vertically. I made the background a plain, beige color.

However, what I really wanted was for the background to have a pattern, not simply plain, with the translucent peacock image over it. I wasn't able to achieve this, unfortunately. I've attached the original wallpaper. It shows exactly how I want the background of the site to look.

I thought of layering two backgrounds over each other -- have the pattern tile xy and the peacock tile only y and fixed to the left. But apparently, you can't do that? I did find this "parallax" article, http://thinkvitamin.com/design/how-t...rallax-effect/ but I'm not sure if I'll be able to implement it...it looks difficult :(

In that case I would add the peacock background code to ATO>Body, Text & Links as follows.

HTML Code:

background: url(/wp-content/themes/atahualpa/images/peacockfade.png) no-repeat top left fixed;

Then change the code you have to the following using a tileable background pattern image that you like.

HTML Code:

html {

background: url(/wp-content/themes/atahualpa/images/background_pattern_image.jpg) repeat top left fixed;

}

I would also still crop the bottom and right from the peacock image to reduce its file size.

Should I put those lines of code in the same box?

Or place the second lines in the ADD HTML/CSS INSERTS section?

I've tried both ways and it didn't work.

Thank you for the help by the way!

The code using the html selector would go in CSS Inserts.

Thank you for the response~

I added it to "html inserts: body top" but the code simply appears at the top of the webpage -- literally spelled out. You can see it: blog.aimeenez.net

I also tried adding it to "html inserts: body bottom" but the same thing happens, just at the bottom.

I'm sorry to cause you so much trouble~!

I probably should have given you the full path which I usually do which is
ATO>Add HTML/CSS Inserts>CSS Inserts