HTML versus CSS background image

Question

I've never really have made the background-image to work in CSS as it supposed to. Always set an image in HTML and then formatted it. But I thought I'd get it right this time. Plus I'm gonna add images to this so the issue will add up.

What am I doing wrong? Also, overflow: hidden isn't working and viewport seems weird. Maybe that's with the background-image formatting?

Seems like I'm not allowed to add images. So can't add a screenshot.

    body {
        overflow-anchor: hidden:
        margin: 0px;
    }

    /* The sky defined plus the sea as a box-reflection of the sky in the lake*/
    #sky {
        background: linear-gradient( rgb(1, 71, 202), #FFF);
        position: absolute;
        height: 50vh;
        width: 100vw;
        -webkit-box-reflect: below;
        -webkit-filter: grayscale(0%);
        z-index: 0;
    }

    /* The sun as a CSS radial with added blur function */
    #sun {
        background-color: white;
        top: 25vh;
        left: 33vh;
        border-radius: 50%;
        height: 50px;
        width: 50px;
        -webkit-filter: blur(1px);
        position: relative;
        z-index: 10;
    }


    /* Image of forest in png-format with a tranparency at the top of the treeline */
    #lakeline {
        background-image: url("../images/lakeline.png")
        top: calc(50vh - 75px);
        align-content: center;
        position: absolute;
        -webkit-filter: blur(0px) grayscale(0%);

        -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(white));
        z-index: 40;  
      }

where is you HTML code?

Mobarak Ali
– Mobarak Ali

2019-05-16 19:44:25 +00:00
Commented May 16, 2019 at 19:44 — Mobarak Ali
– Mobarak Ali, Commented May 16, 2019 at 19:44

Ionko Gueorguiev · Accepted Answer · 2019-05-16 21:48:08Z

1

I'm not 100% sure what you are trying achieve here, but if you are looking for a container background image this should do the trick for you.

The background-size property gives you some additional alignment options.

Edit: Added a layered image background here.

.background{
background: #002a43 url(https://s3.amazonaws.com/libapps/accounts/27060/images/example.png) top left no-repeat;
background-size: cover;
}

.background-multiple{
background-image: url(https://s3.amazonaws.com/libapps/accounts/27060/images/example.png), url(https://img03.deviantart.net/c90e/i/2012/222/2/7/mountain_stock_1_by_solanaceae85-d5alag2.jpg);
  background-position: right top, right top;
  background-repeat: no-repeat,  no-repeat;
  background-size: 150px, 450px;

}

<div class='background'>
Single Image Here<br><br><br>
Single Image Here<br><br><br>
Single Image Here<br><br><br>
Single Image Here<br><br><br>
</div>

Edit:
<div class='background-multiple'>
Multiple Image Here<br><br><br>
Multiple Image Here<br><br><br>
Multiple Image Here<br><br><br>
Multiple Image Here<br><br><br>

</div>

edited May 16, 2019 at 21:48

answered May 16, 2019 at 20:16

Ionko Gueorguiev

3225 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bo Danerius Over a year ago

Hi and thanks. That looks like a regular background? My goal is to have different layers of images thats gonna blend into each other somewhat. And Im trying to add them in CSS. Not HTML. BTW. I just realized I left out the background-image tag in the css code.

Ionko Gueorguiev Over a year ago

Added a multiple image option, I think this is what you are looking for. Depending on what you plan on doing with these, you might consider having separate absolute positioned <div> tags, which will give you more styling flexibility and javascript control. .

Bo Danerius Over a year ago

Hi and big thanks. I uploaded the page to a webserver. Its at: danerius.se/nottoday/indexstyle/indexsimplify.html Its 25% done. The forestline + the sun are in separate layers and on top of each other. Im gonna add a couple of more layers with landscapey stuff. The plan is to randomize values in order to get different moods. I did try containers first but it kinda didnt work. But maybe it didnt do it properly. Let me know if you have any other tactics to make it work /thx

Collectives™ on Stack Overflow

HTML versus CSS background image

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related