Please see the attached image. I have customized a theme. The problem is that when screen resolution is 1024x768, the banner fills the total space. But when I change my screen resolution to higher one, the image does not fill all the area. Rather it appears in lesser region as shown in image attached and white space appears there.
How can I manage that my banner fills total space of banner even when I change my screen resolution.
Thanks.
Hi,
I don't know of anyway of stretching the header to fill the screen if it is a graphic as yours appears to be - although I'm sure some of the others with more experience and better skills than me here do. Possibly by splitting the graphic into right and left sections with a repeated centre block to fill any space between them?
However, the simple trick I have used in the past is to make sure that the background colour for the header is set to match the background colour of the banner graphic. That way, even if the banner itself is not stretched, it doesn't stand out so much because the 'empty' space is filled with the same colour rather than white.
Richard
Hi Mahtab,
If you upload your banner here, or give me a link to your site I'll make you a background image to fill the space behind the banner. All you need in is a 1px wide strip taken from the end of your banner and made into a seperated image.
Then in the CSS write something like...
#header, #header-home { height: 100px; width: 100%; background: url(images/bground.jpg) repeat-x;}
#header h1, #header-home h1 {height: 100px; width: 100%; background: url(images/banner.jpg) no-repeat center top;}
#header, #header h1, #header-home, #header-home h1 {margin: 0; padding: 0;}
This will allow your header to hold the background image, and the header h1 element to hold your banner image, thus making it look as though the banner is stretching across the top of the screen whenever a higher resolution is used.
Hope this helps?
Mary
Thanks Mary for your advice, if you have a careful look at my banner, you would realize that this solution would not work. The banner has a white border line. If we just fill background with same color it will not look nice. Can you please suggest any remedy for this.
As-Salamu Alaykum Mahtab,
I've been working on an example banner for you so that I could show you what I mean. CLICK HERE to view this online at my website.
Hope this works!
Mary
Walaikum Assalam,
What should I say to express my gratitude. It is really awsome. Can you please tell me how can I do that?
Assalam o Alaikum Mary,
Thanks once again for your help. please visit www.getahelp.net to see current situation. background of center part is not appearing. The rest I hope is settled.
Walaikum Assalam,
Well the header is looking a little better, but not quite right yet.
I'm wondering now where you put the css. Looking at this in Firebug (Firefox add-on) there seems to be two, even three, instances of the page/header code i gave you. Could it be you added it twice more by mistake? Or could it be it is in two separate style sheets?
One set of code is cancelling out the other.
If you could delete the code you added and just add one set of the code to the bottom of styles_clouds.css that should get you back on track.
Hope this helps?
Mary
Hi Mentab,
Your site is looking better. I hope you got my message with directions to the download for the theme? I noticed an error in your footer.html which is stopping your footer from displaying. You added a html comment which is not allowed in PHP you need to just add // infront of the part you want to block out.
The css in the new download file has a couple of extra bits of code written into it to make the mini calendar display properly.
Mary
Assalam o Alaikum Mary,
With your generous help, I have done much better. But, as the issue is not completely settled, I am seriously looking to learn css. You can see that banner on right is not what should be there.
I have tried to edit the code this way and that but no success. Can you please suggest me, how can I learn css? and if you could provide me customized theme with all files, so I may just replace the theme folder totally.
I was aiming not to disturb you again and again but your message gave me courage to discuss it with you.
Thanks once again for the hint about comments in footer file.
With such a nice helping approach, I am sure that you are always under the blessings. Still I pray for even more blessings for you.
Assalamu alaikum wa rahmatullah,
I enjoy my work helping others. CSS is easy to learn, applying what you learn is more difficult as there are certain rules, which you tend to remember after you make mistakes!
There are lots of free tutorials on the WWW, lots of articles and books. I learnt quite a lot from following the tutorials HERE I also bought a book called CSS in 10 Minutes! by Russ Weekly and I have never looked back. I learn a lot from these forums too.
I sent you a private message but you may not have received it. Not to worry. You can download the zip file of the theme from HERE.
I gave it a new name so you can install it to your website in the normal way, then you can select it from Site Administration > Theme > Theme Selector.
I did notice too that the centre image was cut too short so some of the wording was missing. I have made a new one which is in the new zip file.
Let me know how you get on.
Mary