Browse DevX
Sign up for e-mail newsletters from DevX


CSS: Color and Backgrounds : Page 3

Learn about color values and images for backgrounds.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Background Image Attachment: {background-attachment: scroll/fixed}
The background-attachment property specifies whether the background images scrolls or remains fixed in the same location on the page. This can be handy if you have, say a watermark logo, that you always want to appear in the center of your reader's browser window. You can use these controls to fix its position while the content scrolls on top of it.

Example: This sets a style rule that calls an image named "ocean.gif" as the background for the body element and prevents the background image from scrolling with the page:

	body {background-image: url(../images/ocean.gif);
	      background-attachment: fixed}

Background Image Position: {background-position: %vertical % horizontal - or - top/center/bottom left/center/right}
The background-position property lets you place a background image in a specific location within the element's background. You can specify its placement in two ways:

  • As X and Y percentages.

    Example: This places an image named logo.gif 20% from the top of the page and 30 % from the left of the page. It also fixes it in place:

    	body {background-image: url(../images/logo.gif); 
    	background-position: 20% 30%;
    	background-attach: fixed}

  • As a vertical and horizontal alignment, relative to the element.

    Example: This places an image named logo.gif on the page at the top vertically and centering it horizontally:

    	body {background-image: url(../images/logo.gif); 
    	background-position: top center}

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date