Gif Background Help


#1

Help! I tried putting a gif to a background image, but when I try on Notepad++, it only show on top of the text…here it is:Hexahedron Rotation FEZ can someone help me? Also, this is from Google so when i try to put it from my folder on PC, it won’t work as well. :frowning:


#2
<div>
  <p>Some textual content</p>
</div>

CSS

div {
    width: 100px;
    height: 100px;
    background-image: url(url_to_image);
}

#3

Thanks! I’ll try it today!


#4

Ok, so do I have to make a CSS file and put it there or put it on the div…


#5

Ideally, a separate CSS file, yes. Alternatively, an embedded style sheet in the HEAD of the document.


#6

Oooooohhhhh…so put the CSS file in the same folder as HTML?


#7

It can be in the same folder though for better organization, it could be in its own CSS folder.

+project/
    +css/
        -style.css
    +js/
        -script,js
    -index.html

A style sheet file contains only CSS, and nothing else.

See the examples below for embedded and external style sheets:

Embedded

<head>
  <title></title>
  <style>
    /* css selector rules */
  </style>
</head>

External

<head>
  <title></title>
  <link href="css/style.css" rel="stylesheet">
</head>

#8

I’ll try my best! :smiley: