HTML-CSS: Polka Dot Background Pattern - W3resource

Trang chủ » Html Css Dotted Background » HTML-CSS: Polka Dot Background Pattern - W3resource

Có thể bạn quan tâm

HTML-CSS: Polka dot background pattern Last update on March 08 2024 13:35:25 (UTC/GMT +8 hours)

HTML-CSS : Exercise-28 with Solution

Using HTML, CSS creates a polka dot background pattern.

  • Use background-color to set a black background.
  • Use background-image with two radial-gradient() values to create two dots.
  • Use background-size to specify the pattern's size. Use background-position to appropriately place the two gradients.
  • Note: The fixed height and width of the element is for demonstration purposes only.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- Comment: Indicates the license information for the code --> <!DOCTYPE html><!-- Comment: Declares the document type and version of HTML --> <html><!-- Comment: Indicates the start of the HTML document --> <head><!-- Comment: Contains meta-information about the HTML document --> <meta charset="utf-8"><!-- Comment: Declares the character encoding for the document --> <meta name="viewport" content="width=device-width"><!-- Comment: Sets the viewport width to the width of the device --> <title>Using HTML, CSS creates a polka dot background pattern</title><!-- Comment: Sets the title of the document --> </head><!-- Comment: End of the head section --> <body><!-- Comment: Contains the content of the HTML document --> <div class="w3r-dot"><!-- Comment: Defines a container for the polka dot background pattern --> </div><!-- Comment: End of the container for the polka dot background pattern --> </body><!-- Comment: End of the body section --> </html><!-- Comment: End of the HTML document -->

Explanation:

  • This HTML code creates a simple webpage with a container div for the polka dot background pattern.
  • The <!--License: https://bit.ly/3GjrtVF--> comment indicates the license information for the code.
  • <!DOCTYPE html> declares the document type and version of HTML, which is HTML5.
  • <html> marks the start of the HTML document.
  • <head> contains meta-information about the HTML document, such as character encoding and viewport settings.
  • The <title> element sets the title of the webpage.
  • <body> contains the content of the HTML document.
  • Within the .w3r-dot div, there is no content, indicating that it will be styled using CSS to create the polka dot background pattern.

CSS Code:

<style> /* Comment: Begins the CSS styling for the HTML document */ .w3r-dot { /* Comment: Styles the element for the polka dot background pattern */ width: 240px; /* Comment: Sets the width of the element */ height: 240px; /* Comment: Sets the height of the element */ background-color: #ccc; /* Comment: Sets the background color of the element */ background-image: radial-gradient(#000 10%, transparent 11%), /* Comment: Defines a radial gradient for black dots */ radial-gradient(#e53935 10%, transparent 11%); /* Comment: Defines a radial gradient for red dots */ background-size: 60px 60px; /* Comment: Sets the size of the background dots */ background-position: 0 0, 30px 30px; /* Comment: Sets the position of the background dots */ background-repeat: repeat; /* Comment: Specifies that the background pattern should repeat */ } </style> /* Comment: End of the CSS styling */

Explanation:

  • .w3r-dot styles the element to create a polka dot background pattern.
  • width: 240px; sets the width of the element.
  • height: 240px; sets the height of the element.
  • background-color: #ccc; sets the background color of the element to light gray.
  • background-image: radial-gradient(#000 10%, transparent 11%), radial-gradient(#e53935 10%, transparent 11%); defines two radial gradients, one for black dots and one for red dots.
  • background-size: 60px 60px; sets the size of each dot in the background.
  • background-position: 0 0, 30px 30px; sets the position of the background dots.
  • background-repeat: repeat; specifies that the background pattern should repeat.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.

Từ khóa » Html Css Dotted Background