Borders on Fixed Images

[marain]

Mates:

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

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

        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?

[coothead]

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

[marain]

Hey Coothead,

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

A.

[coothead]

Hi there marain,

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

coothead

[molendijk]

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:

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

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

[marain]

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.

[molendijk]

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.