HTML/XHTML:CSS Techniques:Gradient background

From virtualMV2015wiki
Jump to: navigation, search
 Home  HTML/XHTML <

Objectives

To create a gradient filled background

XHTML CSSGrad.png

Create a gradient strip

In image in a drawing program create an image that is say 20 pixels wide and height of 450px e.g. BackGradientGreen.png (in downloads below)

Tip make sure the final fill colour is the same as your default background colour (in the example this is white) that way it will always look right no matter what height the browser is set to.

Add the following style

<style type="text/css">
body {
  background-image: url('BackGradientGreen.png');
  background-attachment: fixed;
  background-repeat: repeat-x;
 }
</style>

Notes

background-attachment (Refsnes Data, 2008)[1]

  • Scroll: Default. The background image moves when the rest of the page scrolls
  • Fixed: The background image does not move when the rest of the page scrolls

References

  1. Refsnes Data(2008).CSS background-attachment Property. Retrieved November 15, 2008 from http://www.w3schools.com/Css/pr_background-attachment.asp

Downloads

Green Blue Fuschia Grey (Right click and save to your drive)

BackGradientGreen.png XHTML CSSBackGradientBlue.png XHTML CSSBackGradientFuschia.png XHTML CSSBackGradientGrey.png

Icon References.png References


HTML/XHTML:CSS Techniques:Gradient background. (2017). In virtualMV's ( Michael Verhaart ) wiki. Retrieved December 17, 2017, from http://www.virtualmv.com/wiki/index.php?title=HTML/XHTML%3ACSS_Techniques%3AGradient_background    (zotero)