Combining DIV elements, ID’s and, background images to enhance your design

In this series of videos, I build out a simple email or web page for a fictional record label.

I leverage DIV elements to structure the content. DIVs are like a blank HTML slate. They’re an empty holder for content, which makes them very useful. They are great for layout structures and grouping content together.

To select a DIV with CSS, you can use an ID. An ID is like a custom label that you can apply to an element.

The design I’m working with features background images behind text. We can achieve this look by using the background-image property in our CSS.

Here is an example of HTML and CSS that utalises DIVs, IDs and also back ground images.

HTML

<div id="my-div">Content</div>

CSS

#my-div {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

In the first video we work out all the HTML structure. We use DIVs to divide and arrange all of the page content.

Once the structure is in place, we begin to add presentation with CSS.

We complete the page presentation by adding in background images. Finally, we add internal page links by targeting IDs with anchor tags.

Here is the finished CodePen

See the Pen DIVs, IDs and background images – presentation by Simon Rankin (@simonrankin) on CodePen.

Code used in demonstration

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,700;0,900;1,700;1,900&family=Roboto+Mono:ital,wght@0,300;0,400;1,400&display=swap");

font-family: "Roboto Mono", monospace;
font-family: "Montserrat", sans-serif;

https://res.cloudinary.com/dhs8rxbzp/image/upload/v1595992021/logo_2x_xabxuh.png

https://res.cloudinary.com/dhs8rxbzp/image/upload/v1596018986/pattern-small_r3b7xo.png

https://images.unsplash.com/photo-1533835673073-b2575dde4265?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ

https://images.unsplash.com/photo-1594999853185-0034ea1c977e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ

https://images.unsplash.com/photo-1566916350208-da3747267c55?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ