Using Part of an Image for Background

ttibsen · January 20, 2021, 5:52pm

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>

n000b1 · January 21, 2021, 3:17pm

 .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

ttibsen · January 21, 2021, 6:33pm

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?

brandon_wallace · January 21, 2021, 6:54pm

@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;
}

jsdisco · January 21, 2021, 8:39pm

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.

ttibsen · January 21, 2021, 10:10pm

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.

jsdisco · January 21, 2021, 10:30pm

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.

ttibsen · January 21, 2021, 10:45pm

 .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 -

jsdisco · January 21, 2021, 10:52pm

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

ttibsen · January 22, 2021, 1:49am

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>

jsdisco · January 22, 2021, 9:22am

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

ttibsen · January 22, 2021, 4:25pm

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>

Barayturk · January 22, 2021, 5:45pm

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

jsdisco · January 22, 2021, 6:27pm

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

lasjorg · January 22, 2021, 6:39pm

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).

ttibsen · January 22, 2021, 10:57pm

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>

jsdisco · January 23, 2021, 10:19am

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.

ttibsen · January 23, 2021, 3:27pm

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.

ttibsen · January 23, 2021, 3:35pm

<!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 ?

jsdisco · January 23, 2021, 3:49pm

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

Topic		Replies	Views
Image - Resizing Curriculum Help css , html	2	497	October 21, 2019
Box-shadow is being cut out, how is this fixed? Curriculum Help css , html	41	9888	July 18, 2021
Can't Quite Place Background Image Curriculum Help css , html	2	305	January 25, 2021
So confused why this is not working Curriculum Help css , html	1	659	July 4, 2018
Preventing background image from appearing sideways Curriculum Help css , html	14	614	July 1, 2021

Using Part of an Image for Background

Related topics