CSS Background Image Corner

<div class="column">
    <!-- Your content here -->
</div>

Then, apply the following CSS:

.column {
    position: relative; /* Set position to relative */
    height: 300px; /* Set a height for the column */
    /* other styles for your column, e.g., width, padding */
}

.column::after {
    content: '';
    position: absolute;
    top: 0; /* Adjust as needed */
    right: 0; /* Aligns the image to the right */
    width: 100px; /* Set the width of the background image */
    height: 100px; /* Set the height of the background image */
    background-image: url('path/to/your/image.jpg'); /* Replace with your image path */
    background-size: cover; /* Cover to fill the element */
    background-repeat: no-repeat; /* Prevent repetition */
    background-position: center; /* Center the image in the element */
}

### Explanation:
– **`.column`**: This class represents your column. Adjust the height and other styles as needed.
– **`.column::after`**: This pseudo-element is used to add the background image. It is absolutely positioned to the top-right corner of the column.
– **`background-image`**: Replace `'path/to/your/image.jpg'` with the actual path to your image.
– **`background-size: cover`**: This ensures the background image covers the entire area of the pseudo-element.

Adjust the width and height of the `.column::after` pseudo-element to fit your design needs.

### HTML Structure

<div class="column">
    <!-- Your content here -->
</div>

### CSS Styles

.column {
    position: relative; /* Set position to relative */
    height: 300px; /* Set a height for the column */
    /* other styles for your column, e.g., width, padding, background-color */
}

.column::after {
    content: '';
    position: absolute;
    bottom: 0; /* Aligns the image to the bottom */
    right: 0; /* Aligns the image to the right */
    width: 100px; /* Set the width of the background image */
    height: 100px; /* Set the height of the background image */
    background-image: url('path/to/your/image.jpg'); /* Replace with your image path */
    background-size: cover; /* Cover to fill the element */
    background-repeat: no-repeat; /* Prevent repetition */
    background-position: center; /* Center the image in the element */
}

### Explanation:
– **`.column`**: This class represents your column and should have a defined height and any additional styles (like width or padding) as needed.
– **`.column::after`**: The pseudo-element is used to add the background image. It's positioned absolutely at the bottom-right corner of the column.
– **`bottom: 0;`**: Aligns the image to the bottom of the column.
– **`right: 0;`**: Aligns the image to the right side of the column.
– **`background-image`**: Update the URL to point to your specific image.
– **`background-size: cover`**: Ensures the background image covers the area of the pseudo-element.
– **`width` and `height`**: Set these dimensions to control the size of the image displayed.

Feel free to adjust the dimensions and other styles to suit your design requirements!

### HTML Structure

<div class="column">
    <!-- Your content here -->
</div>

### CSS Styles

.column {
    position: relative; /* Set position to relative if you have absolute positioned elements inside */
    height: 300px; /* Set a height for the column */
    background-image: url('path/to/your/image.jpg'); /* Replace with your image path */
    background-size: auto 100%; /* Adjust the size of the image */
    background-repeat: no-repeat; /* Prevent repetition */
    background-position: right bottom; /* Position the image in the bottom right corner */
    /* Other styles for your column */
    /* Example: */
    padding: 20px; /* Add padding if needed */
    background-color: rgba(255, 255, 255, 0.8); /* Optional: add a background color */
}

### Explanation:
– **`background-image`**: Set the image you want as the background. Replace `'path/to/your/image.jpg'` with the actual path to your image.
– **`background-size: auto 100%;`**: This setting makes the background image scale to 100% of the height of the column while maintaining its aspect ratio. Adjust this to `cover` or `contain` as needed based on your design.
– **`background-repeat: no-repeat;`**: Prevents the image from repeating if the column is larger than the image.
– **`background-position: right bottom;`**: Positions the image in the bottom right corner of the column.
– **`padding`**: Optional, for spacing the content inside the column.
– **`background-color`**: Optional, to add a semi-transparent background color over the image, making the content more readable.

This CSS setup will give your column a background image that appears in the bottom right corner while still allowing for any content you may want to include within the column. Adjust the height and padding as necessary to fit your design!

### HTML Structure

<div class="column">
    <div class="content">
        <!-- Your content here -->
    </div>
</div>

### CSS Styles

.column {
    position: relative; /* Set position to relative for absolute positioning if needed */
    height: 300px; /* Set a height for the column */
    background-image: url('path/to/your/image.jpg'); /* Replace with your image path */
    background-size: auto 100%; /* Adjust the size of the image */
    background-repeat: no-repeat; /* Prevent repetition */
    background-position: right bottom; /* Position the image in the bottom right corner */
    padding: 20px; /* Add padding around the content */
    background-color: rgba(255, 255, 255, 0.8); /* Optional: add a background color */
}

.content {
    margin-bottom: 50px; /* Adjust this value to create space above the background image */
}

### Explanation:
– **`padding: 20px;`**: Adds space around the entire content inside the column, creating a buffer between the column's edges and the content. You can adjust this value as needed.
– **`.content`**: This class wraps your actual content. By applying `margin-bottom: 50px;`, you create additional space between the content and the bottom right background image. You can adjust the `50px` value based on how much space you want.
– **`background-color`**: Adding a semi-transparent background color helps improve text readability over the background image.

This setup will ensure that the content in the column does not touch the bottom right corner where the background image is located, allowing for a more aesthetically pleasing design. Adjust the `margin-bottom` value in the `.content` class to control the space between the content and the background image.

### CSS with Media Query

.main-container .row-container .row-parent {
    /* Default styles can be added here, if needed */
}

/* Media query for max width 767px */
@media (max-width: 767px) {
    .main-container .row-container .row-parent {
        padding: 36px; /* Applies the same padding on all sides */
    }
}

### Explanation:
– **`@media (max-width: 767px)`**: This media query targets devices with a maximum width of 767 pixels, typically for mobile devices and small tablets.
– **`padding: 36px;`**: This sets the padding for all sides of the `.row-parent` element to 36 pixels.

### Complete Example
If you want to keep the original styles outside of the media query, you can include them as well:

.main-container .row-container .row-parent {
    /* Default styles (if any) can be added here */
}

/* Media query for max width 767px */
@media (max-width: 767px) {
    .main-container .row-container .row-parent {
        padding: 36px; /* Applies the same padding on all sides */
    }
}

This setup will ensure that the specified padding is applied only when the screen width is 767 pixels or less, allowing you to maintain different styles for larger screens if needed. Adjust the padding values as necessary for your design requirements.