CODEWITHSUNDEEP
htmlcssimage
MarcusRaven86
MarcusRaven86

Reputation: 3

Setting a background image for another image?

I'm trying to make a simple method for adding screenshots into the middle of written content, and I'm having trouble getting the effect that I want. I have a background of some wooden planks I want to apply to all the screenshots (which will be all the same size), then scale the screenshot down so the background looks like a frame of sorts, and add a small white border so that it looks like a photo attached to the planks. So I could do something like below ite;} I feel like I'm on the right track, but I know I'm losing something in the understanding.

.43screen {
  background-image: url("https://www.hekwerkonline.nl/media/catalog/product/cache/83a5c387159ad68aba5e33ce14d10ed9/t/u/tuinscherm_douglas_19_planks_2.jpg");
  background-size: 100;
  padding: 10px 0px 10px 0px;
  border: 10px;
  border-color: white;
}
<img src="https://static.ah.nl/static/gall/img_26531_Gall_500.png" class="43screen" />

Upvotes: 0

Views: 64

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105863

you are missing border-style and probably background-position. As mplungjan told you already, class and id names should cannot have a number as a first letter (nor special characters) best is to name them in a way that it tells something (when you go through your code 6 month later, you will understand the purpose).

update from your comment

possible fix via background-clip or border-image, from your image which has a big area around the wooden structure , a waste of space. over the image to draw shadows arund edges to see where it stands

  .img43screen {
  padding: 0 10px;
  vertical-align: middle;
}

.img43screen.a {
  background-image: linear-gradient(white, white), url("https://www.hekwerkonline.nl/media/catalog/product/cache/83a5c387159ad68aba5e33ce14d10ed9/t/u/tuinscherm_douglas_19_planks_2.jpg");
  background-repeat: no-repeat;
  background-clip: padding-box, border-box;
  background-position: center;
  background-size: 110;
  border-style: solid;
  border-width: 50px 10px;
  border-color: transparent;
}

.img43screen.b {
  padding: 30px 40px;
  border-image-slice: 100 281 100 263;
  border-image-slice: 80 280 80 280;
  border-image-width: 30px 30px 30px 30px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
  border-image-source: url("https://www.hekwerkonline.nl/media/catalog/product/cache/83a5c387159ad68aba5e33ce14d10ed9/t/u/tuinscherm_douglas_19_planks_2.jpg");
}

img:hover {
  filter: drop-shadow(0 0 3px);
<img src="https://static.ah.nl/static/gall/img_26531_Gall_500.png" class="img43screen a" />

<img src="https://static.ah.nl/static/gall/img_26531_Gall_500.png" class="img43screen b" />

Upvotes: 0

user13995420
user13995420

Reputation:

that might work if you change class to start with word like it sais on top answer but correct way is make a div within it set a img like this

 <style>
  div{
   background-image:url('./img.png');
   position:relative
  }
  img{
   position:absolute;
   width:90%;
   height;90%;
   top:5%;
   left:5%;
  }
 </style>
 <div>
  <img src="./img.png"/>
 </div>

you must use position relative in parent or else will set to window not div so what happens is you create background then a img 90% of div then you set to center of div

Upvotes: 0

mplungjan
mplungjan

Reputation: 177691

You cannot start a class with a number

Also use a div instead

.screen {
  background-image: url("https://www.hekwerkonline.nl/media/catalog/product/cache/83a5c387159ad68aba5e33ce14d10ed9/t/u/tuinscherm_douglas_19_planks_2.jpg");
  background-size: 100;
  padding: 10px 0px 10px 0px;
  border: 10px;
  border-color: white;
  height:300px;
}

img { background-color:black; height: 80px; margin-left:200px; margin-top:50px; border: 2px solid white;}
<div class="screen">
<img src="https://static.ah.nl/static/gall/img_26531_Gall_500.png"  />
</div>

Upvotes: 2

Related Questions