How to Format Your Website Background to Make It Way Cooler

125

CSS has come a long way and today we can talk of unique features for your website like a background with fixed changing pictures. This is cool effect to have especially when the online visitor is browsing one page to the next. Without further ado, here is how you create such a background in HTML.

This works best if your WordPress theme has a parallax effect scrolling. You are also going to need CSS and jQuery for this tutorial.

The Markup

First you need the base HTML structure from where you will start building the effect. Begin with the header section which will be the main slide. From here you add sections using the classes background-fixed and the img-(nth). The latter will house the image set.

We then use the ‘id’ number to set four section encompassed by one header. See the code below:

Now to create the div that will house the main content, an image within it and h3 and p tags. The image will be under the class hide because it will only show in small devices. This background effect works better on larger screens. Below is the final code:

Navigation

This is created using a none order list containing id for the nav. Every list in this div will contain a section number id and a class scroll which will be used later in jQuery. The code comes before the markup:

CSS

We begin with the general styles, the body and hmtl should both have a height of 100%. The body will further have a header and h1 header in generic style. Here we use the hide class once more for crop images; this hides them for later viewing on smaller devices.

The PNG image element, in the code above, should go to the right of folder where its position will be fixed.

Background

Use a generic style on the h3 tag; this is the title and paragraph tag too. To make the h3 tag more appealing, set a border white to it. Each background image will have a different color as well; important because it will be used Later when coding for smaller devices.

Now we add basic codes styles for the footer. Below is what you should have:

Coding for Small Devices

The fixed effect only works in big screens thus it has to be hidden when the website is viewed on smaller devices. Below is the how you make this change for smaller devices.

JQuery

Adding jQuery is for the purpose of making the circle navigation, on the right of the screen, work. The jQuery comes under our <script> tags. Will further use click function, scrollTop function and offset function to finally get the scrolling effect working.

That’s it, you now have the basics of how to achieve the background fixed effect on your website.

You might also like More from author

Comments

Loading...