Customizing Header Background

[Precision]

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.

 

[Paul B]

http://xenforo.com/community/threads/header-image-full-width-with-stretch.11966/

 

[Precision]

Awsome, thank you so much. If you wanna delete this thread cause i'm retarded you can

 

[Precision]

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?

 

[Jake Bunce]

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

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

 

[Precision]

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.

 

[Precision]

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]

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:

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/

 

[Precision]

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]

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:

.bodyclass
{
	background-size: cover;
}

 

[Precision]

Sorry i dont really know anything about coding, etc. How would i go about finding the class? Sorry for bothering you about this.

 

[Jake Bunce]

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:



Then search the templates for that name:

Admin CP -> Appearance



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

.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).