You need to create an HTML and CSS document for this lesson task. Use one root folder containing separate CSS and image folders. Find three images you can use; one will be used as a background and one as part of the content, while the third should be a simple png with a transparent background.
Link the styles.css file with the HTML document using the property inside the section of the HTML document.
Part 1
Create a basic structure for the HTML document with a <body> containing a <header>, <main> and <footer> section. Insert an <h1> element into the <header> section and an <p> element with text inside the <main> section.
Using CSS, apply the following to the HTML page:
A background image for the <body> section;
A solid colour background for the <header> section, but with an opacity rule applied so that the background image is slightly visible behind the <header> container.
Once you have the background image showing, apply different values to the background properties that will produce the following results:
A repeated pattern of the background image using the properties “background-repeat” and “background-size”.
Place the background image in the centre of the screen using the properties “background-position”, “background-size”, and “background-repeat”.
A full-page background image that fills the screen using “background-repeat” and “background-size” (remember that size can have specific values in % or px, but it can also have relative values like “contain” and “cover”).
Take screenshots of the HTML and CSS code and the browser results. Write a short description explaining how the property values changed the behaviour of the background image. This should be loaded onto your blog.
1. A background image for the <body> section.
2. A solid colour background for the <header> section, but with an opacity rule applied so that the background image is slightly visible behind the <header> container.
After adding the background image it appeared in full size, it did not repeat and covered only the same space as the size of the image. The solid background color on the header appeared only behind the title of the website.
Preview
3. A repeated pattern of the background image using the properties “background-repeat” and “background-size”.
After reducing the size of the image and adding the "repeat" property, the image was smaller and repeated itself to cover all of the space.
Preview
4. Place the background image in the centre of the screen using the properties “background-position”, “background-size”, and “background-repeat”.
After replacing the "repeat" with "no-repeat", slightly increasing the size, and specifying the position to "center" the image was positioned in the center of the canvas and did not repeat itself.
Preview
5. A full-page background image that fills the screen using “background-repeat” and “background-size” (remember that size can have specific values in % or px, but it can also have relative values like “contain” and “cover”).
After replacing the set image size with the property "cover" and changing back to "repeat", the image was in full size and repeated itself to fill up the space.
Preview
Part 2
Insert a div with a class into the <main> section of the HTML page. Specify the div’s size using a CSS rule that includes a height and width property. You can also specify a border so you can see the empty container. If you need to refresh your memory on border styles, visit this link. Once the empty container is showing up in the browser or result in view, add a multi-layered background to the container that includes the following:
A gradient;
A pattern made up of the png image you collected earlier.
Take screenshots of the CSS code and the result, and write a short description explaining how the property values changed the behavior of the background image.
A "div" container with a class in the HTML section.
The "div" properties in the CSS.
After adding the "div" element and specifying the border settings, I could see the element as an empty square.
Preview
Adding a gradient
I added the gradient to the div class and did a linear gradient from one corner to the opposite.
Preview
A pattern made up of the png image you collected earlier.
I struggled a bit with trying to figure out how to create a pattern with the png and tried a lot of different options that did not work. In the end, I managed to achieve a small pattern.
Preview
Part 3
Insert two images in the <main> section using the <a> property in the HTML code. Using CSS, do the following:
Apply a border-radius property to the first image;
Apply a pseudo-class property to the second image that reduces the opacity on hover.
Take screenshots of the HTML and CSS code as well as the browser results to load onto your blog.
- The first thing I did was to add the images to the HTML code. I also put a different class on each, so I can give them different properties.
Apply a border-radius property to the first image
Preview
Apply a pseudo-class property to the second image that reduces the opacity on hover.
Preview (normal and hover)
Comments