vb.org Archive - (Creating styles) Background Image Question

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=253)

- - (Creating styles) Background Image Question (https://vborg.vbsupport.ru/showthread.php?t=263636)

HMBeaty

05-14-2011 04:52 PM

(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?

LifesGreatestGift

05-25-2011 05:15 PM

you would need to use javascript to accomplish this effect.

HMBeaty

05-25-2011 09:14 PM

Quote:

Originally Posted by TheWindows7Site (Post 2199878)

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%;

}

Lynne

05-25-2011 09:26 PM

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>

}

LifesGreatestGift

05-25-2011 09:27 PM

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.

HMBeaty

05-25-2011 09:30 PM

Quote:

Originally Posted by Lynne (Post 2199973)

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

All times are GMT. The time now is 04:21 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01074 seconds Memory Usage 1,726KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (2)bbcode_code_printable (2)bbcode_html_printable (2)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (6)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.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/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: