Simple CSS Box with Image Background

HTML & CSS
1

Hello, I’m trying to make a very simple css box with a image I have so that I can write on top of it. I tried googling it but the only help that came out was to use 4 different conners… Thanks!

2

that isn’t to hard


.myBox{
    width: 200px;
    height: 200px
    background: url(myimage.jpg) no-repeat;
}
3

I’m sorry im a little new… I tried this:


.myBox{
    width: 200px;
    height: 200px
    background: url(images/newsbg.png) no-repeat;

and


<div id="myBox"> This is my box
</div>

The text shows but no img. any susgestions. And thank you for your previous help!

4

Is the path to your image correct?

5

You do not have a closing bracket around the myBox class and the height does not have a semi-colon to end it.
All the changes above would have made the CSS more proper in writing, but the problem is that the id of the div is myBox not the class.
in styling ot reerring to classes/id’s of elements, a . refers to a class and a #refers to the id

so if <div id=“myBox”>This is my box</div>
refer to it in the styling as #myBox

if <div class=“myBox”>This is my box</div>
refer to it as .myBox

So this should work (changes in bold):
<!doctype HTML>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title> CSS Box with Image BG </title>
<style>
#myBox{
width: 200px;
height: 200px;
background: url(images/newsbg.png) no-repeat;
}
</style>
</head>
<body>
<div id=“myBox”>
This is my Box
</div>
</body>
</html>

Regards,
Team 1504

6

Thank you for explaining that team1504, It worked. And also thank you for helping me donboe! :slight_smile: