Hi everyone. I’m new to coding world. Currently studying Web Development Career Path for a few months and in the meantime re-creating my personal website. It also helps me to practice what I’ve learned so far. However I got some problems that I can’t solve on my own.
I’ve created a homepage and two index content pages so far. But I can’t manage to fix the background image. The proportion of the image changes on every page. Here’s the CSS code I wrote:
html {
background-image: url("file:///C:/Users/Rumeysa/Documents/VS Code Projects/rumeysagelgi.com/resources/jpegs/8.jpg");
background-color: #cccccc;
background-size: cover;
}
Besides that I styled the h4 element as a box to include text content. I want to set the text box to proper dimensions and make it scroll when the text is longer than the box can cover. Here is current code:
h4 {
font-family: 'Amiri', serif;
font-size: small;
font-weight: normal;
background-color: whitesmoke;
text-align: justify;
line-height: 120%;
border: 10px groove rgb(239, 230, 250);
border-radius: 2%;
padding: 5px;
overflow: scroll;
}
I upload a few screenshots for better understanding. I want background image to look like as on the first screenshot. I really would appreciate help from experienced developers. Thank you.