I need to make a website for a project. How can I make a moving gif as a fullscreen background?
Here is what I've done so far (an example)
HTML
<head>
<title>OFFICIAL SQUIDDINC</title>
<div class="gif-container"></div>
<head>
<html>
CSS
html, body {
height: 100%;
margin: 0;
}
.gif-container {
background: url("image.gif") center;
background-size: cover;
height: 100%;
}
There's a couple of things gone amiss in this snippet.
For the HTML;
You're missing an opening <html> tag. Albeit this may just be a bad copy paste for the question.
Your <title> is the only thing here that belongs inside the <head> tag.
The rest of your html should be encapsulated within a <body> tag.
<html>
<head>
<title>OFFICIAL SQUIDDINC</title>
<head>
<body>
<div class="gif-container"></div>
</body>
</html>
For the CSS;
You don't need to set a height for the html, body, however you will need to set it for the gif container. I've gone ahead and used the units vh and vw. These mean viewport height and viewport width, respectively. By specifying 100 for each, this will equal exactly the height and width of the browser viewport (screen).
html, body {
margin: 0;
padding: 0;
}
.gif-container {
background: url("image.gif") no-repeat 0 0;
background-size: cover;
height: 100vh;
width: 100vw;
}
DEMO;
http://codepen.io/anon/pen/Byevzv
Related
This question already has answers here:
How to remove the stripes that appears when using linear gradient property [duplicate]
(2 answers)
Closed 3 years ago.
I'm opening an HTML file with no content, just the full html skeleton. i styled the html by using this linear-gradient
body {
background: linear-gradient(#e66465, #9198e5);
instead of getting this expected outcome
I get this instead.
This example comes from https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
So what happens here is that the <html> element is just special. It is the height of the viewport, because it has to be, and it defaults to overflow:auto;. and yet, it's height is not explicitly defined, it is granted by the browser. So the gradient doesn't know where to get it's height value, and goes insane.
body {
background: linear-gradient(#e66465, #9198e5);
}
If we give the <html> element an explicit height, then all is fine. In fact not giving the <html> element a height of 100% tends to be the cause of many issues, that are all fixed by giving <html> a height. min-height: 100%; will work as well.
html {
height: 100%;
}
body {
background-image: linear-gradient(#e66465, #9198e5);
}
You could alternatively give the gradient itself a height of 100vh.
body {
background-image: linear-gradient(#e66465, #9198e5);
background-size: 100% 100vh;
}
As mentioned in CSS3 gradient background on body
html{
height:100%
}
body{
width:100px;
height:100px;
background:linear-gradient(red, black);
background-repeat:no-repeat;
height:100%
}
Hope this helps!
html,
body {
height: 100%;
}
body {
margin: 0;
background: linear-gradient(#e66465, #9198e5);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Linear gradient background</title>
</head>
<body>
</body>
</html>
Been writing code for the background of a website. The goals are 1) 100% height of the browser window for the first image 2) image stays centered in window and sides are cut off 3) on the home page there is also two additional images that need to have the same effect. Been trying and writing different code chunks and not getting anywhere. I can get one part which just breaks another. Thank you for any assistnaceCurrent code chunk is as follows:
<html>
<head>
<meta charset="UTF-8">
<title>Background Image</title>
<style>
* { margin: 0; padding: 0; }
.background {
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div class="background">
<img src="images/bg.png">
</div>
<div class="background bg2">
<img src="images/bg2.png">
</div>
</body>
</html>
Not sure if I fully understand what your question is but for your image to get the height of the window you need to
.background {
background-image: url(images/bg.png);
height: 100vh;
}
That way the background image will always use the full height of the viewport. Not sure about the rest of the question tho!
If I understand what you are trying to do, there are a few things with your code that is wrong. First I will explain a couple of things and then I'll provide the code that I came up with that works when I tested it. Here goes...
First, in your style element, where you have ".background:", you don't need any of the code that you wrote. The stuff that mentions webkit, moz, etc. is really for stuff that may have cross browser compatibility problems. background-size is not one of those things you would have to worry about with that. The only thing I would put in your "background" class is width and height of 100%.
Second, speaking of width and height, I would include and "html" and "body" element and give them both a width and height of 100%.
Third, you are trying to have your images listed in your html, but you are trying to style them as if you are having your css produce them. Notice how in my html I left the "background" divs empty and then included the url of the photos in the css.
In a nutshell, I believe you may be a little confused as to what method should be used and when/where, because you are actually fusing different approaches together. That said, here is the code I wrote...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Background Image</title>
<style>
* { margin: 0; padding: 0; }
html, body {
width: 100%;
height: 100%;
}
.background {
width: 100%;
height: 100%;
}
#bg1 {
background: url(images/bg.png) no-repeat center;
background-size: cover;
}
#bg2 {
background: url(images/bg2.pngg) no-repeat center;
background-size: cover;
}
</style>
</head>
<body>
<div class="background" id="bg1">
</div>
<div class="background" id="bg2">
</div>
</body>
</html>
Here is a link that may help you too. They have great directions, exercises and tutorials: w3schools.com
Hope all of that helps Zack! :)
I have this CSS style here, but it spans across the whole screen rather than just repeating it within the 960px width of the body.
body
{
width:960px;
margin: 10px auto 10px auto;
background-image:url(logo.png),url(backgroundimage.jpg);
background-position: top center, top center;
background-repeat: no-repeat, repeat-x;
background-attachment: static;
}
logo.png is just an image of a company logo, while backgroundimage.jpg is something I want to span only within the 960px rather than across the whole page. How can I do this?
You will need to make a container class. This class will hold all inner div classes and content.
The code for this will be as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.container{
width: 960px;
background: url("logo.jpg");
height: 700px;
}
</style>
<body>
<div class="container">
</div>
</body>
</html>
An easier way to do this would be to use bootstrap. The Bootstrap framework provides a .container class premade with custom responsiveness built in.
I am relatively new to HTML and CSS, however "Skill comes with practice".
I would like to create a pagescroll effect similar to this page:
Jolla
The difficult thing is to get the effect on every device.
So every device should see the full picture fullscreen (don't see text below; example: don't see the "we are unlike"-stuff).
However if any device scrolls down a bit (one scrool), the picture should slide to the top and the following text should be revealed.
Hope you guys can follow me.
Thanks in advance :)
There is a simple way to do this using css properties.
All you have to do in your html is...
<div></div>
In your css...
div {
width: 100%;
height: 100%;
}
div {
background-image: url("rand_img.jpg");
background-attachment: fixed;
background-size: cover;
}
Try the code here. There's also more in depth article by css-tricks.com that this is based off of.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Header</title>
</head>
<body>
<div id="background">
</div>
<style>
#background {
background-image: url("https://hd.unsplash.com/photo-1471705301355-ec78367a7b07");
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
</style>
</body>
Be sure to keep up the good work in learning and practice, practice, practice!
I really need some help with a background on a website. You can see the image here:
Link to image
Now what i want is first of all to have the image placed in the top middle. Then i would like to have something like 10x250px (Width x Height) from the left of the image to be repeated - should a visitors screen resolution be wider than the image it won't seem like the site just stops at the edges.
I've tried several things, but it seems i keep running into different kind of technicalities that I'm not sure how to get around. So I would like to know how you would do it?
(The websites content will be 990px wide if that helps)
But the repeating image on your <body>, and put the other image background on your wrapper <div> (or similar).
Alternatively, you can use CSS3 for multiple background images on the same element. Won't be as compatible though.
Here is a way to accomplish this so that it attempts to center for all screen resolutions so that there is never a bottom scrollbar. bg.gif is your image ang bg_filler.gif is a 20px slice off of the side.
<style>
body
{
background-image: url(bg_filler.gif);
background-repeat: repeat-x;
background-color: #D1CDCA;
margin: 0px;
}
.backgroundPart
{
height: 300px;
background-image : url(bg.gif);
background-position: top center;
background-repeat: no-repeat;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div class="backgroundPart">
</div>
</body>
Here is a sample http://www.wesgrant.com/samples/BackgroundSample/default.html
Something like this style:
<style>
body{
margin:0;
padding:0;
background-image:'repeating_image...';
background-repeat:repeat-x;
}
#wrapper {
width:990px;
background-image:url(http://img852.imageshack.us/img852/4169/testbg01.jpg);
}
</style>
You would want to create two images, one for the body to repeat, and the other being the header that you already have. here is your image in a demo.
take a look at the source code to see how this works
http://luistovar.com/sodemo
No matter how large the screen resolution is now, the bg repeats.
Good luck
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
* {padding:0px; margin:0px;}
body {
background-image: url(repeat.jpg);
background-repeat:repeat-x;
background-position:top;
}
#header {
background-image: url(header.jpg);
background-repeat:no-repeat;
width:1600px;
height:252px;
margin:0px 0px 0px 0px;
}
-->
</style>
</head>
<body>
<center>
<div id="header"></div>
</center>
</body>
</html>