Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

Header Image & Screen Resolutions

Build custom WP THEMES, without
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
Old Feb 22, 2009, 12:27 PM
25 posts · Feb 2009
I'm not sure if this is possible, but I thought I'd ask...

Is there any way that you can set up say 3 image files in the folder with different pixel widths, so that the appropriate one is delivered to the viewer's browser.

What I had in mind was having 3 versions of the header with widths of 1280, 1024 and 800. If the system could deliver 1280 as default to the viewer's browser, but if it detected a screen resolution width of 1024 or 800px, then it would deliver the alternative image file as appropriate.

I understand about how images are cropped if they don't fit, but what I have in mind above would allow for a complete image to be delivered to suit the viewer's browser.

Thanks again, in advance.
Old Feb 22, 2009, 03:03 PM
Flynn's Avatar
3,768 posts · Oct 2008
Munich, Germany
You could turn off the regular header image at A. Theme Options -> Header and in header.php right after
PHP Code:
<?php bfa_header_config($bfa_ata_configure_header); ?>

HTML Code:
<img src="/wp-content/themes/atahualpa/images/header/<script type="text/javascript">document.write(screen.width);</script>.jpg alt="My site" />
and place 640.jpg, 800.jpg, 1024.jpg, 1152.jpg, 1280.jpg, 1440.jpg, 1600.jpg, 1680.jpg and 1920.jpg in

or to serve only for 800-1280 and use a default image "default.jpg" for smaller than 800 and bigger than 1280:

HTML Code:
<img src="/wp-content/themes/atahualpa/images/header/<script type="text/javascript">
if ((screen.width<800) OR (screen.width>1280)) { document.write('default'); }
else { document.write(screen.width); } </script>.jpg alt="My site" />
I'm not sure if this works, I'm not very fluent in Javascript


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] 2 little issues I'm having (no header image in firefox &amp; problem with page m andytaylor Header configuration & styling 3 Jun 8, 2009 03:14 AM
Image & Link in Sidebars stevemitch Sidebars & Widgets 2 May 11, 2009 11:11 AM
How do you get header Image(s) to automatically resize to the screen resolution? nkita Header configuration & styling 0 Mar 14, 2009 06:59 PM
Image distortion at high screen resolution bdisbrow Atahualpa 3 Wordpress theme 0 Mar 13, 2009 11:48 AM
Can't get logo and header image overlay to be centered on all screen resolutions jockoe Header configuration & styling 1 Feb 27, 2009 02:44 PM

All times are GMT -6. The time now is 01:28 AM.

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