Need help with my personal portfolio page

hey, I am a relatively new coder and have started working on my personal portfolio page. But I can’t figure out how to make my images not so blurry of how to write text on top of images, any help would be much appreciated
HTML code
<h1 class="head">Bailey DeSpain</h1> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGxaXLBXrvUlzYaONjwMT-9n-N9giTvNIZ-kRDGtDR2_mOk4V1"class="background1" >
CSS code

.background1{
  width:1900px;

}

,

Post your code (between triple backticks, like this: ```your code```) and a link to your project.

ok I did that, thanks

Your image is blurry because it’s 300 pixels wide and you’re stretching it to over 6 times that, so each pixel in the image is 6+ pixels on the screen. Modern image-rendering algorithms add a blur effect if the image is stretched (otherwise it’d be displayed as discrete squares of color, which would look even worse).

You can add text or other content on top of your image by setting it as the background for another element rather than an <img> element. For example, in your CSS:

body {
  background: url("background.jpg");
}
1 Like