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 »

Fit background across screen, regardless of screen size


  #1  
Old Dec 21, 2010, 10:28 AM
ameliecafe
 
20 posts · Mar 2010
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!
  #2  
Old Dec 21, 2010, 03:02 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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
__________________
~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.
  #3  
Old Dec 21, 2010, 03:37 PM
ameliecafe
 
20 posts · Mar 2010
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
Attached Thumbnails
Click image for larger version

Name:	aimeemainbg2.jpg
Views:	17747
Size:	209.7 KB
ID:	974  
  #4  
Old Dec 21, 2010, 03:51 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~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 Dec 21, 2010, 04:13 PM
ameliecafe
 
20 posts · Mar 2010
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.
  #6  
Old Dec 21, 2010, 04:15 PM
ameliecafe
 
20 posts · Mar 2010
Thank you for the help by the way!
  #7  
Old Dec 21, 2010, 04:33 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
The code using the html selector would go in 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.
  #8  
Old Dec 21, 2010, 05:25 PM
ameliecafe
 
20 posts · Mar 2010
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~!
  #9  
Old Dec 21, 2010, 05:55 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
I probably should have given you the full path which I usually do which is
ATO>Add HTML/CSS Inserts>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.
  #10  
Old Dec 21, 2010, 06:16 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
You could also try this http://forum.bytesforall.com/showthread.php?t=11763
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Blank Screen in IE and Header / Background Question (NOOB) Graytness Header configuration & styling 9 Sep 27, 2011 03:35 AM
[SOLVED] Background image auto resizing to screen marineceo Header configuration & styling 11 Apr 18, 2011 03:35 PM
[SOLVED] How add background color between container and borders LCD screen? mvheun Center area post/pages 4 Dec 13, 2010 04:37 AM
Trying to stretch logo area background color across the entire screen ssoszka Header configuration & styling 14 Oct 26, 2010 02:52 PM
Screen size changed automatically - how do I restore it IADDIC Page & Category Menu Bars 4 May 18, 2009 09:24 AM


All times are GMT -6. The time now is 01:56 PM.


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