I need some helpful tips for my personal website!

Get Help CSS
#1

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.

#2

homepage
homepage1920×1080 313 KB

#3

index-page-1
index-page-11920×1080 422 KB

#4

index-page-2
index-page-21920×1080 441 KB

#5

Hi there, welcome to the forums.

It’s a little difficult without the full codebase to look at (and test), but…

I think this is because you’re setting the background properties of the html element.

The html element will be, effectively, the entirety of the rendered document. In the screenshots of your whatIsWS.html page, your text is not contained within the dimensions of the window since you have to scroll down. As a result, your html element is larger on that page than it is for your homePage.html page and so the rendered background image is also larger - resulting in the differences you’re seeing.

You could work around that by using CSS to limit the size of your body element:

body {
    height: 100vh;
    width: 100vw;
}

This would set the dimensions of the HTML body to match the window size. If you then set the background image against the body, rather than html, it should remain constant between pages.

I’m guessing that your text content is already wrapped in another element? If so, all you’d need to do would be to set the height and width properties for it. I’d also possibly change the overflow rule to overflow-y, so that it only scrolls along the vertical and not both axes.

Not sure how much more help I can be without visibility of the markup, but this hopefully will get you in the right direction at least. :slight_smile:

1 Like