Problems with styling

[raytrails]

I want to have one huge background picture from the top, filling at least half the screen downwards and fading into the background. How can this be accomplished? I have spent two hours adjusting the @html and @header to correspond, but it refuses to play with me. They just doesn't want to match up. Any help would be appreciated.

 

[Jake Bunce]

Specify a background image for this style property:

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

In the same area, you may wish to set a position for the image so it starts below the header background, like this:



Or you can remove the header background by editing this style property and setting a transparent background:

Admin CP -> Appearance -> Style Properties -> Header and Navigation -> Header



This is the result:

 

[raytrails]

That's excellent! Just what I wanted thanks, Jake

 

[fredrikse]

One additional question. What size should the background be in to fit different resolutions?

 

[Jake Bunce]

One additional question. What size should the background be in to fit different resolutions?

Try using this attribute in Body (where the background image is defined):

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

 

[erich37]

do you have a suggestion of how big the size of the background-image should be?
I have seen some pages with bg-image, and then when looking at the image itself, the browser is showing a "+" and "-" (minus sign) to zoom the image in and out.
Not sure how this is accomplished.

Could you please give a suggestion of how many Pixel the image should be in size? So that it fits to different screen-size resolutions, but still loading fast....

Many thanks?

 

[Jake Bunce]

do you have a suggestion of how big the size of the background-image should be?

You are optimizing for the screen sizes of your users. For computer monitors 1024x768 is a good minimum size to shoot for.

 

[fredrikse]

I want to accomplish what I have sketched down in the picture below. What elements are involved in getting this done the right way? Do I for instance need to split the graphics in different files?

 

[Jake Bunce]

This should help:

http://xenforo.com/community/threads/problems-with-styling.21415/#post-270982

 

[fredrikse]

This should help:

http://xenforo.com/community/threads/problems-with-styling.21415/#post-270982

Is this background for this example fading from top to bottom like in my example?

 

[Jake Bunce]

Is this background for this example fading from top to bottom like in my example?

Nope. I recommend making the fade part of the image.

 

[fredrikse]

OK. What I would like to achieve is to have a top part image including the face into for example the blue color at the bottom, which is a solid color set in Xenforo. Do I put the faded picture in the header with a height that I like?

 

[Jake Bunce]

Based on your picture, I think you want to put the faded image into the Body as shown in my post.

 

[fredrikse]

Alright. I think I have managed to come up with something that works pretty good (with a few minor issues to sort out). I have put the image as a background in the body. The settings used are as follows:



Now to my issues. When the page is long enough, the background is stretched out normally as in the picture below:



But when I for instance go to the help page, the page is to short and something happens to the background. It does not stretch out as good as before in the dark blue color which I use for the background:



How can I solve this?

 

[Jake Bunce]

Try putting the background in HTML instead of Body, and give Body a transparent background. That should make it fill the height of the window regardless of the content.

 

[fredrikse]

Try putting the background in HTML instead of Body, and give Body a transparent background. That should make it fill the height of the window regardless of the content.

Thanks for the advice! I'll try it!

 

[fredrikse]

Awsome! It worked like a charm

 

[fredrikse]

It's all starting to come together now. One thing I wonder now is if it's possible to extend the blue line (below the light blue part in the top forum section) to the left and right and to make it follow the bottom of the white header part?

 

[Jake Bunce]

It's all starting to come together now. One thing I wonder now is if it's possible to extend the blue line (below the light blue part in the top forum section) to the left and right and to make it follow the bottom of the white header part?

View attachment 33506

I think you want to set a background position as shown in my previous post:

http://xenforo.com/community/threads/problems-with-styling.21415/#post-270982

 

[fredrikse]

I think you want to set a background position as shown in my previous post:

http://xenforo.com/community/threads/problems-with-styling.21415/#post-270982

What is "0px 127px" doing for the background?