Responsive Background
Let me describe why this article about responsive backgrounds even exists.
A software dashboard is being created for a new project (to be announced when it's ready).
The design was for the navigation to be on the left, on top of a colored background. That's on desktops. But for mobile tablets and phones, especially in the portrait position, the navigation and its colored background was to be at the top of the page.
A div with a background color worked a treat. It would flip its position when the browser window or device width got narrower than a specified amount.
It didn't work that well, however, when messages needed to be published before the navigation area was rendered. Part of the messages got lost under the navigation div. That's because the messages were published at the top of the page, before either the navigation or regular content. Thus, the navigation div was on top of the messages, it's colored background covering up parts of it.
My first thought was to use CSS z-index declarations to establish layer positions.
My second thought was something more elegant — use a solid color background image repeated along the left side of the page instead of specifying a background color for the navigation div. Because the background image of the body tag is always published before any content, the messages no longer partially concealed.
("Elegant" is subjective, of course. For me, "elegant" is something that's more understandable than something else, something that requires less coding, or is a method that I personally like better than another method.)
It had to be made responsive, of course, because people will use their desktops and laptops as well as their mobile devices to access the dashboard.
Therefore, when the width of the page becomes narrower than a specific width, the background image is changed and it's repeated along the top of the page.
That was when I decided to write this article and describe how it was done.
In a moment, I'll provide the source code for a skeleton web page you may modify until you feel comfortable with how to code a responsive background.
But first, here is the basic CSS that does the job.
body {
background-image: url(https://www.willmaster.com/library/images/BackgroundHorizontalBar.png);
background-repeat: repeat-y;
}
@media screen and (max-width:6in) {
body {
background-image: url(https://www.willmaster.com/library/images/BackgroundVerticalBar.png);
background-repeat: repeat-x;
}
}
As you can see, the concept is fairly simple. The body selector is provided with background declarations. And the @media selector changes those declarations when the width is 6 inches or less.
Specifically:
-
The body selector declares the background-image and background-repeat declarations. The background image is a file named BackgroundVerticalBar.png. The image dimensions are 150 pixels by 1 pixel. The image is repeated along the left side of the page with the repeat-y value.
-
When the page width is 6 inches or less, the @media selector changes the background image to a file named BackgroundHorizontalBar.png that has dimensions 1 pixel by 75 pixels. And the image is repeated along the top of the page with the repeat-x value.
Click here for a separate example page. The image is a solid color that shifts from the left edge to the top of the web page, and vice versa, as the width of the page becomes more or less than 6 inches.
Here's the code for that example page.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Background Demonstration</title>
<style type="text/css">
body {
background-image: url(https://www.willmaster.com/library/images/BackgroundHorizontalBar.png);
background-repeat: repeat-y;
margin-top: .25in;
}
#content {
color: black;
font-size: 100%;
line-height: 140%;
margin-top: 0;
margin-left: 175px;
}
#navigation {
color: black;
font-size: 100%;
line-height: 175%;
float: left;
width: 150px;
}
.nav-menu-item {
display: block;
padding: 0 1em .5em 1em;
}
@media screen and (max-width:6in) {
body {
background-image: url(https://www.willmaster.com/library/images/BackgroundVerticalBar.png);
background-repeat: repeat-x;
}
#content {
margin-top: .5in;
margin-left: 0;
}
#navigation {
float: initial;
width: initial;
}
.nav-menu-item {
display: inline;
}
}
</style>
</head>
<body>
<div id="navigation">
<div class="nav-menu-item">Navigation</div>
<div class="nav-menu-item">Goes</div>
<div class="nav-menu-item">Here</div>
</div>
<div id="content">
<p>Content goes here</p>
</div>
</body>
</html>
The example page contains additional CSS rules. Specifically, they apply to the id="content" div, the id="navigation" div, and the navigation menu items.
Studying the code at the @media selector will show you what changes are made when the document becomes 6 inches or less in width. Here's what you'll find.
-
The background image and repetition is changed (as noted further above).
-
The id="content" div's margin is changed.
-
id="navigation" div's float and width selectors are set to their initial state. In other words, the values are removed.
-
The navigation menu items' display value is set to inline so they will print as a horizontal instead of vertical.
As you can see, it's very basic. The idea was not to clutter it with anything not strictly necessary for demonstrating the functionality.
Once you're comfortable with how it works, add your own font and other design elements.
The idea described here for changing the background image and repeat values can be used to make other background declarations responsive.
(This article first appeared in Possibilities ezine.)
Will Bontrager
