<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> background style type</title>
<style>
body *{
border :solid gray;
width: 400px;
height: 100px;
}
#id1{
background-image:url();
background-position: 70% 50%;
background-repeat: no-repeat;
background-size: 20% 60%;
}
#id2{
background-image:url();
background-position: right center;
background-repeat: repeat-x;
}
#id3{
background-image: url();
background-size: auto;
opacity:0.5;
}
#id4{
background-image: url();
background-position: 50% 50%;
background-repeat: repeat;
}
</style>
</head>
<body>
<div id="id1">style 1</div>
<div id="id2">style 2</div>
<div id="id3">style 3</div>
<div id="id4">style 4</div>
</body>
</html>#### CSS Style Rules for All Elements:
- `body *`: Applies to all elements within the `body`. Sets a solid gray border, and specifies a width of 400px and height of 100px for each. This rule provides a consistent size and border for demonstration purposes.
##### Individual Background Styles:
- `#id1`:
- `background-image:url();`: Intends to set a background image from a URL, but the URL is missing.
- `background-position: 70% 50%;`: Positions the background image 70% from the left and 50% from the top of the element.
- `background-repeat: no-repeat;`: Ensures the background image does not repeat.
- `background-size: 20% 60%;`: Scales the background image to 20% of the element's width and 60% of its height.
- `#id2`:
- `background-image:url();`: Again, specifies a background image without providing a URL.
- `background-position: right center;`: Aligns the background image to the right center of the element.
- `background-repeat: repeat-x;`: The background image is repeated horizontally along the x-axis.
- `#id3`:
- `background-image: url();`: Sets a background image, but lacks a URL.
- `background-size: auto;`: The size of the background image is automatically adjusted to its original size.
- `opacity:0.5;`: Makes the element semi-transparent, affecting both its content and background.
- `#id4`:
- `background-image: url();`: Specifies a background image without a URL.
- `background-position: 50% 50%;`: Centers the background image both horizontally and vertically.
- `background-repeat: repeat;`: The background image is repeated both horizontally and vertically to cover the entire element.
#### Observations:
Each `div` is styled to demonstrate different background properties, but the `background-image` properties are missing URLs for the images, making it impossible to see the intended effects in practice. By providing actual URLs for the images, each `div` would visually represent the unique background styling specified in the CSS.
This document serves as a template for experimenting with background styles in CSS, illustrating how different properties can be combined to achieve various design effects. To fully utilize this template, actual image URLs should be inserted where the `url()` function is called.
'개념 > HTML+CSS' 카테고리의 다른 글
| HTML) CSS Selectors and Styling Examples (0) | 2025.02.05 |
|---|---|
| HTML) Exploring Font Styles and Effects in CSS (0) | 2025.02.04 |
| HTML) CSS Styling Showcase (0) | 2025.02.02 |
| HTML) Web font (0) | 2025.02.01 |
| HTML) Using @font-face for Custom Fonts in HTML5 (0) | 2025.01.31 |