I was playing around with WordPress trying to create a theme where the blog posts would not use a lot of screen space. I wanted to keep the content and background (wallpaper) image centered on the screen no matter what size the browser window was.
This is fairly simple to do, after you take a few things into consideration.
If you plan to use a fixed width layout for the page’s content, you will want your background image to act as a frame for the content, and will most likely keep the overall width of the image small.
If you plan to use a fluid layout, (one that expands to 100% of the screen size), and plan to design for higher resolutions, (e.g.- 800×600, 1024×768 or higher), you can create an image that is 1600 pixels wide (or wider) and the same CSS will ignore the extra width that isn’t used. Be sure to keep the key elements of the design centered in the middle 800 to 1000 pixels.
Here’s a screen shot of the “virtual iphone” I wanted to create. It was done as a WordPress theme to create a micro-blog.
The CSS to center a background image is very simple:
body {
margin: 0;
padding: 0;
background: url(“/wp-content/themes/iphonesalesinc/bg-phone.jpg”) 50% 0 no-repeat;
color: #999999;
background-color: black;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 500;
}
The background selector basically say, “use the image bg-iphone.com as wallpaper, and postition it at 50% of the screen’s width and do not repeat the image“
The file bg-iphone.jpg is 800 pixels wide.. and didn’t even need to be that big.. it has some black border space around it. The rest of the body background gets filled with black based on the background-color selector.
To keep the content within the frame of the iPhone, I used the CSS overflow selector and set the width and height of the div where the blog posts appears.
#bod1 {
margin: 0;
padding: 0;
clear:both;
width: 350px;
float: left;
background: black;
text-align:left;
overflow: auto;
height:272px;
}
When a post is longer than the height of the div, the overflow: auto; selector puts up a vertical scrollbar.
The site is just a demo for now, but feel free to poke around and do a view source on the HTML, CSS and look at the images used to build the site.
Just for fun, I also used a Data Accordion script from DynamicDrive.com to add expand / collapse capability to the WordPress sidebar menu.
You can see it all in action at
NOTE #1: there are no iPhones for sale — it is a fictitious company… if anyone is interested in the domain name and web site for development, feel free to contact me.
NOTE #2: this site uses a custom WordPress theme so names for id’s classes, etc.. are not all standard WordPress CSS elements.