WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Scalable / Flexible Background that Looks Good in All Browsers (4 posts)

  1. Aaress
    Member
    Posted 2 years ago #

    Hi,

    I'm working on customizing the Shelf theme (http://demo.thethemefoundry.com/shelf-theme/), and I'd like to replace the texture.png background with a full-sized image. However, I've run into a roadblock for how to make it look good in all browsers.

    For example, if I get it right on my laptop which has a resolution of 1440x900, the background then looks bad on my iPad and completely covers up the shelf.

    Is there a way to make it scalable, where it will display correctly on all browsers? I sincerely appreciate the help!

    Here's the current CSS:

    body {
    	font-family: Helvetica, arial, sans-serif;
    	font-size: 12px;
    	line-height: 1.6;
    	-webkit-font-smoothing: antialiased;
    	text-rendering: optimizeLegibility;
    	background-color: #dedfda;
    	background-image: url(../images/texture.png);
    	background-repeat: repeat;
    	color: #333;
    }
  2. Rachel Baker
    Member
    Posted 2 years ago #

    Chris from CSS Tricks has a great post on how to do this with CSS: http://css-tricks.com/3458-perfect-full-page-background-image/

    You can use CSS3 and the HTML tage (instead of body) to stretch the background image, but it will only work in modern browsers.


    html {
    background: url(../images/texture.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    ...or you can use the CSS #2 method as shown with source code here: http://css-tricks.com/examples/FullPageBackgroundImage/css-2.php

  3. Aaress
    Member
    Posted 2 years ago #

    Rachel,

    The first method worked great. Thanks so much!

    Kind regards,

    Aaress
    http://www.needgod.com

  4. timlem
    Member
    Posted 2 years ago #

    Where do I put that code for option #1? I did it and the background is being covered up by another background in wordpress. You can see the image at the bottom.

    http://www.cityinvasions.com/new/

    I need to get this site up today if any chance of some replying quick that would be awesome!

    Thanks,

    Tim

Topic Closed

This topic has been closed to new replies.

About this Topic