Flexible Background Image in the Pickup Soccer Site - Exercise

Contact Us or call 1-877-932-8228
Flexible Background Image in the Pickup Soccer Site - Exercise

Flexible Background Image in the Pickup Soccer Site

Duration: 10 to 15 minutes.

In this exercise, you will add a graphic background for the right column of the Pickup Soccer site to match this design:

soccer background

  1. Open the files FlexibleImages/Exercises/flexiblebg/index.html and FlexibleImages/Exercises/flexiblebg/css/style.css in your file editor.
  2. If you have access to and are comfortable with using Photoshop or some other image editor, create an appropriate background image for the right column; if not, use this file: FlexibleImages/Exercises/flexiblebg/images/bg_soccerballs.png - be sure to create the file with a large width.
  3. Edit CSS to place the background image so that it appears correctly regardless of the scale of the page.

Solution:

FlexibleImages/Solutions/flexiblebg/css/style.css
body {
	font-family:Georgia,serif;
	background-image:url('../images/bg_grass.jpg');
}

a {
	text-decoration:none;
	color:#4040AD;
}

a:hover {
	text-decoration:underline;
}

#container {
	width:85%;
	margin:0 auto;
	background: #fff  url('../images/bg_soccerballs.png') repeat-y 65.520833% 0;
}

header {
	background-color:#d0b462;
}

header #logo {
	margin:1.0416666% 0 1.0416666% 3.75%;
}

nav {
	padding:1.0416666% 3.75% 1.0416666% 3.75%;
	float:right;
}

nav ul {
	display:inline;
}

nav ul li {
	display:inline;
}

nav ul li a {
	color:#fff;
	text-decoration:none;
	margin-left:20px;
}

#maincontent {
	width:61.7708333333%;
	padding:1.0416666% 0 3.75% 3.75%;
	float:left;
}

#maincontent h1 {
	font-size:36px;
	margin:5px 0 20px 0;
}

#maincontent .game {
	float:left;
	width:47.892074199%;
	line-height:14px;
	font-size:14px;
	margin:0.8431703204%;
}

#maincontent .game img {
	float:left;
	margin:0 2.86% 0 0;
	max-width:100%;
}

#maincontent iframe {
	max-width:100%;
}

#sidebar {
	width:26.9791666667%;
	float:right;
	padding:3.75%;
	color:#333;
	line-height:20px;
}

#sidebar h3 {
	font-style:italic;
	font-size:20px;
	margin:0 0 5px 0;
}

#footerinfo {
	clear: both;
	background-color:#151570;
	padding:1.0416666% 0 1.0416666% 3.75%;
}

#footerinfo p {
	color:#fff;
}

We use a background-position value of 65.520833% to position the background image to align properly as the columns' widths change. The last two values we set for the CSS background rule are for the horizontal (65.520833%) and vertical (0 - note that we don't need to include a % sign here) position of the background image. Positioning the background image horizontally with a percentage value ensures that the image - which we crafted to have the soccer-ball portion of the content exactly at the right percentage of the full width of the image - means that the background remains in the correct position regardless of the width of the browser.

Next