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 { 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; |
1 Attachment(s)
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; HTML Code:
html { |
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 |
You could also try this http://forum.bytesforall.com/showthread.php?t=11763
|
All times are GMT -6. The time now is 01:19 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.