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.
Related
I have two images inside a div. I want the two images to fill the entirety of the div which should be the entire height and width of the webpage. The only problem is, when I use the object-fit attribute, the images don't contain within my container at all. It's almost as if I didn't include the attribute at all. Any way I could get some help with this? Thanks.
#charset "utf-8";
/* CSS Document */
body {
margin: 0;
}
.container {
margin: 0;
display: block;
max-height: 100vh;
}
.image1 {
object-fit: contain;
z-index: 1;
position: relative;
top: 0;
left: 0;
}
.image2 {
object-fit: contain;
z-index: 2;
position: absolute;
top: 0;
left: 0;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sylvanas</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<img class="image1" src="Image_Template_1.png">
<img class="image2" src="Image_Template_2.png">
</div>
<script src="script.js">
</script>
</body>
</html>
You should define width and height for images, object-fit property tries to scale image within its tag size and without proper sizing this property does not work
see: MDN
Check this type CSS Script Once,
And You define the height and width for image to fit the images in web page
.image1 {
/* The image used */
background-image: url("Image_Template_1.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.image2 {
/* The image used */
background-image: url("Image_Template_2.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
and you define the div class inside the body tag like this
<body>
<div class="image1"></div>
<div class="image2"></div>
<body>
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>
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%;
}
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;
}
I want to fill my page with a background image and have the text aligned in place with that background. With the below code, the background image loads at the top of the page, and the text goes under it. I know I can use the "background: " function, but the way it is done in my below code allows for automatic resizing, regardless of browser size (i.e., mobile devices have small browser sizes). So, I just want the background image to go behind the text.
<html>
<head>
<title>Title</title>
<style>
img.bg
{
min-height: 100%;
min-width; 781;
width: 100%;
height: auto;
top: 0;
left: 0;
z-index: -1;
}
#media screen and (max-width: 781)
{
img.bg
{
left: 50%;
margin-left: -390.5;
}
}
#container
{
position: relative;
width: 781;
margin: 50 px auto;
height: 758;
border: 1px solid black
}
#left
{
position: relative;
left: 1.280409731113956%;
top: 14.51187335092348%;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
width: 50%;
height: 50%;
color: #FFFFFF;
position: relative;
}
p
{
font: 14px Georgia;
}
</style>
</head>
HTML
<img class="bg" src="background.jpg">
<div id="container">
<div id="left">
<p>
Text
</p>
</div>
</div>
</body>
</html>
Make your BG image have a z-index of 1, and your #container div to have a z-index of 2. Does that work?
img {
position: relative;
z-index: 1;
}
#container {
position: relative;
z-index: 2;
top: 0px;
left: 0px; /*or whatever top/left values you need*/
}
Just use position: fixed for your background image http://dabblet.com/gist/3136606
img.bg {
min-height: 100%;
min-width: 781px;
width: 100%;
top: 0;
left: 0;
position: fixed;
z-index: -1;
}
EDIT (I wish there was a way to make it more visible than this)
OK, after reading the comments for the original question, I understand that the purpose is to have a background that scales nicely for any display sizes.
Unfortunately, quite a lot of mobile devices have a problem with position: fixed - you can read more about this here.
So the best solution in this case is to use a background image, not an img tag, having the background-size set to 100% (which will stretch the image - example), or to cover (which will scale the image such that it completely covers the screen - example)
Well, maybe you can also try that css:
body{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
it's should cover all youre page even when page size is changed