Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Multiquote (on) Multiquote (off)
Add Reply
Stretching Background Image
Topic Started: Oct 23 2011, 10:18 PM (2,365 Views)
cnm
Member Avatar
Infinite Diversity in Infinite Combinations
[ *  * ]
How do I set the background image so it fills the whole screen, instead of leaving margins on the sides? I've resized my background image numerous times (up to 2500px) and it still displays the same size in FF.

Thanks!
Edited by cnm, Oct 23 2011, 10:19 PM.
Offline Profile Quote Post Goto Top
 
cnm
Member Avatar
Infinite Diversity in Infinite Combinations
[ *  * ]
Is this a question better suited to the Resources board? I'm happy to go there if so. Thanks. :)
Offline Profile Quote Post Goto Top
 
Tom Gale
Member
[ *  * ]
So, you want your background image to resize based on the person's screen resolution? Seems to me the success of any solution is browser dependent.

My only suggestion is to have a repeating image of some sort. Probably not what you want though.
Offline Profile Quote Post Goto Top
 
cnm
Member Avatar
Infinite Diversity in Infinite Combinations
[ *  * ]
Tom Gale, I'm not sure. I've tried viewing it in three different browsers, and it's still showing up the same size, with margins on the sides, regardless of what size image I'm uploading.

Tiling won't work, I'm afraid. It's a large image. It's not the end of the world to have it with borders but it would look so much nicer if it stretched.

Unfortunately it's the kind of image that won't work with fading out the sides into a hex color. :/
Offline Profile Quote Post Goto Top
 
Tom Gale
Member
[ *  * ]
Which theme is it? The Buffy theme displays what I perceive to be properly.
Offline Profile Quote Post Goto Top
 
Pando-ZNS
Member Avatar
Member
[ *  *  *  * ]
Code:
 
background-size:100% 100%;
Add that to the CSS class (I'm assuming html,body). I'll warn you though, unless it's a vector (.svg file) it will become blurry, and it won't show in Firefox 3.6 and Internet Explorer 8 and below.
Offline Profile Quote Post Goto Top
 
cnm
Member Avatar
Infinite Diversity in Infinite Combinations
[ *  * ]
Thanks, Pando. I'll try it on my test forum and see how it displays.

Tom Gale, it's for a theme I'm working on that's not yet enabled Mountains theme. :)
Edited by cnm, Nov 13 2011, 07:46 PM.
Offline Profile Quote Post Goto Top
 
Kotton
Member Avatar
★ Career Criminal ★
[ *  * ]
sry for the bump, but I wanted to share this code.. it's by far the most effective

Spoiler: click to toggle

Code:
 
html {
background: url('your image url here') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

add that into the very top of your CSS (replace the 'html,' text with it, immediately before 'body')

it's per theme specific and works flawlessly
Offline Profile Quote Post Goto Top
 
cnm
Member Avatar
Infinite Diversity in Infinite Combinations
[ *  * ]
Works perfectly! Thank you so much! :D
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards - Theme & Code Support · Next Topic »
Add Reply