Using background-image and <figure> in Dasmoto's Arts and Crafts Off-Platform Project

Language Help Make & Deploy a Website
1

Hi, I’m doing the off platform project on Dasmoto’s Arts and Crafts, I’ve two issues here.

  1. I’m trying to add the background image via a CSS stylesheet but it doesn’t seem to be working. (using the CSS rule background-image: url(“…\resources\pattern.jpeg”)) I have the image correctly stored and linked in a resources folder, but it doesn’t show up here on the page.
  2. I’m using semantic HTML as a challenge and placed the tags in tags, with a underneath. For some reason, the position of the images seem to not match the one displayed in the spec. They look slightly indented, and spaced out from the left edge of the page. I took a screenshot of the spec to compare. Can anyone help with this?

image
image1920×895 166 KB

(My current version of the website.)

image
image730×866 102 KB

(The end result, described in the spec.)

The GitHub link of my HTML and CSS code as is is linked below, I’d appreciate if someone can have a look!

2

Number 1

From your CSS code that I saw, I witnessed this

 background-image: url("./resources/pattern.jpeg");

And you got a file structure like this:

index
-- resources
-- -- CSS

Keep in mind that your CSS file is inside the CSS folder which means with the path you are giving it you are making it go to CSS/RESOURCES/pattern.jpeg

So your fix to that is to use ../pattern.jpeg as the image is one level up from the CSS file.

Number 2

I would suggest using a reset to reset all the default styles enforced by the browser (Padding, Margin) etc.

So inside the * code you got I’d include this

* 
{
padding: 0;
margin: 0;
}
3

Hi, thanks for the help. The new relative link worked this time.
I also removed the tag and switched it to a regular tag for now. I think I’ll learn more about paddings and margins later on in the course.
Thanks again!

1 Like