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!
Related
This is the code that I am using in my html. I know i have linked my style sheet properly because the rest of the styling works. So I have no idea why this specific background image just does not work in my code. It does not display anywhere on the webpage when I try to load it up so i honestly have no idea what is wrong.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="showcase">`
</header>
</body>
</html>
This is in my css. I have triple checked that the name of the image correlates and it is definitely in a images folder in my main folder but I just do not understand why this is not working. I am a bit new but I am still confused.
.showcase {
width: 100%;
height: 93vh;
position: relative;
background-image: url('../images/background.png') no-repeat center center/cover;
}
The answer is that you are putting the values no-repeat center center/cover under the background-image property, instead of the background property. It should actually look like so:
.showcase {
width: 100%;
height: 93vh;
position: relative;
background-image: url('.../images/background.png');
background: no-repeat center center/cover;
}
That should work. If not, try changing the position to absolute or auto. If all that doesn't work, try changing the center/cover to just center or cover.
Thank you for the help I managed to sort it out and it is working fine now. I removed the ../ from my background-image: url('../images/background.png'); and I changed my center/cover to just cover as the second center was causing it to not work. My new code now looks like this and is working perfectly.
.showcase {
width: 100%;
height: 93vh;
position: relative;
background-image: url('images/background.png');
background: no-repeat center cover;
}
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 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
Thanks in advance for your help.
I'm developing a simple landing page here:
www.checkinplace.com
You will see that this simple contact form is responsive.
The normal view is this one:
When you resize the screen to its minimum width you get this:
Now, the problem is when you want to see the page on a mobile device.
Here all looks good:
... but when you scroll down:
The basic CSS for the background goes like this:
<style>html { background: url(/site/assets/img/backgrounds/background.jpg) no-repeat; background-size: cover; }</style>
By the way, I have a bug with the button that will try to solve by other means.
Do you know how could I solve this?
Thanks again for your help!!
What you can do is stretch the background image.
You can do so by replacing background-size:cover; with background-size:100% 100%;
Your css code would look like this:
<style>html { background: url(/site/assets/img/backgrounds/background.jpg) no-repeat; background-size: 100% 100%; }</style>
Already solved it by doing this:
<img alt="Background image" id="backgroundImg" src="/site/assets/img/backgrounds/<?php echo($fileName); ?>" />
#backgroundImg {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: -1;
}
Thanks.
This question already has answers here:
css scaled background image
(4 answers)
Closed 2 years ago.
The website I'm working on, Tamsnails.com, is just about done, but it has one issue that I've been bothered with for a while now. The background image of the store will simply not stretch to the full screen of my high resolution work laptop. I've tried a lot of things over the last couple of months, a lot of which I forget, but
I remember at first, I had it as an actual css background-img
then, I had
<head>
<body id="theBody">
<div id="backgroundImageWrapper" style="height: 100%; width: 100%; z-index: 0; position: absolute;">
<img id="mainBackgrond" src="background_image.JPG">
</div>
with mainbackground style
#mainBackgrond {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
Now, I have
<body id="theBody">
<img id="mainBackgrond" src="background_image.JPG">
<div id="wrapper">
with style
#mainBackgrond {
height: 50em;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
because this at least looks good on my home laptop.
Yes, I know I spelled 'mainBackgrond' wrong.. bear with me here!
If the issue is that the image doesn't stretch to the bottom of the window (which is what I'm seeing in Chrome) then change the height: 50em on your #mainBackgrond style to:
height: 100%;
You might want to take a look at this ( or other similar jquery plugins )
http://srobbin.com/blog/jquery-plugins/jquery-backstretch/#demo - Quite simple to use and it stretches the background image fully without risking the aspect ratio.
Try to remove the height property, this way it will maintain the aspect ratio and stretch all the way across the screen, if this is the intent.
#mainBackgrond {
position: fixed;
z-index: -1;
width: 100%;
left: 0px;
top: 0px;
background: url(/background_image.JPG) no-repeat center center fixed;
}
The background image itself is huge, and makes initial load time very slow, you should consider compressing it more or resizing.
also have a look at css media query a nice way to show different size background images for visitors with smaller screens that might not even have the resolution to see the background.
#media screen and (max-device-width: 480px) {
.column {
float: none;
}
}