Image Part as an Element's Background

1

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

I don’t think that cleared it up any :wink:

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:

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

3

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

4

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

You might be having trouble because you’re trying to load an image through dropbox. Try something a little simpler, like a placekitten image.

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

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

7

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.

8

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
image address332×510 38.6 KB

to get a url. Hope I have made myself clear with this query.

9

It’ll probably help to read Kirupa’s tutorial on relative and absolute URLs: Relative URLs and Absolute URLs | kirupa.com

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.

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.

10

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.