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! :)
Related
the answer is i had to put one more / in the path and dont know why,example
background-image: url(/destinationfolder/imagename.jpg) not
background-image: url(destinationfolder/imagename.jpg)
i wanna make a full screen background and the code is so simple however it didnt work can any body catch the problem ?
here is the HTML code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="bg">this is our div</div>
<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>
</body>
</html>
and thats the css code
body, html {
height: 100%;
margin: 0;
}
div {
height: 100%;
}
.bg {
/* the proper height for the image */
height: 100%;
background-image: url('cover.jpg'); /* the use image location */
background-repeat: no-repeat;
background-size: cover;
}
You almost certainly need background-size.
Keep in mind that a user with a 4K monitor is going to be rare compared to someone on a mobile phone. So be sure to use CSS Media Queries once you get to the last step of adding mobile support. You're the one looking at the screen to judge how you need to use background-size so be sure to tinker with the options in the developer tools; just resize the browser window down until the mobile effect takes effect. You can also use units such as percentages (background-size: 100% 100%;). Good luck!
.bg
{
background-image: url(images/bg-desktop.png);
background-size: contain;
}
#media (max-width: 1024px)
{
.bg
{
background-image: url(images/bg-mobile.png);
background-size: cover;
}
}
Try with setting min-height of body or div element to 100vh
body{min-height:100vh;}
Possible problem: The image should be in same directory as your css file since u are using relative path.
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
Hi Please do not bash on me or give me negative vote because I really did spend the time and trying to find the answer. From what I searched, this is what I have. I am trying to make a background image as my body but when I put no repeat on, it just a single tile rather than it stretching. Ive been trying to find a code that will stretch it out but nothing is there. I tried youtube and tried looking on here
this is my code
body{
background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRQoLWn_NOGkZO2BIkZyQud4OmegjxPMctGAZQAlKSf1DJvmsLyvA);
background-repeat:no-repeat;
}
my HTML
<html>
<body>
<div id="container">
</div>
</body>
</html>
Embedded Demo
jsFiddle Demo with code
A better approach than using the body element would be to place a div that does this for you.
<head>
<style>
#background{
background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRQoLWn_NOGkZO2BIkZyQud4OmegjxPMctGAZQAlKSf1DJvmsLyvA);
position:fixed;
right:0;left:0;top:0;bottom:0;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="bacgrkound"></div>
</body>
This will work:
body {
background: url((https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRQoLWn_NOGkZO2BIkZyQud4OmegjxPMctGAZQAlKSf1DJvmsLyvA) no-repeat;
background-size: 100%;
}
body {
background: url((https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRQoLWn_NOGkZO2BIkZyQud4OmegjxPMctGAZQAlKSf1DJvmsLyvA) no-repeat;
background-repeat:no-repeat;
background-size:cover;
}
This will cover your screen.
http://jsbin.com/IJObemU/1/
body{
background: url(image.jpg) no-repeat center center fixed;
background-size: cover;
}
you can remove the fixed when you need to make your background cover bot not on the body element (if you're applying the background on some element that scrolls with the page).
I have a large image that I want to set as the background for a 404 page. I want the image to be 100% wide every time someone loads the page, so that if their screen is smaller the image becomes smaller, if the screen is bigger, the image stretches. The height should change based on the width, it doesn't need to be the height of the page.
I don't have the code for this. Would it be better to do it in the HTML file or the CSS file?
Can you possible create a JSfiddle that could serve as an example? Thanks!
Just add this to your CSS code...
body {
background-image:url('http://imageshack.com/scaled/large/268/gjb.png');
background-size:100%,100%;
}
And then create a body...
<body>
Dummy Code
</body>
jsFiddle
This is best left to CSS. Hard to tell without your code exactly, but the following should do what you want:
CSS
html {
height: 100%;
width: 100%;
}
body {
width:100%;
height:100%;
}
#background {
width: 100%;
height: 100%;
background-image: url('http://www.placekitten.com/200/200');
background-repeat: no-repeat;
background-size: 100%;
}
HTML
<div id="background">
<div id="content">
Hello world!
</div>
</div>
UPDATE
See the fiddle here: http://jsfiddle.net/DrydenLong/jywbd/
UPDATE #2
I'd like to point out, just in case those reading through don't see the comments on my post below, that while applying the background-image property directly to the body selector is simpler, it will also apply that same image to every page referencing that CSS file. Should you choose to use a single CSS file for your entire website, my code above will make it easier to have different background images for the 404 page and the rest of the site.
HTML Body content
none
CSS
html {
background: url(http://www.astrophotography.co.nz/Lrg_Slides/20120619Milkyway.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Demo(updated)
I think what you are really looking for is a background-attachment property.
body {
background-image:url('http://IMAGEURL');
background-attachment:fixed;
width: 100%;
}
You dont need to setup height property here, it's done for you automatically.
How about this:
body{background:url(http://www.astrophotography.co.nz/Lrg_Slides/20120619Milkyway.jpg) 0 0 no-repeat; background-size:100% auto;}
I am trying to create an full width image above my nav bar, but I cant even get the image to show on screen. Here is my simple HTML:
<html>
<body>
<div class="wrapper" />
</body>
</html>
And the css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 100%;
}
I see the jpg made it to my browser and can click on it in my resources, so there is no problem with the path. The screen is still blank and showing nothing. Any help would be awesome.
This is because height:100% is functionally useless, and your div resultingly has no height.
If you give the div a fixed height, the image should appear as expected.
Alternatively if you want the background image to apply to the background of the page, you can apply it to the <html> element and avoid the whole wrapper, 100% debacle.
html {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
http://jsfiddle.net/dolours/JcxLm/2/ Give a specific height, Height 100% is meaningless
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 50px;
}
try this <div class="wrapper"></div>
It is possible that the image isn't showing because there is no content within the div and therefore it's size is 0. Try setting the width and height to a set size, something like 200px to test out this theory. Also I would change your code to:
<div class="wrapper"> </div>
you can use css for body tag, the css of body will be like this:
body{
background: url(../assets/bridge.jpg) center top no-repeat;
}
i think it will work for you, if you want just background image.