Optimizing your WordPress Site: Simple Gradient Background Images and a Transparent PNG with Powerful Results

Here’s a nice trick a lot of web designers use to optimize performances on website elements which would usually implicate the use of a large or wide background image.

 

The Tradtionnal way for website backgrounds:

If you followed my tutorial on creating a Background image for your website then you may have asked yourself if that image size was a bit huge,while most people can now enjoy faster internet connection,you are right,your site speed is a primordial aspect of your visitor’s experience and will keep them coming and recommending you.

The other/old way was to plant a relatively big background image on the BODY or HTML tag.

The image had to be slightly painted on it’s contour to match the ‘color’ property of our BODY element so to make a seamless transition when scrolling down or scaling up screen resolution.The result was a rather huge image to deal with and compress or that had to be completely seamless,like most websites had back in 1998.You should avoid it unless your desired results do not fit with the following method.

Two Files are better than one:

The other, better way to use a Background image is to create your gradient at any pixel height and width.Once you are satisfied with your colors,reduce only the Image Width down to one(1) single pixel wide while preserving the height.

WordPress Specific Information

If you are a CSS or WordPress beginner,do NOT just go into the Appearance>Editor>header.php and style the html tag.Instead you should be looking for the html element inside the style.css or the active stylesheet of your theme and modify that.Always use CSS.

Now apply the gradient to the HTML element,x-repeat it and match the bottom-most color of the gradient.

html
{
background: url('images/mygradient.png') top center repeat-x #FFFFFF;
}

So that this:

Becomes this:

Okay,but where’s the other file?My website uses an image not just a gradient

It’s definitely boring to only use a gradient in background and that is not our goal either.Remember the second file?Your image will have to be a transparent PNG put on a another element,basically any of them.The BODY tag is a good candidate so that is what we will be using.

body
{
background: url('images/myTransparent.png') top center no-repeat transparent;
}


This should effectively add your transparent png to the Body element and display it in the center of the screen.

You can also use this on other types of images like decorations

Feel free to comment if I have missed something or ask questions.

Peace

Top

4 Responses to Optimizing your WordPress Site: Simple Gradient Background Images and a Transparent PNG with Powerful Results

  • DVD Image says:

    Woah! I’m really enjoying the template/theme of this website. It’s simple, yet effective. A lot of times it’s tough to get that “perfect balance” between superb usability and visual appearance. I must say you’ve done a superb job with this. Additionally, the blog loads very quick for me on Internet explorer. Exceptional Blog!

  • Charlie says:

    Superb ideas! I have been searching for anything like that for a while today. Excellent!

  • Wordpress Dev says:

    Helpful information. Lucky me I discovered your website by chance, and I’m shocked why this accident didn’t happened earlier! I bookmarked it.

  • Design Student says:

    Awesome those background images are really what maes a website wether it’s a wordpress bases or not.

    Good Job with the site layout too,it’s hard to get colors right like you do.

    Bye

    Nabil

Leave a Reply

Your email address will not be published. Required fields are marked *

Who am I

Hi my name is Stéphane,
I am a Digital Artist,Musician and Wordpress addict.I love creating compelling Wordpress themes that are visually tailored to my client's needs or previous HTML designs.Whether you want a Wordpress Blog to match your existing template or simply want a new custom Wordpress Theme just contact me I am meticulous and I love working with serious people with high requirements.

FaceBook

Copyright ©2011-2017 Intelligent Web Designer Wordpress Artist All rights reserved. Any redistribution or reproduction of part or all of the contents in any form is prohibited other than the following. 1)you may print or download to a local hard disk extracts for your personal and non-commercial use only, 2)you may copy the content to individual third parties for their personal use, but only if you acknowledge the website as the source of the material.You may not, except with our express written permission, distribute or commercially exploit the content. Nor may you transmit it or store it in any other website or other form of electronic retrieval system.

Privacy Policy XML-Sitemap