I need help on my personal portfolio page

so, making my personal portfolio page and have a background but instead of one big picture it’s just a lot of small pictures that all look the same, what am I doing wrong

here’s my HTML code

  <h1 class="head">Bailey DeSpain</h1>  

and here my CSS code

body {
  background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSbtUSgcg76mTwluDfT0WpOnNhfZfqSNpWR7fxvyon0xNmYrEPanA");

heres my codepen https://codepen.io/bailey-despain/pen/rzPzeX

You should add background-size: cover; to your body tag.

1 Like

hmm I did that but it only shows part of the picture and it’s super blurry

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


I could see you were trying to use the three backticks, but they have to be on a separate line to make it work correctly.

Use background-size:cover on a very small image will cause the image to look grainy. Start with an image closer to size of your desktop screen.

1 Like

I think it has to do with the resolution of the image you picked. For example, use this image and you will see that it is not blurry and it fits the screen.

1 Like

sweet, thanks. also how can i find backgrounds the right size?

When I am searching for images, I look for their resolutions and pick ones that are over 1200 px wide :slight_smile:

1 Like