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

Customizing Header Background

Discussion in 'Styling and Customization Questions' started by Precision, Jan 28, 2012.

  1. Precision

    Precision Member

    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.
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

  3. Precision

    Precision Member

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

    Precision Member

    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?
     
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Admin CP -> Appearance -> Style Properties -> General -> Body
     
  6. Precision

    Precision Member

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

    Precision Member

    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?
     
  8. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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

    See my posts in this thread:

    http://xenforo.com/community/threads/background-opacity.22729/
     
  9. Precision

    Precision Member

    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...
     
  10. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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;
    }
    
     
  11. Precision

    Precision Member

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

    Jake Bunce XenForo Moderator Staff Member

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

Share This Page