Having Problems With <div> background images

Nothing is appearing. The validator found nothing wrong.

Here’s My HTML

<!DOCTYPE html>
<html>
	<head>
		<title> </title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<meta charset="utf-8">
	</head>
	<body>
		<div class="one"></div>
</body>
</html>

And Here’s my CSS

.one  {
         background-repeat:repeat;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAA1BMVEUaFxs5LVYGAAAAIUlEQVRoge3BgQAAAADDoPlTX+EAVQEAAAAAAAAAAACPASd0AAGLis+ZAAAAAElFTkSuQmCC");
}

Part of the reason is that your div has nothing in it.

4 Likes

Hi there josephkennick,

and a warm welcome to these forums. :winky:

As your “data:image/png;” is just a solid color, you
might as well use “background-color” instead…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
.one  {
    padding: 1em;
    background-color: #1a171b;
    font-weight: bold;
    color: #fff;
    text-align: center;
 }
</style>

</head>
<body> 

 <div class="one">lorem Ipsum...josephkennick</div>

</body>
</html>

coothead

1 Like

The validator looks for properly formed code. It does not know what you expect that code to do.

Your div has no “solid” (foreground) content, therefore it has no size. Background images/colors/etc have no size. Just like @coothead’s background-color example, without a size (or foreground content), the expected “window” is closed.

You can get a clue to your problem by assigning an outline to the HTML boxes:
* {outline:1px dashed red}
or similar. You will see that the div is a line across the page.

Have you ever completed a basic HTML and CSS course???

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.