*I was doing padding and now I have too much space.
*https://codepen.io/you/pen/aMQWVg
chrome
User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36.
Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-tribute-page
You are using padding: X% and so padding-top and padding-bottom are being set to X% of the page height.
if you want to keep the side padding and not the top bottom padding do:
padding: upPadding X% downPadding X%
or define each padding direction separately
You’ve added margin of 50 plus padding of 70 in the main part and in the body part you have added 25px worth of top-margin. so all that space is going to add up. My suggestion would be to lower the margin-top in the body section of your CSS.
Hope it helps
cheers:)
how can i get a pattern for my background.
As this is a separate question from the original, it may make sense to split it off into a new topic.
That said, for all your CSS-type questions, I highly recommend keeping a tab open to a reference site. The two I use almost all the time are the MDN Web Docs, and/or devdocs. Note that the link on both of those goes to the page relevant to your question about backgrounds.
If your question is about where to find tile-able art to use for your background, I might suggest simply google “tilable background image” or something similar.
mmmm google. I tried that. i don’t know what you mean about a reference tab? It may be my age but keep a tab open Is a bad idea anyone can charge to it. i just need to add a gray wool background to it.
Google to the rescue: “tilable background image wool” turned up this as the first result: https://www.textures.com/browse/wool/107739
If, however, you want the actual wooly feel, you may need to get to work inventing. Or glue carpet to your screen.
hahaha that’s great so funny!! So then its an image. I was looking for a hex number.
Ahhh, now I see the confusion. You can use colors, or images, for a background. When you said “a pattern”, I assumed an image.
There are quite a few accepted color names (in place of hex codes), but wool is not one. To see a pretty comprehensive list, https://www.w3schools.com/colors/colors_names.asp
after download I can’t get into the code without browsing my files and pen has no way I can see to do that.
Right. Unless you create a project there, rather than a pen, you can’t include other files. You can, however, use the original image (assuming it’s a public domain one, or one for which you have license).
So going through that google list I’d gotten (results for “tilable background image wool”), I found one that seemed pretty intense:
http://www.myfreetextures.com/wp-content/uploads/2011/06/knit2.jpg
Now, rather than having to download that image, I can simply set:
#main {
/* whatever other styles you have */
background-image: url("http://www.myfreetextures.com/wp-content/uploads/2011/06/knit2.jpg");
background-size: 128px; /* or however big you want your tile size to be */
}
So I’m not having to add the image, I’m simply referring to it from the original site.
Though its much better to use a photo hosting site to link to… https://cloudinary.com/ is a good one that Ive used.
Most sites do not allow hotlinking (linking directly to their content) including freetextures. Always check TOS. Many sites try to combat hotlinking (cause it burns up their bandwidth) Best case scenario, they auto-generate new links and your image will break. Normal case scenario, the image will be replaced with a image that says do not hotlink. Worst case scenario…the image will be replaced with a really rude or inappropriate picture.
You can also have the background image src link to an image file stored in a repo on github.
sounds like a good idea. Just one thing. what’s a github?
oh they get nasty for stealing free stuff.ok got you.
github is a website where you can store code files and projects remotely. You can also make changes to those files whenever you want. All you need to do is set up an account, and it’s all free of course.