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 »

[SOLVED] Background image auto resizing to screen


  #1  
Old Apr 10, 2010, 11:24 AM
marineceo
 
18 posts · Oct 2009
I would like to find a way to used a fixed background image that automatically resizes to the screen (browser window).

I have tried a bunch of different css and html in different areas.

I must be missing something. I see it on other sites.

I want to put an image of something on each side of the content area (currently set at 85% screen width) that is fixed and positioned correctly regardless of browser window size.

Thanks everyone.
  #2  
Old Apr 10, 2010, 12:35 PM
lambdaka's Avatar
lambdaka
 
94 posts · Apr 2010
France
Hi,
apparently u can't do a background resizable for the moment (will have to wait for css3)
I manage to do it with this code
CSS
Code:
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
#arriere {
	/* l'image occupe toute la place du body */
	width : 100%;
	height: 100%;
}

HTML
Code:
<img id="arriere" alt="" src="image.jpg" />
after that you will be able to add text or whatever u want with a div in position:absolute;

hope will help !
  #3  
Old Apr 11, 2010, 06:01 AM
juggledad's Avatar
juggledad
 
23,569 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
yes it is possible. Lets say you put your image in wp-contents/uploads and it is called bg.jpg, you will add the following to ATO->Add HTML/CSS Inserts->HTML Inserts: Body Top
HTML Code:
<img src="./wp-content/uploads/bg.jpg" class="bg" />
and then add this to ATO->Add HTML/CSS Inserts->CSS Inserts
HTML Code:
img.bg {
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 1024px;
	
	/* Set up proportionate scaling */
	width: 100%;
	height: auto;
	
	/* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;
}
div#container {
	/* This is the only important rule */
	/* We need our content to show up on top of the background */
	position: relative; 
}
neat little trick some guy came up with.

No guarantees it will work in all cases - this will cause the image to show behing the contents aslo, if you want the image to be hidden behind the container, add 'background: #ffffff;' to the container css.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Apr 11, 2010, 12:47 PM
cvan
 
67 posts · Aug 2009
How would I take a smaller background image and repeat it all over the page?
Thank you
  #5  
Old Apr 11, 2010, 01:03 PM
cvan
 
67 posts · Aug 2009
Nevermind...it was more simple than I thought. Just uploaded the image and went to body, links, text. Thanks
  #6  
Old Apr 12, 2010, 05:17 AM
marineceo
 
18 posts · Oct 2009
Juggledad,

Thanks I tried that but interesting problem occurred that I could not work around. The header which I have in "HTML Inserts: Header" and the footer which I have in "HTML Inserts: Body Bottom" end up behind the background image. The site is societypagemag.com.

Thank you very much.

Chuck
  #7  
Old Apr 12, 2010, 07:14 AM
juggledad's Avatar
juggledad
 
23,569 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Whatis the URL?
What did you put in those areas?
Try adding a z-index
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Mar 25, 2011, 06:22 AM
superheadline
 
2 posts · Jan 2011
Adding a lower z-index to "img.bg" and a higher one for "div.container" fixed it for me.

cheers,
superheadline.net
  #9  
Old Apr 15, 2011, 05:27 PM
Webmason's Avatar
Webmason
 
69 posts · Feb 2009
Minneapolis, MN USA
Greetings,

This code worked like a charm for me... well at least for the home page. Trouble I'm having is, any other page I click to just has a white background. Did I miss something?

Thanks,
Tom
  #10  
Old Apr 15, 2011, 09:22 PM
juggledad's Avatar
juggledad
 
23,569 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
what is the url?
What did you add - exactly?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Apr 18, 2011, 04:22 PM
Webmason's Avatar
Webmason
 
69 posts · Feb 2009
Minneapolis, MN USA
Ok, I'm still trying to nail this issue down. I have noticed that the url's that are not showing the background are in the categories.

For example:

http://domain.com/site/learn - The background shows.

http://domain.com/site/category/learn - No Background

Also no background on individual posts.

Does this help at all?

Tom
  #12  
Old Apr 18, 2011, 04:35 PM
Webmason's Avatar
Webmason
 
69 posts · Feb 2009
Minneapolis, MN USA
Ok, it is fixed. I decided to us the whole URL of the image as opposed to relative. That did the trick.
Thanks!

Tom

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Automatic resizing of the header image yiorgos Header configuration & styling 50 Jan 12, 2011 05:59 PM
Sidebar Image Resizing baskenburg Sidebars & Widgets 1 Apr 17, 2009 06:49 PM
How do you get header Image(s) to automatically resize to the screen resolution? nkita Header configuration & styling 0 Mar 14, 2009 07:59 PM
Image distortion at high screen resolution bdisbrow Atahualpa 3 Wordpress theme 0 Mar 13, 2009 12:48 PM
Header Image & Screen Resolutions HalfWayThere Header configuration & styling 1 Feb 22, 2009 04:03 PM


All times are GMT -6. The time now is 09:48 AM.


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