• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Customizing Header Background

#1
I created a file to import for the Header (background), however, the problem I have is I don't know what to do to make it fit for all screen resolutions. For instance:

My picture is, lets say, 100 (h) x 1024 (w). It will fit good on a 1024 resolution screen, but if i make my screen resolution bigger, it just displays the image and repeats. How do i go about uploading a image to make it fit everyones screen?

** I kept an example of what i mean in my signature link.
 
#4
Is there one also for the body of the site? For instance, in my site, the grey background, i'd like to be an abstract image as well

Just need to know the file to edit, not sure the name of the .css file. Also, do i just copy and paste the code from the above link, and change the names of the images again?
 
#6
I have the flexile theme installed, so in my properties its in "Flexile Content Background" instead of "Body". My question is, as i learned how to change the Header (above), where would i have to go to make the image i upload for the background 'stretch' to fit everyones resolutions when they visit my website, instead of having it repeat.
 
#7
Also i wanted to make my content background (e.g. my announcement blocks, and recent thread block) like %50 transparent so you will be able to see the image, how would I go about doing that?
 

Jake Bunce

XenForo moderator
Staff member
#8
I have the flexile theme installed, so in my properties its in "Flexile Content Background" instead of "Body". My question is, as i learned how to change the Header (above), where would i have to go to make the image i upload for the background 'stretch' to fit everyones resolutions when they visit my website, instead of having it repeat.
Try this attribute:

Code:
background-size: cover;
This can be added to the Miscellaneous area of Body:

Admin CP -> Appearance -> Style Properties -> General -> Body

For reference:

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Also i wanted to make my content background (e.g. my announcement blocks, and recent thread block) like %50 transparent so you will be able to see the image, how would I go about doing that?
See my posts in this thread:

http://xenforo.com/community/threads/background-opacity.22729/
 
#9
The only problem i'm having is, there's no coding box for the Flexile Body property like there is for the Body template. All it shows for flexile body template is the Background color / image / repeat / position. Nothing else :(. So there's no box for me to enter the code (
background-size: cover; )
, i feel like i need to find the .css file and edit that, but i dont know which that is, and im scared to ruin something...
 

Jake Bunce

XenForo moderator
Staff member
#10
In that case you can use this template:

Admin CP -> Appearance -> Templates -> EXTRA.css

But you need to know the name of the CSS class:

Code:
.bodyclass
{
	background-size: cover;
}
 

Jake Bunce

XenForo moderator
Staff member
#12
Find the property name of the "Flexile Content Background" property that you mentioned. This should be listed in the Admin CP. For example, you can see the property name for the Page Width Controller is pageWidth:

Screen shot 2012-01-30 at 8.16.57 PM.png

Then search the templates for that name:

Admin CP -> Appearance

Screen shot 2012-01-30 at 8.19.22 PM.png

It will be in one of the .css templates. In this example we find this CSS definition using that name in public.css:

Code:
.pageWidth
{
	@property "pageWidth";
	margin: 0 30px;
	min-width: 940px;
	_width: 976px;
	_margin: 0 auto;
	@property "/pageWidth";
}
And the class name is .pageWidth (which happens to be the same as the property name in this case).