Borders on Fixed Images

Mates:

The following code fixes an unadorned portrait onto the top left corner:

Code:

---

.page-name {
        background-image: url("../images/portrait.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: top left;
}

---

The person whose image is presented is deceased. I want to note that fact with a black border surrounding his image. Attempting to do that, I append the following code:

Code:

---

        border-width:16px;
        border-color:#190707;
        border-style:solid;

---

The appended code puts the black border on the entire page. How can I limit the black border to just the image?

Hi there marain,

it would be helpful to see the image in question and also the HTML involved.
Members might then be able to provide possible solutions. ;)

coothead

Hey Coothead,

The page is https://www.njmarijuana.com/page.php?here=epting .

A.

Hi there marain,

the easiest way out for this would be to use this image instead...

Attachment 6369

coothead

Hi marain,
In your css-file (njmarijuana.css) it says that the class names are associated with the body-element of particular pages, so it's only natural that the body gets the borders, not the image itself in the body. It's better to style the image itself, for instance:

Code:

---

<img src="https://www.njmarijuana.com/images/eptingResized.jpg" alt="" style="position: fixed; left:0; top:0; width: 22%; min-width: 200px; border-width:16px; border-color:#190707; border-style:solid;">

---

You could however apply your background-properties to a div inside the body:

Code:

---

<div style="position: absolute; left: 0; top: 0; width: 370px; height: 344px; background-image: url('https://www.njmarijuana.com/images/eptingResized.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: top left; background-size: 370px 344px; border-width:16px; border-color:#190707; border-style:solid; box-sizing: border-box">
</div>

---

but in your case that method requires you to take the dimensions of the picture (here: width: 370px; height: 344px) into account. Applying the css to the image itself doesn't have this disadvantage.

Folks,

Coothead's solution was easier to implement (as is now done).

Molendijk's explanation of why I was getting what I was getting I had already figured out, just did not know how to get around it. Molendijk showed me. Implementing it is a bit more laborious than Coothead's, but more elegant. I will use it when I can find the time.

I thank BOTH of you!

A.

Hello Marain,
As you intend to examine the matter further when you can find the time, I'd like to add that my remark in #5 about the need of knowing the dimensions of the picture was a bit too categoric, see code on this page.