Search code examples
htmlcssbackground-image

Trying to set background image with inline css

I'm setting up a basic html site. I want to use an image for my background for the landing page. I'm trying to use css inline (I thought this would be easiest...go figure).

In my body tag, I've got the color I want, "darkkhaki". But the property for the background image is not coming up. I have uploaded to my flickr account the image I want, but no go. I did notice in my ST3 window that the closing parenthesis is highlighted red, but I can't find out why.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: darkkhaki;
  background-image: https://www.flickr.com/photos/132197683@N04/33747163168/in/dateposted-public("praetorian_punisher.png");
}

h1 {
  color: red;
  text-align: center;
}

I would like to see the .png file as the background. It's not coming up, though.

Thx for any help.

Solution

  • First, you should do it like this:

    body {
  background-image: url(...);
}

    Second, the url you're trying to use points to HTML page, not to the image itself. Correct url would be https://live.staticflickr.com/65535/33747163168_9f12d3a173_b.jpg.

    body {
  background-color: darkkhaki;
  background-image: url(https://live.staticflickr.com/65535/33747163168_9f12d3a173_b.jpg);
}

h1 {
  color: red;
  text-align: center;
}
    <h1>Hello!</h1>