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;
}
Related
So, I'm working on my first website which at this point is nothing more than a background picture, an image, and a password input section that is not yet functional. So far all is good tho mostly. The background image is flush with the screen, the image is centered, as well as the input. The issue comes when I zoom out.
As seen here when I zoom out the background image duplicates.
body {
background-image: url("Background.png");
height: 100%;
width: 100%;
}
.content {
margin: 0 auto;
position: relative;
width: 500px;
z-index: 999;
}
<!DOCTYPE html>
<html>
<head>
<title>The Sandbox</title>
<meta name="description" content="">
<meta name="author" content="Hades">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Style.css"/>
</head>
<body>
<center>
</div>
<img src="signature.png" width="700" vspace="100" border="0" alt="Hmmmm 404?">
</div>
<form>
<input type="password" style="background: ghostwhite; font-size: 18px; border: 1px solid lightgray; width: 500px; border-radius: 50px" />
</form>
</div>
</center>
</body>
</html>
Any solution to this or am I just gonna have to bite the bullet?
Give These two properties
body {
background-image: url("Background.png");
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
To stop image from repeating "background-repeat" and to size for appropriate size "background-size"
You may need something like that. While using background-image, background repeating is by default on - so you need to set background-repeat property to no-repeat. And you need to adjust the background size and position as well as defining height of 100% for it and it's parent(in this case body).
html, body {
height: 100%;
}
#bg-image {
background-image: url("https://images.unsplash.com/photo-1528722828814-77b9b83aafb2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
background-repeat: no-repeat;
height: 100%;
background-size: cover;
background-position: center;
}
#form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#form input {
padding: 5px 10px;
font-size: 14px;
border-radius: 3px;
border: none;
}
<body>
<div id="bg-image"></div>
<form id="form">
<input placeholder="write here..." >
</form>
</body>
well your code is ok but when you use background-image by default it is going to repeat image until it fill element. you have to use background-repeat: no-repeat; to prevent it and take note it is not good at term of responsive to give body a background-image better use div instead. you can also use background-size: cover; to make sure image always fill whole element
you need to set the background-repeat property to no-repeat, background-size to cover, and background-position to center center.
background-repeat: no-repeat--> will make the background image is only shown once.
background-size: cover--> make the background image cover the entire background area.
background-position: center center--> make the background image be positioned in the center of the element (in this case, the body element)
body {
background-image: url("Background.png");
height: 100%;
width: 100%;
/* extended code */
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
You may need something like this. You can make it easy with display:flex and for background you can use no-repeat.
html, body {
height: 100%; // FOR HTML AND BODY HEIGHT
}
body {
background: url("https://ak.picdn.net/shutterstock/videos/1027045598/thumb/1.jpg"); /* BACKGROUND IMAGES */
background-repeat: no-repeat; /* NO REPEAT BACKGROUND IMAGE */
height: 100%; /* BODY HEIGHT */
background-size: cover; /* BACKGROUND SIZE */
background-position: center; /* BACKGROUND POSTION */
display: flex; /* FLEX FOR TAKE DIV IN CENTER */
justify-content: center; /* LEFT RIGHT CENTER */
align-items: center; /* TOP BOTTOM CENTER */
text-align: center; /* TEXT AND IMAGES CENTER */
}
input {
padding: 5px 10px;
font-size: 14px;
border-radius: 3px;
border: none;
}
<div class="center">
<img src="https://www.nicepng.com/png/full/166-1667158_dan-howell-signature-png-vector-black-and-white.png" width="150" vspace="20" border="0" alt="Hmmmm 404?">
<form>
<input type="password" style="background: ghostwhite;
font-size: 18px;
border: 1px solid lightgray;
width: 500px;
border-radius: 50px" />
</form>
</div>
Here I create one simple demo.
I hope it's help you :)
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>
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%;
}
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