Day #10: Adding graphics to a web page
CSS Box model review
Every element is in a box.
A box has a border (which may be invisible).
Between the element and the border is the padding. The padding is part of the element.
Between the border and either the enclosing element or the previous/next element, is the
margin. The margin is outside of the element.
Adding background images
The background-image property
You can use either the html element or the body element to display backgrounds for your
pages. If you use the html element, your background will go from one edge of the browser
window to the other. If you use the body element, your background will go from the one
edge of the body to the other. If your body is set to a width of 100%, the effect will be the
same as if you had set the background of the html element. But if the width of the body is
less than 100%, the body will have one background and the html element will have another
that will be visible "behind" the body.
Create an images folder just below the level of your index file. Copy the Day10Images.zip
files into the image folder.
Create a new project: Day10.
Change the title to Day 10.
Create a <style> element.
Leave the existing <div> element. Then add about 10 of the following to the body to give it
some length:
<p>&nbsp;</p>
Then add the following rule to your CSS:
html {
background-image: url("images/escher.png");
}
Add a body selector:
body {
background-color:white;
}
Change the width of the body. Add to the body rule:
width:80%;
Document1
1
February 8, 2016
Center the body on the background. Add to the body rule:
margin:auto;
Round the corners. Add to the body rule:
border-radius: 20px;
Now some of the text is truncated in the corners. Add some space. Add to the body rule:
padding:2em;
Add a background image to the body. Add the following:
background-image:url("images/graytile.jpg");
Document1
2
February 8, 2016
Note that this only provides a background for the top of the page. Add the following (did not
work):
height:100%;
This will make the height 100% of its container height.
Controlling the repetition
By default a background image is repeated to fill in the entire background of its element. To
tile the image:
background-repeat: repeat;
/* default */
If you just want the background to appear once:
background-repeat: no-repeat;
A sidebar image
Delete the background-repear:no-repeat;line from your CSS. This will cause the image to be
repeated again.
To get a side image for the left side, use the Grayleft.png. image.
Change the background-image rule to this:
background-image: url("images/grayleft.png");
Preview the page. The image will be tiled to cover the entire screen. We only want it on the
left edge, so add the following rule to the body rules.
background-repeat: repeat-y;
This will cause the image to repeat in the y (vertical) direction. There is also a repeat-x
(repeats horizontally) and a repeat (repeat in both directions, but this is unnecessary, since
repeating in both directions is the default).
Move the body text out of the sidebar image by increasing its padding. Leave the current
padding rule (which sets the padding to 2em on all four sides).
padding:2em;
But add the following
padding-left:10em;
Note that the padding-left rule must come after the padding rule.
A top-bar image
Change the background image to the following:
background-image: url("images/graytop.png");
Then change the repeat-y to repeat-x to get the image to repeat in the x (horizontal)
direction.
background-repeat: repeat-x;
Document1
3
February 8, 2016
If you want the image to stay at the top of the screen when the user scrolls (e.g. your
company logo, etc.), add the following for the body selector:
background-attachment: fixed;
Document1
4
February 8, 2016
Another side bar image
Change the background-image rule to the following.
background-image: url("images/border-left-flowers.jpg");
And change the background-repeat rule back to repeat-y.
background-repeat: repeat-y;
There are two problems with this. Problem 1: The left edge of the image is truncated. You
can fix this by removing the background-attachment rule. Problem 2: The green stops in the
middle of the screen. There are three ways to "fix" this problem (if we want a green
background for the entire width of the page).
Fix 1. Use the background-size property to set the width of the image to 100% of the body.
However, this distorts the picture (the flowers on the left are expanded and don't look very
good).
background-size:100%;
Fix 2. Do a bit of editing and make the picture wider. Go into Paint.net and open the FlowerLeft.jpg image. It is 384x131. Create a new image that is 2000x131. Copy the FlowerLeft.jpg file to the clipboard and paste it into the new picture. Then use the color picker tool
to pick the green color. Use the paint bucket (fill) tool to fill in the empty right side. Save
the image as Border-left-flowers-wide.jpg. Change your CSS.
background-image: url("images/border-left-flowers-wide.jpg");
Positioning a background image that doesn't move. Assume that you want your logo to be
on the top of the page and stay there, even though everything else is scrolling. Change your
background-pic:
background-image: url("images/BCUlogo.png");
Then change the background-repeat property:
background-repeat: no-repeat;
Then make it fixed:
background-attachment: fixed;
Note, however, that this truncates on the left again.
Multiple background images
For the following, we will use these files: ScrollTop.jpg, ScrollMiddle.jpg, and
ScrollBottom.jpg.
Delete the existing background-repeat rule.
Document1
5
February 8, 2016
Then put the following in your body rule:
background:
url("images/scrollBottom.jpg") left bottom no-repeat,
url("images/scrollTop.jpg") left top no-repeat,
url("images/scrollMiddle.jpg") left top no-repeat;
The images are listed as they are drawn, top layer to bottom layer (note that this is the
opposite of XNA, which draws them in bottom layer to top layer order).
This rule leaves a gap between the middle and the bottom. We can fix this by changing the
repeat value for the scrollMiddle.jpg image to repeat-y.
url("images/scrollMiddle.jpg") left top repeat-y;
If you are getting the html background to show through, you will have to move the
background-color rule below the background rule.
There are still some problems. If the bottom of the scroll disappears, remove the
background-attachment: fixed rule.
Document1
6
February 8, 2016
Gradients
Linear gradients
You no longer need to use a graphics program to create gradients. The browser will do
gradients for you. Comment out your existing background rule. Then add this:
background-image: linear-gradient(top, red, blue);
Nothing happens! Now change the rule to this. NetBeans may give you an error, but it
should work.
background-image: -webkit-linear-gradient(top, red, blue);
"-webkit-" is a vendor prefix. What are vendor prefixes? Vendor prefixes are used to add
new properties to CSS. The properties that have been added by Google to Chrome all begin
with –webkit.
A list of vendor prefix properties is here. Note that linear-gradient does not appear on this
list. I'm not sure why. But I know that linear-gradient does not work in Chrome, while
–webkit-linear-gradient does.
The problem with our above rule is that it only works in Chrome and Safari (but should work
soon with Opera, too—Opera is switching to WebKit). If we want to make sure that the rule
will work with all major browsers, we must do this:
background-image:
background-image:
background-image:
background-image:
-webkit-linear-gradient(top, red, blue);
-moz-linear-gradient(top, red, blue);
-o-linear-gradient(top, red, blue);
linear-gradient(top, red, blue);
You can also have more than 2 colors in your gradient. There's no limit. Replace your
current background-image with this:
background-image: -webkit-linear-gradient(top, red, orange, yellow, green,
blue, indigo, violet);
Note that nobody in their right mind would actually use the above for a background.
You can also change the direction. Options for the first argument are:
top, bottom, left, right
top left, top right, bottom left, bottom right
Note that center does not appear to be an option (at least not in Chrome).
You can set the direction to any angle that you want. Change your first argument to 45deg
(or any other angle):
background-image: -webkit-linear-gradient(45deg, red, orange, yellow,
green, blue, indigo, violet);
Document1
7
February 8, 2016
Radial gradients
To create a radial gradient, comment out the existing linear-gradient rule and add the
following:
background-image: radial-gradient(red, blue);
Note that this also does not work in the current version of Chrome, but it will work if you
add Chrome's vendor prefix: -webkitbackground-image: -webkit-radial-gradient(red, blue);
There are quite a few options for tweaking radial gradients (and linear gradients, too), but
we won't consider them here.
Gradients with Colorzilla
Go to www.colorzilla.com/gradient-editor. Check out their existing gradients and try copying
the code from their site into your CSS styles.
Some sources for free images:











www.morguefile.com
www.sxc.hu
http://openphoto.net
http://searchcreativecommons.org
www.somerandomdude.com/work/sanscons
www.colourlovers.com/patterns
www.kollermedia.at/pattern4u
http://squidfingers.com/patterns
http://bgpatterns.com
www.stripegenerator.com
www.patterncooler.com
Framing an Image
In NetBeans, open image.html. Styles have been included in it. Preview the image.html file.
Add to the bottom of the CSS file:
img.figure{
float: right;
margin: 10px;
border: 1px solid #666;
background-color: #ccc;
padding: 10px;
}
Then add the following attribute to the <img> tag in your HTML file:
class="figure"
Add a caption by putting the <img> in a <figure> element:
Document1
8
February 8, 2016
<figure>
</figure>
Then add a <figcaption> tag:
<figcaption>
Figure 1: Creeping bentgrass.
</figcaption>
Creating a Photo Gallery
Open the file gallery.html. Styles have been included in it. Preview the file.
Add two new styles:
figure img {
border: 1px solid #666;
background-color: #FFF;
padding: 4px;
}
figcaption{
font: 1.1em Arial, sans-serif;
text-align: center;
margin: 10px 0 0 0;
}
These add a border to each image in the gallery and set the font, alignment, and margins of
the captions. Preview your file.
Add the following:
figure {
float: left;
width: 210px;
margin: 0 10px 10px 10px;
}
This will float each photo/caption pair to the left until there is no more room. Preview your
file.
Resize the browser window. There is a 2-photo gap on the left side of row 2. This is because
the text of the second photo's caption is blocking the photos.
Add the following to your figure rule and remove the float rule:
display: inline-block;
vertical-align: top;
The inline-block attribute treats each image/caption pair as a block, but will still display
them inline, so blocks can sit side-by-side.
Drop Shadows
Add to the figure img rule:
Document1
9
February 8, 2016
box-shadow: 2px 2px 4px rgba(0,0,0,.5);
Backgrounds
Open bg_images.html. It has had some style rules added to it. Preview it in your browser.
Add the following to the body rule:
body{
background-image: url(images/bg_page.png);
background-repeat: repeat-x;
background-color: white;
}
This will add a gradient.
Add the following:
.wrapper{
background-color:white;
}
Add a background image to the wrapper class:
background-image: url(images/bg_main.jpg);
background-position: left top;
background-repeat: no-repeat;
Add the following:
.banner{
margin-top: 48px;
}
.announcement{
margin-top: 115px;
}
Note that I had to tweak these numbers quite a bit to get the announcements below the
hand and the Internet Programming text to rest on the white border.
Replacing Borders with Graphics
Add the following:
.main h2{
background-image: url(images/underline.png);
background-repeat: no-repeat;
}
The picture is too high. Add the following:
background-position: left bottom;
padding-bottom: 7px;
Enhancing the sidebar
Add to the announcement class rules:
Document1
10
February 8, 2016
background: url(images/scroll_top.jpg) no-repeat center top,
url(images/scroll_bottom.jpg) no-repeat center bottom,
url(images/scroll_middle.jpg) repeat-y center top;
View your page.
Add some padding to move the text down (in the announcement rule):
padding: 70px 0 60px 0;
View your page.
Add the following to the announcement li style:
margin-left: 30px;
margin-right: 40px;
Document1
11
February 8, 2016