Ein Bild hinter Text in einen einzelnen Grenze legen ⇐ CSS

[Anonymous]

Ich versuche, Bilder in jeden einzelnen Grenze hinter den Texten zu setzen. Ich werde in jedem Feld 4 verschiedene Bilder einfügen. Wenn ich die Box zu HTML hinzufüge, funktioniert es gut, bleibt aber nicht im Rand. Ich weiß, dass der Weg korrekt ist, weil ich ihn in HTML sehen kann. Ich habe verschiedene Displays, Positionen, Höhen, Breiten ausprobiert, nichts hat funktioniert. PrettyPrint-Override ">

Code: Select all

*{
box-sizing:border-box;
margin:0;
padding:0;
}

/* > THIS CSS < */

html {
background: #ADA996;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/* name should be centered left */
#name {
font-family: "Tangerine", cursive, sans-serif;
align-content: center;
margin-right: 10%;
font-size: 6.5rem;
}

.overall-profile {
display: inline-grid;
max-width: 100%;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 1fr;
align-items: center;
gap: 26px;
margin: 10% 5%;
}

#main-part {
display: inline-flex;
align-content: right;
justify-content: center;
}

@media (max-width: 532px) {
.overall-profile {
grid-template-columns: 1fr;
}
}

.overall-profile-image {
border-style: groove;
border-radius: 50px;
height: 20rem;
border: 10px solid black;
border-radius: 18px;
height: 380px;
width: 400px;
text-shadow: 2px 2px 3px rgba(0, 0, 0, .2);
box-shadow:
-6px -6px 26px rgba(255, 255, 255, .83),
5px 10px 15px rgba(0, 0, 0, .05),
15px 20px 35px rgba(0, 0, 0, .1),
inset -2px -2px 2px rgba(0, 0, 0, .1),
inset -1px -1px 3px rgba(255, 255, 255, .6),
inset 2px 2px 8px rgba(255, 255, 255, .2),
inset 1px 1px 8px rgba(255, 255, 255, .2),
-6px -6px 26px rgba(255, 255, 255, .8);
background-color: #e9e9ef;
margin: auto;
transition: 300ms ease-out;
cursor: pointer;
display: grid;
place-content: center;

}

.overall-profile-image:hover {
box-shadow:
4px 4px 6px rgba(0, 0, 0, .2),
5px 10px 35px rgba(0, 0, 0, .1),
8px 10px 25px rgba(0, 0, 0, .1),
inset -1px -1px 9px rgba(0, 0, 0, .2),
inset -1px -1px 3px rgba(255, 255, 255, .6),
inset 1px 1px 8px rgba(255, 255, 255, 1),
inset 4px 4px 24px rgba(0, 0, 0, .15),
-5px -5px 15px rgba(255, 255, 255, .9);
transform: scale(.98);
}

/* Media queries will apply styles, depending on the check, for example, if the screen is smaller than 1200px */
@media (max-width: 1200px) {
#main-part {
/* align the flex items vertically */
flex-direction: column;
}

.overall-profile-image h1 {
font-size: 1rem;
}

#strength{
background-image: url(https://placehold.co/600x400/png);
}< /code>




Mawusi Amos

Mawusi Amos







Strength and Conditioning




Coding



Instructor



Personal Trainer