How to Improve your CSS Styling Skills

Do you struggle with background image placement and positioning? Here’s how Background Images and the Background-Position Property work together to create magic.

In this article, you will learn: How to Improve your CSS Background Styling Skills

Table of contents

• Understand Image Format Types
• Understanding Background Styling Attributes

1. - Background
2. - Background-color
3. - Background-image
4. - Background-position
5. - Background-repeat

• Bonus Advice
• Summary

Understand Image Format Types

The CSS Background-Position Property specifies where the background image should be positioned in an HTML element box.

Images are available in a variety of formats, including;

• PNG(Portable Network Graphic)
• JPG(also known as JPEG — Joint Photographic Expert Group)
• SVG(Scalable Vector Graphic)

PNG image formats are popular among web designers because they have a transparent background pixel, whereas JPG images have a fixed background pixel that cannot be changed. SVG images are also popular due to their flexibility, scalability, and interactivity.

Understand Background Styling Attributes

Now, consider the attributes of a page or sections of a page in terms of their background. There are two major players when it comes to images on a website. The HTML (Hypertext Markup Language) 'img' tag and the CSS (Cascading Style Sheet) background image property are both available. With 'img' tags, you can add ‘alt’ and ‘title’ text within the code. Search engines and screen readers can read the ‘alt’ and ‘title’ attributes. Search engines, such as Google, cannot read images but can read this information, so by filling this in with keywords and relevant information, you can improve your search engine optimisation.

1. Background

• Fixed: The background is fixed with regard to its viewport
• Local: The background is fixed with regard to its element’s content, if the element as a scrolling mechanism, the background scrolls with it
• Scroll: The background is fixed with regard to the element itself and does not scroll with its content

2. Background-color

The background takes any color set to it.

3. Background-image

The background image is mostly assigned by using the url() attribute in which the closed bracket carries the link to the image you wish to assign to it.

4. Background-position

You may be familiar with the top-right-bottom-left (clockwise-dimension direction) in CSS but when it comes to background position property it is anti-clockwise i.e it goes left-top-right-bottom. Confusing right? I thought so too.

Perhaps you are new to building projects and have come across images in SVG formats which is popular when building projects on FrontendMentor.io, here are the background-position values to study:

• left: computes to 0% for the horizontal position if one or more values are given otherwise specifies the left edge as its origin
• top: computes to 0% for the vertical position if one or more values are given otherwise specifies the top edge as its origin
• right: computes to 100% for the horizontal position if one or more values are given otherwise specifies the right edge as its origin
• bottom: computes to 100% for the vertical position if one or more values are given otherwise specifies the bottom edge as its origin
• top left | top center | top right
• center left | center center | center right
• bottom left | bottom center | bottom right
• x-offset-length , y-offset-length | x-offset-% , y-offset-%

5. Background-repeat

• Initial: represents the value specified as the property’s initial value
• Inherit: represents the computed value of the property on the element’s parent
• Unset: acts as either “initial” or “inherit” depending on whether the property is inherited or not
• Repeat: repeated in the particular direction as often as needed to cover the background area
• Round: repeated as often as will fit the background position area and can be rescaled to fit
• Space: repeated as often as will fit the background position area without being clipped and can be spaced out to fill the area
• No-repeat: placed once and not repeated

Now, you might have cases where you are to make use of more than one background image, do not fret everything is under control. Using the same html code as shown above, here’s an example with images below:

---

Bonus Advice

If you are unsure whether to use an 'img' tag or a background-image attribute, simply ask yourself, does the image help people to better understand the content? If the answer is yes, then you should be using the html 'img' tag. If the image is purely for design purposes then there is no harm in using a background image.

Summary

I hope this article will provide you better understanding for your background image styling and positioning for web development. Feel free to leave a comment, if you have any other topics you would want to get an elaboration on.