Little trouble repeating image

[Willi_B]

My code is below. I have tried many things with several results. I have had a singular image appear fully, but not be movable with text-align. I have had exactly 3 “tops” of the image appear, regardless of width assignment. The image I am using is a silhouette that has no background color so it would just be a black image against the Wheat color. My goal is to get about 6-8 of them, perhaps a bit shorter, to be beneath the quote horizontally… then I plan on doing a text element over them that says, “Agricultural Innovator”. Help is appreciated as always.

html:

 <div id="image3"></div>

CSS:

#image3 {
  background-image: https://freesvg.org/img/Wheat.png(Wheat.png); 
  display: inline-block;           
  background-repeat: repeat-x;
             width: 50px;
             padding 10px;
}

Okay, for some reason the forum is not displaying my html which is just an empty div with the id of “image3”. No idea why!

[ilenia]

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

[lasjorg]

1. That is not how you set background-image, use url().

2. When I open the png file in the browser I just get some garbled binary. It looks corrupted.

https://freesvg.org/img/Wheat.png

Here is an example:

#image3 {
  background-image: url(https://freesvg.org/img/davosmith_Wheat.png);
  background-repeat: repeat-x;
  background-size: contain;
  width: 100%;
  height: 100px;
}

For the exact implementation, we would need some more context. A Codepen with your code would be useful.

---

background-image - CSS: Cascading Style Sheets | MDN

[Willi_B]

@lasjorg

background-repeat: repeat-x;
  background-size: contain;
  width: 100%;
  height: 100px;

Thanks so much. You know, sometimes you get some things that instruct you with “url” and they want you to put in an actual url but it seems like html and CSS are going literal. I thought I had tried that, but going with W3 examples they still had something that couldn’t be a link, like Wheat.png in the parenthesis. That’s why I like MDN a bit better as they break down each part a bit better for my brain.

[lasjorg]

@Willi_B

That’s why I like MDN a bit better as they break down each part a bit better for my brain.

I agree, MDN is usually much better.

MDN can get very technical, which is good, but can also be a bit overwhelming especially for beginners. But they usually do a pretty good job of giving you some examples you can work off of.

They also divide the content into documentation and tutorials. The documentation is usually technical (specs, with examples) but the tutorials are more beginner-friendly.