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

6369



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 (http://mesdomaines.nu/eendracht/fixed_responsive_img_with_borders/fixed_responsive_img_with_borders.html).