Dreevoo.com | Online Learning and Knowledge Sharing
Home | Programs | Programming languages | HTML | A fake gradient website background with CSS
Click to view your profile

A fake gradient website background with CSS

You will learn how simple it is to apply a gradient background created using Photoshop or Gimp to a website using CSS.

  Author: mat | Version: | 21st August 2013 |  

Using your favorite web code editor such as Notepad++ or Adobe Dreamweaver, create a new style.css document and enter/paste the following code:

    background: url('gradient_background.jpg');
    background-size: 100% 100%;
    background-attachment: fixed;

Where gradient_background.jpg is an image you want to use for a gradient background.

To create your own gradient background image I recommend one of these two tutorials:


In the index.html document enter the following code before the </head> tag:

<link rel="stylesheet" href="styles.css" />

Make sure you save the index.html, styles.css and your background image in the same folder on your web server, otherwise you will need to change the paths in the code.

Also recommended:


Click to see or download my fake gradient background web page and you can also download the styles.css file from this tuts.

In case of any questions or to let me now it worked or didn't work for you simply drop me a comment.

  Please login to post a comment
  Click to open user profile  
thefansbuzz, 19th Feb 2023, 7:32 PM
Cheap SMM Panel Social Media Marketing is a huge field with a lot of competition. If you want to stand out from the crowd, you need to know how to find ways to make your content go viral. If you are interested in using social media to market your product, this service is perfect for you. The panel gives you access to hundreds of different social media sites, so that you can find new ways to market your business. Visit our website at: https://thefansbuzz.com/
online learning made for people