Search code examples
htmlcsstextbackground-image

CSS: How can I fix the background image and also create a text box?

I’m studying Web Development 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 at the homepage. I really would appreciate help from experienced developers. Thank you.

homepage index-page-1 index-page-2

Solution

  • The background image's dimensions are changing because of the background-size: cover; property.

    background-size: cover

    Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.

    Source: MDN

    Change it to auto to keep the original proportions.

    Now, for the text, wrap the heading tag in a div and add this css:

    div {
    white-space: nowrap; /*important - see reference*/
    width: /*add your width*/;
    height: /*add your height*/;
    overflow: auto;
}

h4 {
    overflow: inherit;
    /*no need to inherit white-space, it will be inherited automatically*/
}

    In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.

    Source: MDN