# Image Part as an Element's Background

**URL:** <https://forum.kirupa.com/t/image-part-as-an-elements-background/645741>\
**Category:** Uncategorized\
**Created:** [January 18, 2021, 8:00pm UTC](https://forum.kirupa.com/t/image-part-as-an-elements-background/645741 "2021-01-18T20:00:39Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [January 18, 2021, 8:00pm UTC](https://forum.kirupa.com/t/image-part-as-an-elements-background/645741/1 "2021-01-18T20:00:40Z")

</div>

Now that I have the basic grasp of grids, I am wondering how I could take one of these elements - say the red - and have a part of an image as a background to the text? Just to be clear - this would be like taking a screenshot of part of an image where the dimensions of the screenshot are the same as that of the red element. Is that possible?

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

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [January 19, 2021, 6:06pm UTC](https://forum.kirupa.com/t/image-part-as-an-elements-background/645741/2 "2021-01-19T18:06:38Z")

</div>

> [@John\_Stern](#):
>
> Just to be clear - this would be like taking a screenshot of part of an image where the dimensions of the screenshot are the same as that of the red element.

I don’t think that cleared it up any 😉

You can certainly have image-based backgrounds for your elements. And those backgrounds can be scaled and moved within the element boundaries to fit it any way you like. I’m just not sure how you want that to be done given your description.

The background docs can be a good jumping off point:

> **[background - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background)**
>
> The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default...

What also might be of interest is the background-size and background-position properties:

> **[background-size - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)**
>
> The background-size CSS property sets the size of the element's background image.
> The image can be left to its natural size, stretched, or constrained to fit the available space.

> **[background-position - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position)**
>
> The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin.

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [January 20, 2021, 5:29pm UTC](https://forum.kirupa.com/t/image-part-as-an-elements-background/645741/3 "2021-01-20T17:29:13Z")

</div>

OK thanks - I’m off to do the suggested homework🙃

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [January 22, 2021, 11:08pm UTC](https://forum.kirupa.com/t/image-part-as-an-elements-background/645741/4 "2021-01-22T23:08:47Z")

</div>

I obviously still do not know what I am doing since - I have the image address for a 300 X 700 image so that it should fit perfectly into the .segment div but nothing! I thought that with this code, I was following all the rules for getting an image into an element but something is still amiss.

```
<!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: yellow;
            background-image: url(https://previews.dropbox.com/p/thumb/ABD4Gw_iOFVDfGU38-2nD2130n1drPGdIvF6HwwBZ5w_Mc_BpCdmbM8Jk5o6XJ7ytBY1mIFGZ5WqR-ZkdhspfQZKLef73xveq86St6eK-bReP5d6eomCoy8oqLq_W-Kb-CRu0vWQTqDk4xQzgyUbgA2KKhsn6qfjq1JSTcNLlpNLYth9cytZGwEKhDOKPDEchFjYEd8iQl4r6NNb5JOahQYN2ERXT1MgY57KF-O6ZRtfTr9_TdA4Sfli0f6LBn0-CsbtACTcGmAlFUQ1ZV6Q3wMQQOQB28yCPfRFQcHOsPKHJL6UQH0BrId-TDB9DZVtHMocF9FCP-IXIUr8IrdKqpksQUodHxDlVJpgrDyVH-VqPA/p.jpeg?fv_content=true&size_mode=5);
        }
    </style>
</head>
<body>
    <div class="segment">Segment of a Picture</div>
</body>
</html>
```

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [January 23, 2021, 2:16am UTC](https://forum.kirupa.com/t/image-part-as-an-elements-background/645741/5 "2021-01-23T02:16:24Z")

</div>

You might be having trouble because you’re trying to load an image through dropbox. Try something a little simpler, like a [placekitten](https://placekitten.com/) image.

```
    .segment {
        width: 300px;
        height: 700px;
        color: yellow;
        background-image: url(//placekitten.com/300/700);
    }
```

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [January 23, 2021, 4:06pm UTC](https://forum.kirupa.com/t/image-part-as-an-elements-background/645741/6 "2021-01-23T16:06:26Z")

</div>

👏👏👏  
Excellent - just what I needed! But as one answer usually leads to another question (or two) I have to ask - rather than a url, can the image you want to place, reside on your computer? The reason I ask is that, as I tend to be really really nerdy, I want total customization over my background image meaning - something cropped from my iPhoto collection sized to fit perfectly within my div. I can do this on my iMac no problem but the only way I know to assign a url to that perfectly cropped and sized image is to put it into DropBox. So it would be nice if I didn’t have to go through the additional hassle of going through DropBox.

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [January 23, 2021, 5:00pm UTC](https://forum.kirupa.com/t/image-part-as-an-elements-background/645741/7 "2021-01-23T17:00:45Z")

</div>

Your images need to be accessible to whoever is viewing the page. If you’re looking at the page on your computer, you can use images on your computer because you can access them there (its your computer after all!). If someone online is looking at the page, they can’t access images on your computer so they won’t be able to see those images on the page. Same applies to images in your dropbox account; if they can’t access your account, they can’t access images there.

There are some additional internet rules that can come into play too, like whether or not images can be shared across domains or not and things like that. But generally you’ll want to keep your images with your HTML. So if you host your HTML up on the web on some server somewhere, your images should go there too.

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [January 24, 2021, 2:12am UTC](https://forum.kirupa.com/t/image-part-as-an-elements-background/645741/8 "2021-01-24T02:12:06Z")

</div>

So this is taking me down a bit of a rabbit hole that I probably shouldn’t be diving into but I will anyway. If I understand correctly, if you have an image titled -  
bugsbunny.jpeg - and that image is in the same folder as your .html page, there’s not going to be a problem in using that image as say - a background for one of your elements. This is for the offline situation where everything is still on the iMac.  
Now if we switch to the online situation, is it possible to have the same folder hosted on a web server in which case the image could still simply be referenced with its name - bugsbunny.jpeg - so there would not be any need to do this -

 ![image address](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/2/27d3e008d16eec320e3031da76d67fb18311f073.jpeg)  
to get a url. Hope I have made myself clear with this query.

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [January 24, 2021, 5:27am UTC](https://forum.kirupa.com/t/image-part-as-an-elements-background/645741/9 "2021-01-24T05:27:13Z")

</div>

It’ll probably help to read Kirupa’s tutorial on relative and absolute URLs: [Relative URLs and Absolute URLs | kirupa.com](https://www.kirupa.com/html5/relative_urls_and_absolute_urls.htm)

The ‘copy image address’ command will probably always give you an absolute URL, since it’s copying without context. But there’s no consistent reason that it won’t be a `file:///` URL or `https://` URL, since that depends on the context of your browsing environment.

> [@John\_Stern](#):
>
> so there would not be any need to do this

Yes, the concept of a relative URL translates to the server domain as well. If you somehow manage to upload an HTML file to `mysite.example.com/files/index.html`, you can reference images in `index.html` with relative paths, like `<img src="bunny.png" />` for an image adjacent to `/files/index.html`, if `bunny.png` is at the path `/files/bunny.png`.

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [January 24, 2021, 3:05pm UTC](https://forum.kirupa.com/t/image-part-as-an-elements-background/645741/10 "2021-01-24T15:05:18Z")

</div>

Good - that’s what I wanted to hear (I think). Thanks for your input. I will study the link you provided as I have never heard the terms - relative and absolute - with respect to url’s.