How to Create a GIF Background for a Web Page
Animated Web page backgrounds can be eye-catching, and you can create them using GIF files. When you add text and other content to your business Web pages, you don’t have to worry about adding backgrounds: browsers simply give your pages white backgrounds if you don’t override that default. Add a short CSS class to an HTML Web page to use animated and stationary GIF images as the page’s background.
Open an HTML document and find the document's head section.
Paste the following code into that section:
This code defines a CSS selector that styles your document's body tag. The background-image attribute has a URL property whose value is "myImage.gif." Change that value to the name of one of your GIFs. The second line defines a background-repeat attribute whose value is "repeat" in this example. This value tells browsers to make the image repeat across the page and down the page to produce a grid effect. Delete that statement if you don't want your GIF to create a tiled background.
Save the document and view it in your browser to see the new background.
- Tizag.com: CSS Tutorial — Introduction
- W3Schools.com: CSS Background-Position Property
- Replace "repeat" with "repeat-x" if you want your GIF to repeat horizontally; replace it with "repeat-x" to make the image repeat vertically.
- Give the background color by adding "background-color:colorName" to the CSS code. Replace "colorName" with a color such as "Yellow" or "Blue." The GIF image will still appear in the background, but the background will also display the color you choose.
- If you choose an animated GIF as your background, it will move when site visitors view your page.
- Use JPEG or PNG files to display large images such as photographs. GIFs can only display 256 colors, and are usually used to display clip art, logos and other small images that don’t require many colors. However, you must use an animated GIF to animate your background. Animated GIFs often have large file sizes because the GIFs contain multiple images that create the illusion of motion. Use animated GIFs sparingly, and try to keep them as small as possible to help your Web pages load faster.
- You can also add a background-position attribute to your CSS, with values such as center, left top and right bottom. Add this attribute to make your GIF appear at specific locations in the background.
After majoring in physics, Kevin Lee began writing professionally in 1989 when, as a software developer, he also created technical articles for the Johnson Space Center. Today this urban Texas cowboy continues to crank out high-quality software as well as non-technical articles covering a multitude of diverse topics ranging from gaming to current affairs.
Как установить анимацию на фоне?
В последнее время стало очень популярным добавление небольшой анимации на сайт. Это придает эффект реальности в некотором плане. Вследствие этого все чаще и чаще слышишь про программу Flash. С ее помощью можно создавать интерактивные анимации, которые в дальнейшем вставляются на сайт. Существует также более старый способ, который в последнее время стал очень популярным в социальных сетях. Речь идет о изображениях в формате .gif, которые обладают способностью последовательно менять кадры. Благодаря этому можно создать анимацию.
Чтобы создать свою анимацию, которая попадет на сайт, не требуется большого ума или сверхспособностей. В первую очередь нужен графический редактор. Вполне подойдет один из самых популярных — Adobe Photoshop. В этой среде создается анимированная картинка. Кроме этого существует много сайтов с целыми библиотеками готовых анимашек, если тебе лень создавать свой документ, можешь порыться в интернете и найти достойную анимацию. А после этого все просто элементарно, работаем в том же режиме, когда нам нужно установить обычную фоновую картинку, то есть обращаемся к свойству background, как это показано в примере
На заметку
При использовании анимации следует помнить, что они привлекают к себе внимание. В одних случаях это может сыграть вам на руку, а в других — помешать. К примеру, когда анимация будет отвлекать пользователя от изучения основной информации сайта.
20 Animated Backgrounds [Pure CSS]
You can use a CSS background animation to help your site stand out from the crowd, emphasise your branding, or simply to look awesome. And because CSS has gotten so powerful, you can create some great-looking CSS background effects without needing a single line of JavaScript. Now you can even create a video background just with CSS!! Who would have told us that 15 years ago, huh?
So, here are 20 great animated backgrounds you can use in your projects, or draw inspiration from! Ideal for hero slider websites.
1) Animated Background Colours in CSS
Let's start with the basics. A simple colour fade — you can use @keyframes to fade the background between as many colours as you need and use the percentages to determine how long the animation will stay on that colour before changing.
Simple, easy to implement, and effective.
2) CSS Animated Background Gradient
Now let's take it up a notch — instead of a single colour fading into another, you can add an extra touch of class with a gradient, pleasantly sweeping back and forth across the screen. This is one of the easiest ways to make a moving background in CSS.
3) Floating Squares
Time to add some objects into the mix! Here's a cool moving background (CSS only, believe it or not) by TokyoWeb. These semi-transparent rotating squares float up the screen.
This looks cool as-is, but the cool thing is, you can play around with the code to create different colours, shapes, directions, and speeds. Put your creative hat on and see what you come up with.
4) Fireworks CSS background effects — version 1
This pure CSS animated firework effect would look great by itself (could be cool on a "Congratulations" or "Success" page or something like that), but could look even cooler with a foreground image, maybe a cityscape.
5) Fireworks CSS background effects — version 2
Here's another approach you could take to fireworks — this version has a different feel — the particles have a more natural movement, almost as if there's a gravity to them.
6) Seeding CSS background effect
This moving background (CSS only) feels a bit like moving through a ball pool at warp speed. I like it.
7) Blurred Lines
If Robin Thicke made CSS background effects, this might be the sort of thing he came up with. This one is eye-catching without being distracting — notice that even with this quite light typeface, the text is still easy to read.
8) Retro Grid Animated CSS background
Are you a fan of the 80s retro look? Are you building a site for a synthwave artist? Or can you simply not let go of the past? If the answer to any of these questions is "Yes", then you'll love this excellent Tron-style retro grid animation!
You can change the colours with the variables $computationalFogBot setting the background, and $nodeStreak setting the colour of the bars.
For another example in this theme, check out this one, too:
9) Snowfall Effect Animated Background (CSS only)
I don't know whether it's the festive season at the time you're reading this. For me, it doesn't matter. I'll put my Santa hat on and watch Elf any time of year. If you feel the same, then here's a nice snowfall effect for you — with actual snowflakes!
10) Parallax Snowfall Background
What's that you say, you want even more snow? OK. How about this one then? This has much heavier snowfall, and a very nice parallax effect to boot.
11) Infinite triangles
This one plays tricks with your brain. Are the triangles moving up or down? Expanding or contracting? No one knows — that's the fun.
12) Floating Heart Infinite Animation
Much like the triangles above, here's another CSS background animation that falls squarely into the "trippy" category. With this one, not only do you get a cool background animation, but you get to open your chakras at the same time. Bonus.
13) CSS Fireflies
These little fireflies invoke a sense of wonder and intrigue. The effect looks cool with the forest background, but works really well on just a plain colour, too:
14) Hypno-Squares
These Hypno squares are cute and pretty unique. Don't look at them too long though — they might be transmitting subliminal messages to your subconscious mind.
15) Blurry Bubbles Animation
These blurred/slightly out of focus bubbles pop into existence seemingly at random, bring delight and happiness for a short time, and then slowly but inevitably fade away. Which, incidentally, is also an accurate description of my love life — but that's a story for another time.
16) CSS Animated Lava Lamp
OK, so far you've seen some cool CSS background animation examples which you can pretty much plug-and-play. Now let's explore what's possible when you're at the top of your game — starting with this CSS-only lava lamp by Janos Szudi!
17) Matrix Effect Animated Background (CSS)
This is nice. The whole thing is actually done just through colour changes on the little square elements, creating an instantly recognisable effect.
18) Lighthouse at night CSS background animation
How about this amazing piece of work by Cameron Fitzwilliam! Now, this one does use JS. but. the JS just controls the way the image reacts to your mouse movement. You can delete all the JS and the animations on the wave and the lighthouse light will still work. So I'm allowing it.
19) Single Div Pure CSS Book Search
This is a really nice and cute CSS animation by the awesome Lynn Fisher. But check out the HTML box in the editor. No, don't adjust your monitor, you are seeing that right — she made this using a single div. Pure CSS doesn't get any purer than that! Or does it.
20) No Div Car CSS animation
Here abxlfazl khxrshidi has gone a step further, and made this CSS animated background of a car (one that's gonna get pulled over very soon by the looks of it!), with no div at all!
Check for yourself, the HTML box is empty, apart from comments. How they've done it, is to apply all their CSS to the html element.
It's pretty amazing what you can come up with when you've mastered your craft! But one of the cool things about front end web development is that we can use code snippets, libraries, and CSS frameworks made by people much more skilled than us. That way, we don't have to wait until we reach mastery to start making really cool stuff.
One such library I recommend you check out is fullPage.js.
fullPage helps you build full page sites — where you split your webpage into chunks, each taking up the full size of the user's browser. You know the type — as you scroll, you move to the next page, rather than scrolling down just a little bit. Don't know yet what I'm talking about? Just check out these 20 examples of one-page websites and your doubts will disappear.
With fullPage you'd be able to integrate the different CSS background animations we've just looked over here, maybe putting a different one on each page. If that sounds like something that might work well on one of your projects, then check out some examples of what it can do here: fullPage.js examples.
Related Posts
About the author:
Warren Davies is a front end developer based in the UK.
You can find more from him at https://warrendavies.net
report this ad
report this ad
How to display a gif fullscreen for a webpage background?
I’m trying to make a GIF fit my whole screen, but so far its just a small square that is on my screen while the rest is white. However, I want it to take up all the space.
7 Answers 7
if it’s background, use background-size: cover;
IMG Method
If you want the image to be a stand alone element, use this CSS:
Please note that the img tag would have to be inside the body tag ONLY. If it were inside anything else, it may not fill the entire screen based on the other elements properties. This method will also not work if the page is taller than the image. It will leave white space. This is where the background method comes in
Background Image Method
If you want it to be the background image of you page, you can use this CSS: