Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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

[SOLVED] Full-screen footer and full screen header


  #1  
Old May 18, 2013, 01:23 PM
Carme
 
60 posts · May 2012
Brighton
Send a message via Skype™ to Carme
Hi,
I want a full screen background fixed on the top of the site and for that I added in ATO-Body, Text & links, Body Style this:
background: url("/images/1.png") repeat-x fixed left top transparent;


and I want a full screen background for the footer as well and I added in ATO-Add html/css inserts, in CSS inserts this:
body{
background: url(/images/footer.png) repeat-x left bottom transparent;

}

When I added the second one I lose the fixed background and the top of the site is not a full screen anymore.

I am making sense?
I would like to be able to have a header full screen fixed and a footer full screen.
Any help would be greatly appreciated.

link: http://carme.karmeba.com/

Carme
  #2  
Old May 18, 2013, 03:01 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
I am guessing you mean full width not full screen. There is a thread in the FAQs that deals with this.
__________________
~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 May 18, 2013, 04:24 PM
Carme
 
60 posts · May 2012
Brighton
Send a message via Skype™ to Carme
Thanks for the answer, I have done that already and it doesn't work for me


I added that in Body Text:
background: url("/images/1.png") repeat-x fixed left top transparent;

and that in Insert CSS:
body{
background: url(/images/footer.png)
repeat-x left bottom transparent;

}

and when I added the second background the first one disappears.
I try with the code from the Thread you pointed me, but it makes things worse, the first background disappears and made the footter fixed and I don't want that.

I can't see where I make the mistake.

Any suggestion!

Thanks in advance
Carme
  #4  
Old May 19, 2013, 02:19 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
  • What is the physical size of the background images
  • What "images" folder did you put them in
__________________
~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 May 19, 2013, 03:05 PM
Carme
 
60 posts · May 2012
Brighton
Send a message via Skype™ to Carme
Hi,
1.- the background I added in Body Text is 1260width x 863 height ( I wanted to cover the whole page).
and the one from the footer is 1300width x 135 height

2.- The "images" folder is the one I created just near wp-admin, wp-content, etc.. I am always creating my own images folder in this way.

Carme
  #6  
Old May 19, 2013, 03:12 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
You can't have two background images if one of them is sized to cover the full area. You use one for the top, one for the bottom and one background color. Here is a site i did that used that technique.
__________________
~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.
  #7  
Old May 19, 2013, 03:37 PM
Carme
 
60 posts · May 2012
Brighton
Send a message via Skype™ to Carme
Yes, it makes sense.
But still it doesn't work for me, I changed the header background for a 1260width x 135 height and it doesn't work

I wonder if it's because i am using a fixed one on the top?
  #8  
Old May 19, 2013, 08:21 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
This is where you will need to play with Firebug and try various things.
__________________
~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.
  #9  
Old May 20, 2013, 06:00 AM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
Quote:
Originally Posted by lmilesw
You can't have two background images if one of them is sized to cover the full area.
Hi Larry, I believe you can have more than two background images, as long as you layer them correctly. If one of them is to cover the whole area, you need to make sure you put it at the bottom.

For instance on my website I use this CSS in Body, text and links
Code:
background: url("/images/personal-website-design-brighton-sussex.png") top left no-repeat,
 url("/images/personal-website-design-brighton-sussex-header.png") top left repeat-x,
 url("/images/personal-website-design-brighton-sussex-footer.png") bottom left repeat-x, 
url("/images/noise.png") repeat;
  1. 1st image is my logo on a transparent background, to ensure this always stays in the top left corner
  2. 2nd image is my header image which is repeated at the top to the left to accommodate all screen sizes (although not perfect on very large screens, I am happy with it)
  3. 3rd image is my footer which is repeated at the bottom and to the left to do the same as the header
  4. 4th lastly is my background noise image to slot in below all the other images

The only flaw with this is that it doesn't work in IE (as always), because IE only allows one image per CSS selector, so it would only show the top one (in my case the logo and my website would have a white background).. to get around that I have put the following in my HTML Inserts: Header
HTML Code:
<!--[if lt IE 10]> <link rel="stylesheet" type="text/css" href="/ie8.css" /> <![endif]-->
(For those who don't know: this means for IE lower than IE 10, please use this style instead.)
in the separate stylesheet I have used the following CSS:
Code:
body {
    background: url("/images/personal-website-design-brighton-sussex-header-logo.png") repeat-x scroll left top !important;
}

html{
	background: #ccc url('/images/personal-website-design-brighton-sussex-footer.png') repeat-x scroll left bottom !important;
	z-index: 2 !important;
}
This is a different header image that includes my logo in the left in the body and a grey background and footer image in the html. I used z-index 2, because otherwise it wouldn't show

Rather than using a separate style sheet, you could also put this in your HTML Inserts: Header
Code:
<!--[if lt IE 10]> 
<style type="text/css">
<!--
body {
    background: url("/images/personal-website-design-brighton-sussex-header-logo.png") repeat-x scroll left top !important;
}

html{
	background: #ccc url('/images/personal-website-design-brighton-sussex-footer.png') repeat-x scroll left bottom !important;
	z-index: 2 !important;
}

</style>
 <![endif]-->
I hope that makes sense and would help someone else trying to do the same!
__________________
my website www.marolinedesign.com

Last edited by juggledad; May 20, 2013 at 06:33 AM.
  #10  
Old Nov 10, 2013, 03:00 PM
Harald
 
72 posts · Mar 2010
Thanks for your input. It worked great, and solved my problem. Liked your website too.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Footer Widget and Screen Resolution arntxee Sidebars & Widgets 1 Dec 21, 2012 08:45 AM
Fit background across screen, regardless of screen size ameliecafe Header configuration & styling 9 Dec 21, 2010 06:16 PM
[SOLVED] How to have a full-screen bottom bar with fixed-width website FineDesigns Header configuration & styling 1 Jul 7, 2010 01:15 PM


All times are GMT -6. The time now is 11:02 PM.


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