WordPress.org

Ready to get started?Download WordPress

Forums

Fluid Background (6 posts)

  1. cpokrywka
    Member
    Posted 3 years ago #

    Hello. I am trying to make the background of my WordPress site fluid.

    The URL for it is: http://www.stallionstudios.net

    I'm pretty sure it's just a couple of lines of CSS code I need to change, but I am unsure of where to start. I have read that themes need to be designed for either "fixed" or "fluid" in mind, but if you re-size the browser on my current blog a lot of the content is fluid already. I'm just trying to make the background fluid as well.

    Also, I am interested in moving my top menu bar where it says "Blog", "Contact Us", and "Meet the Team" over to the left a little bit so it is aligned with the "A" in the following line.

    Any help with these issues would be greatly appreciated! If you need to see any of my CSS files to assist me, please let me know and I will post it. Thank you.

  2. Joseph
    Member
    Posted 3 years ago #

    What do you mean by fluid background? Are you referring to your background image? If yes, you either have it repeat vertically or have it fixed so it scrolls with the page.

    A very common structure that people, including myself, use is to have three main <div> inside <body> (header, content and footer) and place everything inside them with all three having the same class="container" to set a uniform width as well as center align:

    <body>
    	<div id="header" class="container"><!--your header--></div>
    	<div id="content" class="container"><!--your content--></div>
    	<div id="footer" class="container"><!--your footer--></div>
    </body>
    body {
    	text-align: center; /* center align for older version of IE */
    }
    .container {
    	width: 1000px; /* unifrom width */
    	margin: 0 auto; /* center algin */
    }
  3. cpokrywka
    Member
    Posted 3 years ago #

    Thank you for your response Joseph.

    My goal is this: I want my background image (located at: http://www.stallionstudios.net/wp-content/uploads/2010/02/ssbackground11.jpg) to automatically scale to the size of the web browser. Right now the site is optimized and looks great at a 1920x1080 resolution, but say someone visits the site that has a 1024x768 resolution. When I adjust my browser to that width and height, the "Stallion Studios" banner and much of the right side of the image is cut off. I want the entire image to be able to be viewed in its entirety no matter the browser size.

  4. Joseph
    Member
    Posted 3 years ago #

    Have a look at these two articles at CSS-Tricks:
    How To: Resizeable Background Image
    Perfect Full Page Background Image

  5. cpokrywka
    Member
    Posted 3 years ago #

    Thank you again Joseph.

    Sadly, I am a complete noob when it comes to CSS or any other type of code for that matter. Where exactly would I put any of that?

  6. Joseph
    Member
    Posted 3 years ago #

    There are two techniques shown in the Perfect Full Page Background Image article. I'll show you both but each has it's own pros and cons. Note that I've never used neither of these techniques before.

    Both techniques only resize the background image larger but not smaller (it crops the image when the window is smaller than the image) therefore the image size should be the minimum browser window size that you want to accomodate for.

    Technique #1 is the more complicated of the two techniques and has the following bugs:

    In Safari 4 & Chrome, the min-height isn’t catching and doesn’t resize vertically to fit.

    Technique #2 is simpler and bug-free, however, the main content doesn't center in IE 7 and it doesn't work at all in IE 6.

    Technique #1

    <body>
    	<div id="cont"><!-- To make page scrollable -->
    		<!-- Put your usual HTML here -->
    	</div>
    
    	<div id="bg"><!-- For background image -->
    		<div>
    			<table cellspacing="0" cellpadding="0">
    				<tr>
    					<td>
    						<img src="images/bg.jpg" alt=""/>
    					</td>
    				</tr>
    			</table>
    		</div>
    	</div>
    </body>
    * {
    	margin: 0;
    	padding: 0;
    }
    html, body, #bg, #bg table, #bg td {
    	height: 100%;
    	width: 100%;
    	overflow: hidden;
    }
    #bg {
    	position: fixed;
    }
    #bg div {
    	height: 200%;
    	left: -50%;
    	position: absolute;
    	top: -50%;
    	width: 200%;
    }
    #bg td {
    	text-align: center;
    	vertical-align: middle;
    }
    #bg img {
    	margin: 0 auto;
    	min-height: 50%;
    	min-width: 50%;
    }
    #cont {
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 70;
    	overflow: auto;
    }

    Technique #2

    <body>
    	<img class="bg" src="images/bg.jpg">
    
    	<!-- Put your usual HTML here -->
    
    </body>

    You need to change min-width: 1024px; according to the size of your image.

    img.bg {
    	/* Set rules to fill background */
    	min-height: 100%;
    	min-width: 1024px;
    
    	/* Set up proportionate scaling */
    	width: 100%;
    	height: auto;
    
    	/* Set up positioning */
    	position: fixed;
    	top: 0;
    	left: 0;
    }
    @media screen and (max-width: 1024px){
    	img.bg {
    		left: 50%;
    		margin-left: -512px; }
    }
    div#content {
    	/* We need our content to show up on top of the background */
    	position: relative;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic