Using a background image

In your final project, some of you may want to use images in ways that seem awkward at first. Maybe you have forgotten that an image can be used as a background for any container-type element in HTML: a div, an article, a section, etc.

Here’s an example of the same image (one image) used to “cover” the background of three different-sized divs, with the image centered in each case. This is done with CSS. Robbins explained this where she talked about the background property in CSS.

Notice how I wrote white text over top of the image using normal HTML <p> tags.

Here’s the code (HTML and CSS only) for that example.

You’ll notice that Codepen is a site similar to jsFiddle, only more beautiful. It’s a good place for searching for solutions to tricky CSS and Bootstrap problems you need to solve. Just make sure you link to the exact Pen you used if you copy any code from Codepen! You may also embed the URL to the Pen in your CSS or JavaScript as a comment.

Do not steal code and fail to give credit to where you found it. Always include a complete URL for any copied code so that you don’t break the plagiarism rules.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s