How may i put a backroung-image on my divs-CodePudding

Hi everyone here the modelim working on, I need to include pictures instead of lightgrey divs

I tried to just put a background-image: url('assets/1.jpg') for each div but it just never work may someone tell me how this parameter work ? If i coud just put an image background it woud fit perfectly to the model

tysm

CodePudding user response：

div {
   /* Background pattern from Toptal Subtle Patterns */
   background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
   height: 400px;
   width: 100%;
}

CodePudding user response：

For local images you have to make sure they are located in the same folder as the HTML File:

background-image: url(yourimage.jpg)

If using an assets or images folder:

background-image: url(./assets/yourimage.jpg)

For the image to fit perfectly, make sure the div and the image have the same dimensions. EX: if my image is 400px by 100px then my div should have:

width: 400px;
height: 100px;