Html Question posted in
Some basic documentation can be found here.

Html – Why cant i put background img/color in my code? (Ik its poorly made)

i really really need help the quickest you can
i tried a milion times and nothing
im in tutorial hell ig
its to pass my 1st semester (i joined the class on th 2nd semester)
heeeeeeeeeeeeeeeeeeeeellppppppppppppppppppppppppppppppp

for some reason i cant put anything in my background

thats my HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>omnie</title>
    <link rel="stylesheet" href="styledsrt.css">
</head>




<body>
        
        <div class="container">
            <div class="item1"><img src="example photo.png"></div>
            <div class="h1"><h1>Semestr 1</h1></div>
            <div class="p1"><p1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.</p1></div>

        </div>
    
    </body>
</html>

And heres the css

.body{
    
    position:absolute;
    background-image: url("tlostronki.png") no-repeat center center fixed;
    background-size: cover;
}
.container{
    height: 900px;
    width: 600px;
    border-style: solid;
    border-color: burlywood;
    border-radius: 9% ;
    margin-top: 65px;
    position: relative;
    padding: 10px;
    background-color: burlywood;
    margin-left: 40%;
    text-align: center;
    
  
}

.item1 {
    vertical-align: middle;
    margin-top: 40px ;
    border-radius: 7%;
    left: 23%;
    position: relative;
    
    cursor: pointer;
    border: 1px solid #dfe2e5;
    background:grey;
    width: 320px;
    height: 420px;
   
    
    transition: transform 250ms;
    transition-timing-function: linear;
    transition-delay: 300ms;
    
    
    
    ;}
    

.item1:hover:hover {
    border-color: rgb(51, 65, 70);
    border: 3px solid;
    
        color: inherit;
        position: relative;
        transition: 370ms ;
        transition-timing-function: linear;
        transition-delay: 0ms;
        transform: translateY(-10px); 
        
    
    
        
    
    width: 320px;
    height: 430px;
        
       
        top: -15px;
        
        
        box-shadow: 1px 1px 0px , 2px 2px 0px darkgrey, 3px 3px 0px darkgrey, 4px 4px 0px darkgrey, 5px 5px 0px #56542a;
        background: grey;}

  .h1{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-top: 30px;
    font-size: x-large;
  }  
  .p1{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:large;
  }
  .container2{
    position:absolute;
    background-image: url("tlostronki.png") no-repeat center center fixed;
    background-size: cover;
  }

its a school project

i tried almost everything
(i really need help)

Tags:

2

Answers


  1. 0

    There are below mistakes in code

    • You have a tag in your HTML, but it should be

    • In your CSS, .body should be body without the dot (.). You’re targeting the tag, not a class named body.
    • In .item1:hover:hover, you only need one :hover pseudo-class.
    • Make sure your background image paths are correct.
    Login or Signup to reply.
  2. 0

    It’s just because you put ".body" .
    body is not a class! use "body{}

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search