I am attempting to build a, simple, single page website with only css as an exercise to familiarize myself with css.
I have three background images stacked on each other. Each image is set to a height of 100vh. This gives each image a nice look but I tried using the 'top' attribute to place text in the middle of the page, the text didnt move.
Can someone tell me why 'top' doesnt work in this circumstance? And a way to get around it?
This is my CSS:
#page1 {
background-size: cover;
background-image: url('Page1_f09078_f06078_1000_vertical.png');
height: 100vh;
display: block;
}
#welcome {
text-align: center;
top: 50%; <-- This attribute won't work
}
#page2 {
background-size: cover;
display: block;
background-image: url('Page2_f06078_ffa860_1000_vertical.png');
height: 100vh;
}
#page3 {
background-size: cover;
display: block;
background-image: url('Page3_ffa860_f09078_1000_vertical.png');
height: 100vh;
}
This is my html:
<html lang="en">
<head>
<link href="SinglePage.css" rel="stylesheet">
</head>
<body>
<div id="page1">
<h2 id="welcome">Welcome!</h2>
</div> <!-- End of page1 -->
<div id="page2">
</div>
<div id="page3">
</div>
</body>
</html>
top, left, right and bottom css properties work only when used with relative, absolute or fixed position.
Use following css:
#page1 {
position: relative;
}
#welcome {
transform: translateY(-50%);
text-align: center;
position: absolute;
top: 50%;
right: 0;
left: 0;
}
The top, right, bottom, and left properties specify the position of positioned elements.
Go through this link: https://developer.mozilla.org/en/docs/Web/CSS/position
Add Position:relative;
#welcome {
position: relative;
text-align: center;
top: 50%;
}
Related
Right now my footer is appearing at the top of my page but I'd like it at the bottom, if its rly simple sorry im pretty new to html.
here is my file the css is internal
.middle {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
background-image: url("img/background.webp");
background-size: cover;
background-position: center center;
}
footer {
background-color: black;
color: white;
}
<body>
<main>
<img src="img/logoanimated.gif" class="middle">
</main>
<footer>
<p>This website is under construction<br>Copyright © 2022 example.</p>
</footer>
</body>
You have the position in the .middle class, as fixed, which means it will be on top of everything, so if you change the position to relative or some other than fixed, it should work.
You can use the position property to position things. In this case I used fixed to fix the footer at the bottom, then the inset property for the shorthand of top, right, bottom, and left properties. More on positions and how to use it here.
.middle {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
background-image: url("img/background.webp");
background-size: cover;
background-position: center center;
}
footer {
background-color: black;
color: white;
position: fixed;
inset: auto 0 0 0;
}
<body>
<main>
<img src="img/logoanimated.gif" class="middle">
</main>
<footer>
<p>This website is under construction<br>Copyright © 2022 example.</p>
</footer>
</body>
I gave to footer position: fixed bottom:0 left:0 and width:100% and some sample photos for the background.Also i got footer inside div . I came to this result. I hope it works for you
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<style>
.middle {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
background-image: url("https://picsum.photos/id/235/200/300");
background-size: cover;
background-position: center center;
}
.footer {
background-color: black;
color: white;
position: fixed;
bottom: 0;
left:0;
width:100%;
}
</style>
</head>
<body>
<a href="example.com" target="_blank" rel="noopener noreferrer"><img src="https://picsum.photos/200/300.jpg"
class="middle"></a>
<div class="footer">
<p> This website is under construction<br>Copyright © 2022 example.</p>
</div>
</body>
</html>
Here try this code, I got rid of the all the css in the .middle class, and it centers the image, and puts the footer at the bottom of the image, though you do not want to really ever use fixed position on a footer, because it will always be visible at the bottom, and you don't want that. What you should do, is make is static.
As I was looking at your code, the reason why your footer was above everything, is because you made that image fixed, which means everything will flow to start. So think of the fixed position this way: Pretend you have two boxes, stacked ontop of each other, then you slide the bottom one all the way out. When you slide the bottom one off, the top one falls in place of the other one. The bottom box had the fixed position, so it moves out of place, and it is always in that exact location, even if the window scrolls, it will always in that place, that is why it is called fixed. So just keep that in mind, when you add a fixed position to anything, it "raises" it up and everything "flows" underneath it.
.middle {
display: block;
margin: auto;
}
body {
background-image: url("img/background.webp");
background-size: cover;
background-position: center center;
}
footer {
background-color: black;
color: white;
}
<body>
<main>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQytQQam75A2ZQMpeZ01oSraB9OHEvBqprjtw&usqp=CAU" class="middle">
</main>
<footer>
<p>This website is under construction<br>Copyright © 2022 example.</p>
</footer>
</body>
I am having trouble making my image fullscreen. if i make a css: .background {background: url....} it works fine but then noting else works. So I made it as and image but the image isnt bigger in height than my screen so i have to scroll. Can anyone help me with this and maybe help to find other mistakes?
Thanks <3
(i see you cant see the picture were I am talking about but maybe you now the solution without seeing it :D)
body {
height: 100%;
margin: 0;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header {
background-color: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.8;
opacity: 0.8;
color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 150px;
padding: 0;
margin: 0;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
.logo {
Width: 150px;
height: auto;
filter: brightness(0) invert(1);
float: left;
}
#foto {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 1024px;
}
<!DOCTYPE html>
<html>
<head>
<title> Duco's Blog </title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<div class="header" id="myHeader">
<img class="logo" src="leeuw.png">
</div>
<script>
window.onscroll = function() {
myFunction()
};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
</header>
<body>
<div class="container">
<img src="straat.jpg" alt="street" id="foto">
<div class="centered">Centered</div>
</div>
</body>
</html>
You can try to add height: 100vh to the #foto element. Hope it helps.
You want to make your image a background image, not an inline image, e.g. use background properties instead of the <img /> tag:
body {
margin: 0;
/* Fullscreen image */
/* get the image source */
background-image: url('/path/to/image.png');
/* center it */
background-position: center center;
/* fix it to the window so it doesn't scroll */
background-attachment: fixed;
/* ensure it covers the whole screen */
background-size: cover;
}
If that's your full site's HTML, it looks like you don't need the JavaScript to make your header stick to the top of the window. You can get what you need for your fixed header by just using CSS.
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
position: fixed; pulls your element out of the regular flow so you'll need to over-compensate for your header's height otherwise it'll cover some of your content:
.header-buffer {
/* overcompensate for fixed header */
padding-top: 60px;
}
The class .header-buffer would be added to the element wrapping the content after the header.
Essentially:
delete your image tag
delete all CSS for #foto
delete your JavaScript
add the background properties to the body CSS
add the .header-buffer class to the same element that has the .container class, e.g. <div class="container header-buffer">...</div>
Here's an example CodePen:
Preview: https://codepen.io/tinacious/full/wRvKwy
source code
In the example you can see that the window can be any size and the image will take up the whole screen. The website content is also scrollable so you can see the header staying fixed to the top.
My background image is not covering all contents on my page, rather it's applying only half of the screen.
The same code with same image is properly working on my another page.
Only the difference is that i have a lot of content on this page but i think that doesn't matter.
Where is the issue?
Thanks in advance.
html
<html>
<head>
</head>
<body>
<div id="main">
<!--Here i have multiple sections-->
</div>
</body>
</html>
css
#main {
position: relative;
}
#main:before {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background: url(../..//images/3.jpg) center center fixed;
width: 100%;
height: 100%;
opacity : 0.2;
filter: alpha(opacity=20);
z-index: -1;
try this code
background-size:100% 100%;
Hi, you just try with following CSS snippets
background: url(../..//images/3.jpg);
background-repeat:no-repeat;
background-size:contain;
This method will work
body
{
margin:0px;
width: 100%;
height: 100%;
}
#main {
background-image: url('download.jpg');
width: 100%;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
Here you are using a psudeo element :before .The functionality of psudeo element :before is as follows.
It would attach a child node at the first index.In your case you are trying to attach an image before the div element.And this does not correspond to your whole body.
To make the image applicable to your whole body try this:
body
{
margin:0px;
width: 100%;
height: 100%;
background: url(../..//images/3.jpg) repeat left top;
}
And remove your psudeo element :before
#main {
position: relative;
/*Other CSS Properties*/
}
try this one
background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;
I guess you have missed a double quote while writing your ID.
<html>
<head>
</head>
<body>
<div id="main">
<!--Here i have multiple sections-->
</div>
</body>
</html>
So I have a transparent image I want to place ontop of an image to create a "fade out" effect. I also have a background image. So all up there is three images.
This is my code
<div class="jumbotron">
div class="hero-dashboard">
<img class="center-block" src="../../img/hero-dashboard.png">
<div class="fade-bottom">
</div>
</div>
CSS
.jumbotron{
background-image: url('../img/hero-bg.jpg');
background-repeat: no-repeat;
background-size: cover;
.hero-dashboard img {
position: absolute;
z-index: 500;
height: 30px;
width: 500px;
.fade-bottom{
background-image: url('../img/hero-footer-fade.png');
position: absolute;
z-index:10;
bottom: 70%;
top: 10%;
right: 50%;
width: 100%;
}
}
}
They all have to be inside the "jumbotron" div.
Its on the page but it doesn't seem to be listening to the positioning. Can anyone help?
1- The parent div (jumbotron) should have relative position when children are absolute and should have height and width to be visible.
.jumbotron {
background-image: url('../img/hero-bg.jpg');
background-repeat: no-repeat;
background-size: cover;
position:relative;
top:0;
left:0;
width: 500px;
height:30px;
} // correct this closing tag
.hero-dashboard img {
position: absolute;
z-index: 500;
height: 30px;
width: 500px;
} //correct this
.fade-bottom{
background-image: url('../img/hero-footer-fade.png');
position: absolute;
z-index:10;
bottom: 70%;
top: 10%;
right: 50%;
width: 100%;
}
// } remove this
// } remove this
2- also correct opening tag < before div class="hero-dashboard">
3- correct the order of opening and closing tgas in your css {}. They seem weird!
Thanks for your help.
I closed the css tags {} like that because I need them to sit within the jumbotron div class. As they are the children of it. Correct me if I'm wrong but I was under the impression that it was the right way to do it.
My goal is to have a background image span the entire screen like this: http://playjudgey.com/
I am trying to change my background image to be grayscale, but every time I do, it changes all of the text that is written over the image. I assume that the filter is applying to everything that is inside of the my div. My code is below:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="wrapper">
<div class="hometext">
You are the best!
</div>
</div>
</body>
So this is what I did for my CSS:
.hometext {
width: 600px;
margin: 0 auto;
color: red;
text-align: center;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url('../img/money.jpg');
-webkit-filter: grayscale(1);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
}
The issue is that the text I write is not red, but gray. Is there any way to code this differently so my text will appear colored? Or should I just turn the image grayscale through an outside program?
You can get this same effect with a blend mode, that applies only to the background, and besides, it has more support (FF)
.hometext {
width: 600px;
margin: 0 auto;
color: red;
text-align: center;
font-size: 60px;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url('http://placekitten.com/1000/750');
background-color: gray;
background-blend-mode: luminosity;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
}
<div class="wrapper">
<div class="hometext">
You are the best!
</div>
</div>
If you have no need to change the background color dynamically, I would just change it to grayscale in a basic image editor. CSS filter is not fully cross-browser compatible I believe anyways, so you will be safer that way (and easier).
If you were to keep things how they are now, though, you would just need to change the filter property on your text as its inheriting it from your parent div.
What if you put your hometext div outside of the wrapper, making them both absolute:
<body>
<div class="wrapper"></div>
<div class="hometext">
You are the best!
</div>
.hometext {
margin: 0 auto;
color: red;
text-align: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1000;
}
Additional CSS will be needed for styling and position, but here is a fiddle: http://jsfiddle.net/Lepe84tu/
Instead of putting the background image on .wrapper, you could make another div as a sibling of .hometext that has the image as the background - that way you can style the image and the text independently.
Your <div class="wrapper"> div is wrapping also your hometext div. You should try this:
.hometext {
width: 600px;
margin: 0 auto;
color: red !important;
text-align: center;
}