Using Part of an Image for Background

I am wondering whether it’s possible to take an existing element - let’s say the orange in the code that I have written - and instead of having the background orange - instead, fill the element with a snippet of the same dimensions taken from an image?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3 Column 4 Row Excercise</title>
    <style>
        body   {
        width: 600px;
        height: 800px;
        border: black solid 4px;
        box-sizing: border-box;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .red    {
        background-color: red;
        grid-column: 1 / 2;
        grid-row: 1 / 4;
    }
    .yellow {
        background-color: yellow;
        grid-column: 2 / 4;
        grid-row: 1 / 2;
    }
    .green  {
        background-color: green;
        color: yellow;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        }
    .blue   {
            background-color: blue;
            color: yellow;
            grid-column: 2 / 3;
            grid-row: 3 / 4;
        }
    .violet {
        background-color: violet;
        grid-column: 1 / 3;
        grid-row: 4 / 5;
    }
    .orange {
        background-color: orange;
        grid-column: 3 / 4;
        grid-row: 2 / 5;
    }



    </style>
</head>
<body>
    <div class="red">A red red red</div>
    <div class="yellow">B yellow yellow yellow</div>
    <div class="green">C green green green</div>
    <div class="blue">D blue blue blue</div>
    <div class="violet">E violet violet violet</div>
    <div class="orange">F orange orange orange</div>
</body>
</html>
 .orange {
        background: url(https://images.wallpaperscraft.ru/image/podsolnuhi_malenkie_pole_nebo_krupnyy_plan_43149_480x800.jpg);        
		grid-row: 2 / 5;
    }

Try this way. If I understand correctly, write to me so that I know that I was not mistaken

Thanks very much for the response - yes that approach does work - sort of - in that I do get a part of the image where previously I only had the orange background. But what I am really after is being able to crop a part of an existing image to fill in the element. For example, I would like to be able to select the exact part of the image that I want by moving the pink rectangle. So - not the whole image - just the precise part that I want. Of course, this part would have to have the exact dimensions of the orange element. Can this be done?

@ttibsen If you need to crop an image use an image editor like the Gimp.
The following code may help you achieve your goal. Change the values to suit your needs. Here is what I use to create a background image.


.home_page_background {
    background-image: url('../images/mountain_with_transparent_background.png'), linear-gradient(#91BEE5, #FFFFFF);
    background-repeat: no-repeat;
    background-position: 100% 100%;
    min-height: 70vh;
}

You can use a background-size greater than 100% to “zoom” into the picture, and then use the background-position to decide which part of the image should be visible.

So this image of the little kid has a one / three aspect ratio. I have in my original code -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3 Column 4 Row Excercise</title>
    <style>
        body   {
        width: 600px;
        height: 800px;
        border: black solid 4px;
        box-sizing: border-box;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .red    {
        background-color: red;
        grid-column: 1 / 2;
        grid-row: 1 / 4;
    }
    .yellow {
        background-color: yellow;
        grid-column: 2 / 4;
        grid-row: 1 / 2;
    }
    .green  {
        background-color: green;
        color: yellow;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        }
    .blue   {
            background-color: blue;
            color: yellow;
            grid-column: 2 / 3;
            grid-row: 3 / 4;
        }
    .violet {
        background-color: violet;
        grid-column: 1 / 3;
        grid-row: 4 / 5;
    }
    .orange {
        background-color: orange;
        grid-column: 3 / 4;
        grid-row: 2 / 5;
    }



    </style>
</head>
<body>
    <div class="red">A red red red</div>
    <div class="yellow">B yellow yellow yellow</div>
    <div class="green">C green green green</div>
    <div class="blue">D blue blue blue</div>
    <div class="violet">E violet violet violet</div>
    <div class="orange">F orange orange orange</div>
</body>
</html>

the orange element has 200 X 600 dimensions - i.e. a 1 /3 ratio - so it should be a simple matter to alter the above code so that the existing orange element gets replaced by the kid in the image. So could someone write the code for that because I am at a loss.

You just have to give the .orange div your background-image:

.orange {
   background-image:url('your-img-path-here');
   background-repeat:no-repeat;
   background-size:100%;
}

BTW background-images are quite powerful but they’re tricky to master. Play around with background-size and background-position to get the hang of it.

 .orange {
        background-image:url("https://www.dropbox.com/s/1xamx4zllbt3cem/eva%201%20to%203%20aspect.jpeg?dl=0'your-img-path-here");
   background-repeat:no-repeat;
   background-size:100%;
        grid-column: 3 / 4;
        grid-row: 2 / 5;
    }

Hmm … this just gives me a white background -

My your-img-path-here is still in your URL

I took out the offending “your-img-path-here” but I still get a white background.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3 Column 4 Row Excercise</title>
    <style>
        body   {
        width: 600px;
        height: 800px;
        border: black solid 4px;
        box-sizing: border-box;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .red    {
        background-color: red;
        grid-column: 1 / 2;
        grid-row: 1 / 4;
    }
    .yellow {
        background-color: yellow;
        grid-column: 2 / 4;
        grid-row: 1 / 2;
    }
    .green  {
        background-color: green;
        color: yellow;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        }
    .blue   {
            background-color: blue;
            color: yellow;
            grid-column: 2 / 3;
            grid-row: 3 / 4;
        }
    .violet {
        background-color: violet;
        grid-column: 1 / 3;
        grid-row: 4 / 5;
    }
    .orange {
        background-image:url("https://www.dropbox.com/s/1xamx4zllbt3cem/eva%201%20to%203%20aspect.jpeg?dl=0");
   background-repeat:no-repeat;
   background-size:100%;
        grid-column: 3 / 4;
        grid-row: 2 / 5;
    }
 </style>
</head>
<body>
    <div class="red">A red red red</div>
    <div class="yellow">B yellow yellow yellow</div>
    <div class="green">C green green green</div>
    <div class="blue">D blue blue blue</div>
    <div class="violet">E violet violet violet</div>
    <div class="orange">F orange orange orange</div>
</body>
</html>

That is still not a valid img URL. You can get the actual URL by right-clicking the image --> “copy image address”, which for that picture is this:

https://uc5eaf414123e6808cdd9abdf28e.previews.dropboxusercontent.com/p/thumb/ABBAOe1w4xEFRVuh6ciOK6P1f0IyUmcmTr4O_KkIJHuHmyi0x0zgosXHKhduEW_DwBQexUMi4HR0gbB9AR86CziU42yMvJUFgp6PWBxY00j-2C_8qpvGhuWOxJBJY0TDsD_HOqx_SviwUybtLE3vFyohR1s6k3fM0849AqtaJXTz2haama3D0cxUdrvuTpmguQGXzrEXcGteD5OznJhgSEiduagYQZPaFsdx4L0riyPPR5TNi8mjbOoGo_nHAYvIO9HvbnPd_5NC80lmBgYRKol9JkdTqph-48fwZH9pw2sQV3_rZE1AWldlaIQkr43-RfuoesQae_GaGpurdT9P-ts_cggxhBc7cS70MqkPbkzsIrTluYXqVn7r2AjssSIOwiJWxnTkfVUcSBzyxIBkxTRJ/p.jpeg

OK - for sure the URL that I have this time is valid in that it does link to an online image - but again, as far as filling in the white element in my layout as a background, well - that’s still not working. The white element has 200 X 600 dimensions and the online image had a 1 / 3 aspect ratio so it should have fit perfectly (OK maybe with some tweaking by scaling) into the area - but no, that didn’t happen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3 Column 4 Row Excercise</title>
    <style>
        body   {
        width: 600px;
        height: 800px;
        border: black solid 4px;
        box-sizing: border-box;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .red    {
        background-color: red;
        grid-column: 1 / 2;
        grid-row: 1 / 4;
    }
    .yellow {
        background-color: yellow;
        grid-column: 2 / 4;
        grid-row: 1 / 2;
    }
    .green  {
        background-color: green;
        color: yellow;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        }
    .blue   {
            background-color: blue;
            color: yellow;
            grid-column: 2 / 3;
            grid-row: 3 / 4;
        }
    .violet {
        background-color: violet;
        grid-column: 1 / 3;
        grid-row: 4 / 5;
    }
    .orange {
        background-image:url(https://www.dropbox.com/s/1xamx4zllbt3cem/eva%201%20to%203%20aspect.jpeg?dl=0);
   background-repeat:no-repeat;
   background-size:100%;
        grid-column: 3 / 4;
        grid-row: 2 / 5;
    }
</style>
</head>
<body>
    <div class="red">A red red red</div>
    <div class="yellow">B yellow yellow yellow</div>
    <div class="green">C green green green</div>
    <div class="blue">D blue blue blue</div>
    <div class="violet">E violet violet violet</div>
    <div class="orange">F orange orange orange</div>
</body>
</html>

use background-image: url([any url here]);

If that is your current code, there’s still the invalid img URL.

It’s important to understand the difference between a page showing an image and the image itself. The link you have in the url is a page with an image, not the actual image.

Do what @jsdisco explained to get to the image link (or just copy the link he posted).

Here I have a valid address for the image and still the orange element just shows white instead of displaying the image.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3 Column 4 Row Excercise</title>
    <style>
        body {
            width: 600px;
            height: 800px;
            border: black solid 4px;
            box-sizing: border-box;
            display: grid;
            grid-template-rows: 1fr 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr;
        }

        .red {
            background-color: red;
            grid-column: 1 / 2;
            grid-row: 1 / 4;
        }

        .yellow {
            background-color: yellow;
            grid-column: 2 / 4;
            grid-row: 1 / 2;
        }

        .green {
            background-color: green;
            color: yellow;
            grid-column: 2 / 3;
            grid-row: 2 / 3;
        }

        .blue {
            background-color: blue;
            color: yellow;
            grid-column: 2 / 3;
            grid-row: 3 / 4;
        }

        .violet {
            background-color: violet;
            grid-column: 1 / 3;
            grid-row: 4 / 5;
        }

        .orange {
 background-image: url(https://previews.dropbox.com/p/thumb/ABDYbFFMOoOQCzXVlyc5z3FFez5sd5iD5vfjoAEuUXJ7ND2V7cFdsrcEz15rbcK1NKMjgzGDnTtnQMZ2jYiczR1hkHSwKJomLR0uubFfws0MbCevQbzsr9Qtwe707lre55Q4_JXxXJS2GRXqQFejn8ifXuUgcG0P1sGg-VWAkihRDxpI8eKVlBvOChUVV9BXAdazLScyaoyAH6b_c8VL1LjpezIKFGZDXJMwjS-XTm4EokrbswD0d8qVu2wXwVYFcUsOU2JBO4ZYm5zY1yAUfWiGa7EBMSjxj3gMQdRBk2Hwyp5oTlHTRVN1trnWOVmV4symWyOlj6CBG05OrPMkqs2u4ZXXAyWGeuW1Ztpg4n-N0g/p.jpeg?fv_content=true&size_mode=5);
            grid-column: 3 / 4;
            grid-row: 2 / 5;
        }
    </style>
</head>

<body>
    <div class="red">A red red red</div>
    <div class="yellow">B yellow yellow yellow</div>
    <div class="green">C green green green</div>
    <div class="blue">D blue blue blue</div>
    <div class="violet">E violet violet violet</div>
    <div class="orange">F orange orange orange</div>
</body>

</html>

Not a valid image URL…

To test it, open the URL in a browser. If it shows the image (and ONLY the image), it’s likely to be a valid URL.

Duh … … what am I missing here? The above url opens up a webpage that shows ONLY the image so it should be a valid url. The following from lasjorg

" It’s important to understand the difference between a page showing an image and the image itself. The link you have in the url is a page with an image, not the actual image"

was very helpful in that it made me realize the difference between a link and an image address. The former takes you to a webpage that has among other things, the image that you want. The latter has ONLY the image and nothing else. So for

<div style="background-image: url();">

you want the image address to go between the parentheses NOT the link - correct? But please comment on “Not a valid image URL…” because I don’t get that.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Placing Background Image</title>
    <style>
        .segment    {
            width: 300px;
            height: 700px;
           color: rgb(51, 51, 16);
           background-image: url(https://previews.dropbox.com/p/thumb/ABDiWl3qQcxCe89cZPZ0XRirD0x5MDwf9bjmHX12rT_wLAj1XHey-0htt85VzlOBNsxG_lPSEZSxE6RijKzlZxeoC2pUG6rkurJLlNIpdGJ17YZCY6zp1Zj0t6i2EDRtaJom9gldlVo3FVDRemtt75KTGJn5V1bxtLHiTgzO3NttUeNmUpSM87lZEVhV8yi7UJEwFeKNmpFuDWz3NkSemx6RiG5UA_zDXVWcBsNmEzHuRMLZtFUSSubhmuqOYwIpJ2KfLcMhfnTPMQ7f2E7x-qA3EDSr984W4szlH-u-iFJYE0Nr7yUeqWw-EOi0H193CpVvkSuatHkSYkFABAL5zjt0o91uF1lx_jHFthSLjOh-mQ/p.jpeg?fv_content=true&size_mode=5);
        }
    </style>
</head>
<body>
    <div class="segment">Segment of a Picture</div>
</body>
</html>

Since we are already on the topic of valid url’s to use when placing a background image, could someone tell me why - when I have a perfectly valid image address for my url - I still don’t get a background image for my div ?

I’m repeating myself but this is not a valid image URL. When I copy that address and open it in a browser, I get an error message. I’ve never used dropbox but if that URL is valid for you, it might be because you’re logged into your account or whatever.

I already pasted the valid URL above, you could try that instead. Here it is again:
https://uc5eaf414123e6808cdd9abdf28e.previews.dropboxusercontent.com/p/thumb/ABBAOe1w4xEFRVuh6ciOK6P1f0IyUmcmTr4O_KkIJHuHmyi0x0zgosXHKhduEW_DwBQexUMi4HR0gbB9AR86CziU42yMvJUFgp6PWBxY00j-2C_8qpvGhuWOxJBJY0TDsD_HOqx_SviwUybtLE3vFyohR1s6k3fM0849AqtaJXTz2haama3D0cxUdrvuTpmguQGXzrEXcGteD5OznJhgSEiduagYQZPaFsdx4L0riyPPR5TNi8mjbOoGo_nHAYvIO9HvbnPd_5NC80lmBgYRKol9JkdTqph-48fwZH9pw2sQV3_rZE1AWldlaIQkr43-RfuoesQae_GaGpurdT9P-ts_cggxhBc7cS70MqkPbkzsIrTluYXqVn7r2AjssSIOwiJWxnTkfVUcSBzyxIBkxTRJ/p.jpeg