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>
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
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" />
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" />
When I do that it puts the border around the background image, not the inset image that I actually want the border on.
@MarcusRaven86 okay, i think i see what you looked for. you may look at border-image or background-clip with a gradient to draw the inside area. both approach are added to the snippet updated.
