Photoshop Question posted in
The official user guide can be found here.

html background image not showing at all – Photoshop

I started a website from scratch so it is pretty empty so far. I started the first div, the css and then I hit a problem like I always do. The background image would not show up. I tried to change the directory to the same as the HTML (it is in /assets/img/ usually). I also put it into photoshop and exported it as a png incase that was the problem. When I use a background-color code it works but I can’t get the image to work. Ill show code below:

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="apple-touch-icon" href="assets/img/logo.png"/>
<link rel="shortcut icon" href="assets/img/logo.png"/>
<link rel="stylesheet" href="assets/css/style1.css"/>
</head>
<body>
<div id="content">
<h1>content</h1>
</div>
</body>
</html>

CSS:

body, html {
margin: 0;
padding: 0;
font: 1em/1.2 "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
width: 100% !important;
height: 100% !important;
background-image: url('../assets/img/backdrop.png');
background-color: transparent;
}

h1,h2,h3,h4,h5,h6 {
margin: 0 0 .5em;
font-weight: 500;
line-height: 1.1;
}

h1 { font-size: 2.25em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.375em; }
h4 { font-size: 1.125em; }
h5 { font-size: 1em; }
h6 { font-size: .875em; }

#content {
max-width: 80em;
margin: 0 auto;
background-color: rgba(255,255,255,.3);
}

.img-responsive { max-width: 100%; }
Tags:

2

Answers


  1. 0

    I think there is an error in your img link change this :

    background-image: url('../assets/img/backdrop.png');

    to this :

    background-image: url('../img/backdrop.png');
    Login or Signup to reply.
  2. 0

    try changing it to 

    background-image: url('../img/backdrop.png');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search