I am trying to have my background image with a transparent overlay that's split into top and bottom.
Lastnight, in SO Chat, I tried to supply the guys with a JSFiddle, but after posting the code, JSFiddle wasn't able to reproduce the layout correctly. So here's what the desired effect should look like:
(note that this is hand drawn and so you can't see a background image):
You can see that the page should be split horizontally. The blue part should be 50% high and the white part should be 50% high. With a logo in the centre. However, when I add the background image, the white section is pushed down, like this:
(note you still can't see a background image, because it's hand drawn):
Adding a background image to the html element, body element or any child container causes the white div to either be cut off at its top or pushed down, leaving a gap between the bottom edge of the blue section and the top edge of the white section.
How can I get my background image to stop affecting the flow of the document? I didn't think that CSS background images affected layout?
Here is my code:
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Home | Hmmm</title>
<link rel="stylesheet" href="~/Shared/Assets/Stylesheets/Core.css" />
<link rel="stylesheet" href="~/Shared/Assets/Stylesheets/Home.css" />
</head>
<body>
<header>
<img id="key" src="~/Shared/Assets/Images/Icons/Kdfg.png" alt="Sign In | Create an Account" />
<img id="logo" src="~/Shared/Assets/Images/Logos/JdfgWLSS.png" alt="Hmmm" />
</header>
<div id="main">
<footer>
<p style="margin-top: 100px; text-align: center; color: white;">© Hmmm 2015</p>
</footer>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
outline: none;
outline: 0;
border: none;
border: 0;
font-family: 'Segoe UI Light', Tahoma, Geneva, Verdana, sans-serif;
}
html, body
{
width: 100%;
height: 100%;
overflow: hidden;
}
body
{
width: 100%;
height: 100%;
overflow: hidden;
background-image: url('../Images/Backgrounds/JWSSB.jpg');
background-repeat: no-repeat;
background-size: cover;
}
header
{
width: 100%;
height: 50%;
background-color: #2695D7;
opacity: 0.8;
}
#main
{
width: 100%;
height: 50%;
background-color: white;
opacity: 0.8;
}
#key
{
float: right;
}
#logo
{
text-align: center;
margin: 0 auto;
position: absolute;
right: calc(100% / 2 - 176px / 2);
bottom: calc(100% / 2 - 100px / 2);
}
#sections
{
width: 100%;
height: auto;
}
.section
{
width: calc(100% / 3);
height: auto;
float: left;
text-align: center;
font-size: 10pt;
}
I have discovered a workaround. I don't understand it, but it's alright for now:
Add a border to the top of the white section:
#main
{
height: 50%;
background-color: white;
opacity: 0.8;
border-top: 0.1px solid white;
z-index: -100;
}
Then, make the logo appear on top again by changing its z-index:
#logo
{
text-align: center;
margin: 0 auto;
position: absolute;
right: calc(100% / 2 - 176px / 2);
bottom: calc(100% / 2 - 100px / 2);
z-index: 1000;
}
I am not sure if this way will be okay for you, but still. Link to jsfiddle
html:
<div class='top'></div>
<img src='http://silvercreekart.weebly.com/uploads/3/7/3/0/37300503/9869404.png' class='logo'/>
<div class='bottom'></div>
css:
html, body {
height: 100%;
width: 100%;
}
.top {
background: cyan;
height: 50%;
}
.bottom {
background: grey;
height: 50%;
}
.logo {
position: absolute;
left: 50%;
top: 50%;
margin: -128px 0 0 -128px;
}
I like my way much more then using calc. It is better way if you know sizes of your logo (to put it in the middle with negative margin)
Change your CSS to:
body {
height: 100vh
overflow: hidden;
background-image: url(...image...);
background-repeat: no-repeat;
background-size: cover;
}
#main
{
width: 100%;
height: 50%;
background-color: white;
opacity: 0.8;
display: inline-block;
}
Related
I am having trouble with getting a HTML website to display the way I want. I have made a banner and a nav bar, but I'm having a hard time when trying to add anything below the nav; it either covers the banner or gets covered by it.
This is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Home: Old Barber </title>
</head>
<body id="body"><link rel="stylesheet" href="test.css">
<div id="wrapper">
<header id="header"> Welcome </header>
<div id="bannerHolder">
<div class="banner">
OLD BARBER
</div>
<nav id="nav">
Home
Products
About
</nav>
</div>
</div>
<div class="container">
<img src="https://www.open.edu/openlearn/ocw/pluginfile.php/1654608/mod_oucontent/oucontent/93155/8a822f73/b6b08556/mse_s6_figure_3.jpg" alt="Barber" class="img"></img>
<div class="overlay">
<div class="text">Shop</div>
</div>
</body>
</html>
Here is the CSS:
/* Imported fonts */
#import url('https://fonts.googleapis.com/css2?family=Merienda:wght#700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');
#wrapper {
background: orange;
display: block;
margin: auto;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 100%;
}
#bannerHolder {
background: #aaa;
display: block;
height: 100px;
}
#bannerHolder .banner {
background-image: url(https://p0.zoon.ru/d/d/5ce4efe774cfee5d9265c8ee_5d6e753f1d26b.jpg);
background-position: center;
background-size: 100%;
color: white;
font-family: 'Merienda', cursive;
font-size: 800%;
height: 200%;
left: 0;
margin: auto;
position: relative;
right: 0;
text-align: center;
text-shadow: 2px 2px 4px black;
}
#body{
background-color: gray;
}
#nav{
background-color: orange;
color: black;
display: flex;
justify-content: space-around;
padding: 0.5%;
position: relative;
text-align: center;
}
#h1{
font-family: 'Italianno', cursive;
}
.container{
position: relative;
width: 50%;
}
.img{
display: block;
height: auto;
width: auto;
}
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
width: auto;
opacity: 0;
transition: .5s ease;
background-color: orange;
}
.container:hover .overlay{
opacity: 1;
}
.text{
color: white;
font-size: larger;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Any help is greatly appreciated. Thanks.
EDIT: under is the result after removing the position: absolute; from the header. This, however, also alters the way in which I'd like the page to be displayed; which is that the banner, nav etc. is supposed to fill the page on the left, right and top.
The problem is that You have
<div id="wrapper"> and <div class="container"> below.
<div id="wrapper"> - has position: absolute as a style.
Position absolute https://developer.mozilla.org/en-US/docs/Web/CSS/position:
The element is removed from the normal document flow, and no space is
created for the element in the page layout. It is positioned relative
to its closest positioned ancestor, if any; otherwise, it is placed
relative to the initial containing block. Its final position is
determined by the values of top, right, bottom, and left.
This value creates a new stacking context when the value of z-index is
not auto. The margins of absolutely positioned boxes do not collapse
with other margins.
That means that Your wrapper div, creates no space, so container div ignores its position.
Try to remove position: absolute from Your header.
Edit:
Sorry for late answer
#wrapper {
background: orange;
text-align: center;
}
#bannerHolder .banner {
background-image: url(https://p0.zoon.ru/d/d/5ce4efe774cfee5d9265c8ee_5d6e753f1d26b.jpg);
background-position: center;
background-size: 100%;
color: white;
font-family: 'Merienda', cursive;
font-size: 800%;
text-align: center;
text-shadow: 2px 2px 4px black;
}
body {
background-color: gray;
margin: 0;
padding: 0;
}
Edited CSS for header would look something like this. What I've done is I removed the height parameter of #bannerHolder. This height was defining the height of 100px for bannerHolder, however the height of the inside elements of bannerHolder was bigger, so there was an overlap. I also removed some unused CSS properties.
Also for banner to fill the whole space - the common pattern is to set padding: 0; margin: 0; for body tag. I often start my projects with this set-up:
html, body {
padding: 0;
margin: 0;
}
https://jsfiddle.net/oamx38y6/36/
I am trying to make a parallax for the first time and am having troubles.
I'm following this tutorial and then trying to work backwards. The code isn't working however and I'm not sure where I made the mistake, I jumped around to a few other tutorials and tried to adjust the names of different divs and CSS blocks so the code is a bit messy right now.
.html {
height: 100%;
overflow: hidden;
}
.body {
max-width: 30px color: #fff;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100% overflow-y: scroll;
overflow-x: "Luna"
}
header {
box-sizing: border-box;
min-height: 100vh;
padding 30vw 0 5vw;
position: relative;
transform-style: inherit;
width: 100vw;
}
header h1 {
margin-top: -100px;
}
header,
header:before {
background: 50% 50% / cover;
}
header::before {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
display: block;
background-image: url(picture1.jpg);
background-size: cover;
transform-origin: center center 0;
transform: tranlasteZ(-1px) scale(2);
z-index: -1;
min-height: 100vh;
}
header * {
font-weight: normal;
letter-spacing: 0.2em;
text-align: center;
margin: 0;
padding: 1em 0;
}
.image1 {
background: url('img/(picture1.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 500px
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Schade's Parralax</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<p>Hi My name is schade I wrote this so I could have a test of my program.</p>
<div class="image1"> </div>
</div>
</body>
</html>
In first use a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect.
body,
html {
height: 100%;
}
h1 {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
text-transform: uppercase;
text-align: center;
font-family: Helvetica;
font-size: 75px;
}
.parallax {
background-image: url('https://images.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
height: 100%;
/* Parallax scrolling effect */
background-attachment: fixed; // Try to remove this property
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
height: 300px;
line-height: 300px;
background: #ededed;
position: relative;
z-index: 1;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="parallax"></div>
<div class="content">
<h1>content</h1>
</div>
<div class="parallax"></div>
</body>
</html>
Some mobile devices have a problem with background-attachment: fixed. You can use media queries to turn off the parallax effect:
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
More info about fixed property.
I'd like to have a image on my front page on a new site cover up the total width and make it change size depending on your resolution, but still have it horizontally centered.
This is the site I'm working on currently: http://jonathan.ohrstrom.nu and I want the whole red part be covered with this image: http://jonathan.ohrstrom.nu/style/img/featured.jpg
How can I do this? This is the css code I have for the div I want the image in:
.featured {
background-color: red;
width: 100%;
height: 700px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
I tried this with no success:
.featured {
background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg) no-repeat;
width: 100%;
height: 700px;
size: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
But that just didn't load the image at all. Without the no-repeat then the image covered the whole width but it repeated itself..
try make it like this
.featured {
background: url('http://jonathan.ohrstrom.nu/style/img/featured.jpg') no-repeat center center ;
background-size: cover;
z-index: 1;
}
Use background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg);background-size: 100% 100%;
/* GRUNDER */
body {
background-color: white;
font-family: verdana;
}
/* MENY */
.menu_wrapper {
width: 100%;
height: 70px;
background-color: rgba(45, 45, 45, .9);
left: 0;
top: 0;
position: fixed;
z-index: 99;
}
.menu_content {
width: 1000px;
margin-left: auto;
margin-right: auto;
/*background-color: red;*/
line-height: 70px;
color: #a0a0a0;
font-weight: 400;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
}
.menu_logo {
float: left;
}
.menu_links {
float: right;
}
a.menu {
color: #a0a0a0;
transition: .1s;
text-decoration: none;
}
a.menu:hover {
color: #e5a000;
}
ul.menuList {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
display: inline;
margin: 0 10px;
}
/* CONTAINER */
.container {
width: 1000px;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.featured {
background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg);
background-size: 100% 100%;
width: 100%;
height: 700px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
<html><head>
<title>Webutveckling!</title>
<!-- META TAGS -->
<meta name="description" content="En webbyrå som skapar responsiva och smarta websidor åt större och mindre företag!">
<meta name="keywords" content="webutveckling,webbyr�,svensk,stockholm,billig">
<!-- CSS LINKS
<link rel="stylesheet" href="http://jonathan.ohrstrom.nu/style/style.css"> -->
<link rel="stylesheet" href="http://jonathan.ohrstrom.nu/style/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,500i" rel="stylesheet"></head>
<body>
<a name="top"></a>
<!-- MENY -->
<div class="menu_wrapper">
<div class="menu_content">
<div class="menu_logo">
*LOGO HÄR*
</div>
<div class="menu_links">
<ul class="menuList">
<li>hem</li>
<li>info</li>
<li>projekt</li>
<li>Kontakt</li>
</ul>
</div>
</div>
</div>
<!-- WELCOME-BILD -->
<div class="featured"></div>
<div class="container">
</div>
<a name="about"></a>
<!-- jQuery -->
<script src="http://jonathan.ohrstrom.nu/js/jquery.js"></script>
<script>
$('a').click(function(){
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500);
return false;
});
</script>
</body></html>
Here's what I suggest you:
.featured {
background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 100%;
height: 700px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
You can do a lot with the CSS background property:
Set a color with Hex of RGB.
Set a image with url() or the single property background-image.
Center the image horizontally and vertically with percentage or top/center/bottom attributes. You can also set it with the property background-position.
You can also set the repeat of the image with the attributes repeat/no-repeat. It also has it's own property: background-repeat.
Set the size of the image with a value or the property background-size. You can also use this property to scale the image in the container like you want with the property cover or contain.
You can do a lot more, see this link for more information on background.
The header of my blog shows the title with an image behind. I want that this image have it's own height until it gets bigger than 50vh (50% of user viewport).
But the normal behavior is the image be cropped from bottom and I want that the image be cropped from top and bottom (in other words: I want the image vertically centered).
I could do this with top: 50%; transform: translateY(-50%) but in that case img should be position: absolute and that would make the header always with the same height (since the image couldn't set the height of the element).
This is my code:
<div class="header">
<div class="date">
Posted 10 hours ago
</div>
<h1>Meet the all new Jaguar F-type</h1>
<img src="http://read.bi/2cMrdUI" />
</div>
On the following example, please resize jsfiddle width as much as you can. That will be easier to understand.
https://jsfiddle.net/jkc3L13g/
.header {
max-width: 100%;
position: relative;
overflow: hidden;
min-height: 150px;
max-height: 70vh;
.date {
z-index: 10;
position: absolute;
top: 0;
}
h1 {
position: absolute;
bottom: 0;
z-index: 10;
}
img {
width: 100%;
height: auto;
}
}
/* Just to style.. */
body { font-family: sans-serif; }
.header { color: white; text-shadow: black 0 1px 2px }
hr { margin: 2rem 0 ; }
code { font-size: 1.25rem; padding: 1px 2px; background: lightyellow; }
h1, .date { margin: 10px }
<div class="header">
<div class="date">
Posted 10 hours ago
</div>
<h1>Meet the all new Jaguar F-type</h1>
<img src="http://read.bi/2cMrdUI" />
</div>
<hr />
<p>
Resize window width as much as you can.
</p>
<p>
When <code>img</code> gets too big and <code>.header</code> starts limitating to <code>70vh</code>, <code>img</code> should "vertically centralize".
</p>
Instead of <img> tag, use the image as a CSS background image for .header, then set background-size: cover and background-position: center (this will align the image), but you also need to set a fixed height for .header.
This will look a bit different, hope it can help you.
background-image: url(http://read.bi/2cMrdUI);
background-size: cover;
background-position: center;
JSFiddle: https://jsfiddle.net/jkc3L13g/1/
.header {
max-width: 100%;
position: relative;
overflow: hidden;
min-height: 150px;
height: 70vh; /* fixed height */
background-image: url(http://read.bi/2cMrdUI);
background-size: cover;
background-position: center;
.date {
z-index: 10;
position: absolute;
top: 0;
}
h1 {
position: absolute;
bottom: 0;
z-index: 10;
}
img {
width: 100%;
height: auto;
}
}
/* Just to style.. */
body { font-family: sans-serif; }
.header { color: white; text-shadow: black 0 1px 2px }
hr { margin: 2rem 0 ; }
code { font-size: 1.25rem; padding: 1px 2px; background: lightyellow; }
h1, .date { margin: 10px }
<div class="header">
<div class="date">
Posted 10 hours ago
</div>
<h1>Meet the all new Jaguar F-type</h1>
</div>
<hr />
<p>
Resize window width as much as you can.
</p>
<p>
When <code>img</code> gets too big and <code>.header</code> starts limitating to <code>70vh</code>, <code>img</code> should "vertically centralize".
</p>
I have a page with two lines background.
One line is yellow and has a height: 65%, another line is gray and has a height:35%
And I have an absolutely positioned div in center with fixed width and height.
The gray lines is right under my div. The problem is, when I change the size of my page, or zoom out(to simulate big size screen) my div appears above gray background. If I set height of each background line to 50%, everything is good, but I need 65% and 35%.
Here's jsfiddle link: http://jsfiddle.net/J2LTR/
Try to zoom out on a page and the black square will go above the gray background.
Any ideas how to fix this?
Here's my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html, body {
padding: 0;
margin: 0;
height: 100%;
min-height: 100%
}
.yellow {
width: 100%;
height: 65%;
background: #e5bd00;
background-repeat: repeat;
}
.gray {
width: 100%;
height: 35%;
background: #d2d2d2;
background-repeat: repeat;
}
.wrap {
min-width: 300px;
width: 100%;
height: 100%;
min-height: 600px;
margin: 0 auto;
position: relative;
}
.center_box {
background: #000;
position: absolute;
top: 50%;
left: 50%;
margin-top: -120px;
margin-left: -200px;
width: 400px;
height: 235px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="yellow"></div>
<div class="gray"></div>
<div class="center_box">some content</div>
</div>
</body>
</html>
your value for top and margin-top are not correct, cause it is based on center and your boarder is down 65%.
try this instead:
.center_box {
background: #000;
position: absolute;
top: 65%;/* the tune you need to start with */
left: 50%;
margin-top: -235px;
margin-left: -200px;
width: 400px;
height: 235px;
}
http://jsfiddle.net/J2LTR/1/
You could even use a linear-gradient on body if you want to include only young browsers : http://codepen.io/anon/pen/EImiz