Go Back   vb.org Archive > vBulletin 4 Discussion > vB4 Design and Graphics Discussions
  #1  
Old 05-14-2011, 04:52 PM
HMBeaty's Avatar
HMBeaty HMBeaty is offline
 
Join Date: Sep 2005
Posts: 4,141
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default (Creating styles) Background Image Question

Hopefully this is something simple, but I'm playing around with some different style customizations and am curious to if the background image can be "stretched" to fit the members/users screen. Right now, I'm using images with a dimension of 1600x900 and obviously, on small resolution screens, some of that image would get cut off. So, is this possible to do? If so, how would I go about editing this?

--------------- Added [DATE]1305474564[/DATE] at [TIME]1305474564[/TIME] ---------------

Ok, I THINK I've basically narrowed it down to this:
Code:
.XXXXXXX
{
    background-image:url('images/mybgimage.jpg');
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
But how do I get it to work with the stylevar doc_background? Anyone know?
Reply With Quote
  #2  
Old 05-25-2011, 05:15 PM
LifesGreatestGift's Avatar
LifesGreatestGift LifesGreatestGift is offline
 
Join Date: Jul 2009
Location: Louisville, KY USA
Posts: 885
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

you would need to use javascript to accomplish this effect.
Reply With Quote
  #3  
Old 05-25-2011, 09:14 PM
HMBeaty's Avatar
HMBeaty HMBeaty is offline
 
Join Date: Sep 2005
Posts: 4,141
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by TheWindows7Site View Post
you would need to use javascript to accomplish this effect.
Not entirely true. You COULD do it using javascript, but I was aiming more at doing it with CSS, which I figured out how to do, placing this code in additional.css:
Code:
html {
    background-attachment: none;
    background-clip: border-box;
    background-color: #FFFFFF;
    background-image: {vb:stylevar doc_background};
    background-position: 0 0;
    background-origin: ;
    background-repeat: none;
    background-size: 100% 100%;
}
Reply With Quote
  #4  
Old 05-25-2011, 09:26 PM
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Location: California/Idaho
Posts: 41,180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Not sure why you have to add it when it's already there in vbulletin.css:

HTML Code:
html {
    background:{vb:stylevar doc_background};
    <vb:if condition="is_browser('opera') && $stylevar['textdirection'] == 'rtl'">
        overflow-x: hidden;
    </vb:if>
}
Reply With Quote
  #5  
Old 05-25-2011, 09:27 PM
LifesGreatestGift's Avatar
LifesGreatestGift LifesGreatestGift is offline
 
Join Date: Jul 2009
Location: Louisville, KY USA
Posts: 885
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I meant along the lines of using js to figure the users screen size, then assign a bg based on that so you wont be distorting the image.
Reply With Quote
  #6  
Old 05-25-2011, 09:30 PM
HMBeaty's Avatar
HMBeaty HMBeaty is offline
 
Join Date: Sep 2005
Posts: 4,141
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Lynne View Post
Not sure why you have to add it when it's already there in vbulletin.css:

HTML Code:
html {
    background:{vb:stylevar doc_background};
    <vb:if condition="is_browser('opera') && $stylevar['textdirection'] == 'rtl'">
        overflow-x: hidden;
    </vb:if>
}
No it's not. Not what I was trying to do anyway
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:15 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.03486 seconds
  • Memory Usage 2,202KB
  • Queries Executed 13 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)ad_showthread_firstpost
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (2)bbcode_code
  • (2)bbcode_html
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)option
  • (6)post_thanks_box
  • (6)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (6)post_thanks_postbit_info
  • (6)postbit
  • (6)postbit_onlinestatus
  • (6)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete