I have a simple HTML document (snip):
<html lang="en">
<body>
<div class="background"></div>
<header class="main-header">
<div>
<a href="../index.html" class="main-header__brand">
uHost
</a>
</div>
</header>
</div>
</body>
</html>
I noticed the following.
If I apply the following style:
background {
background: url('../images/macbook.jpeg');
position: fixed;
height: 100%;
z-index: -1;
width: 100%;
}
Then the background image covers the whole viewport as expected.
If I then add:
html {
margin-left: 10%;
margin-right: 10%;
}
The margin is correctly applied to the left and right of my content. But also to the left side only of the background. Ie:
I am confused as to why, as I thought fixed elements were positioned relative to the viewport? So why is a style on the html element influencing the rendering of the background?
As a solution to get what I wanted (some margin on both sides), I can do something like:
html {
width: 80vw;
margin: auto;
}
.background {
background: url('../images/macbook.jpeg');
position: fixed;
height: 100%;
z-index: -1;
width: 80vw;
}
Which produces:
But again, I'm unsure why the margin property on the html element is affecting my fixed background div?
When using position fixed, the element will still follow its natural initial placement, unless otherwise specified via the top left bottom or right attributes. Here you can see, even though the body element has a margin of 10px, the background element is still at the top left.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 10px;
}
h1 {
color: white;
text-align: center;
}
.background {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Solar_Eclipse_May_20%2C2012.jpg/1024px-Solar_Eclipse_May_20%2C2012.jpg");
width: 300px;
height: 300px;
background-size: cover;
z-index: -1;
position: fixed;
top: 0;
left: 0;
}
<body>
<div class="background">
<h1> Solar Eclipse </h1>
</div>
</body>
Related
I'm trying to make a full width and height responsive home page with an image. The problem I'm encountering are padding issues. I cannot get padding to work when I display an image in css under 'background-image: url();'. The only thing that works is the margin property but it is not responsive to the height and only shows the top and the rest as I scroll down but I am trying to have the padding be responsive to the resizing of the height of the page. To show you guys more of what I am trying to achieve, I included 2 examples, the top with what I want and the second with the problem I'm facing. I've managed to get responsive padding to work while I place the img tag in my HTML but I cannot do so with the background-image property as I'm trying to put text on it.
.test img{
width: 100%;
max-width: 100%;
height: 100vh;
padding: 10px;
}
.wrapper {
background-image: url(https://images4.alphacoders.com/432/43258.jpg);
height: 100vh;
width: 100%;
max-width: 100%;
background-size: cover;
background-position: center center;
}
<div class="test">
<img src="https://images4.alphacoders.com/432/43258.jpg" alt="">
</div>
<div class="main">
<div class="wrapper"></div>
</div>
https://jsfiddle.net/u9t4hqqq/
You can use margin, you just need to account for the vertical margin that will push your 100vh height out of 100vh, and you can do that with calc()
body {margin:0;}
div {
margin: 10px;
background: url('http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg') center top no-repeat / cover;
height: calc(100vh - 20px);
}
<div></div>
Or you can wrap the element in another element, apply padding to the outer element, and use border-box to keep the padding inside of 100vh.
body {margin:0;}
section {
height: 100vh;
box-sizing: border-box;
padding: 10px;
}
div {
background: url('http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg') center top no-repeat / cover;
height: 100%;
}
<section><div></div></section>
Padding does work, but you can't see it. If you put content within the div, you'd see the effects of any padding. What you want is to apply the padding to the parent, in this case .main. Padding by definition can not impact the background of the element it's applied to but rather where children sit in relation to the element's borders.
If that is somehow insufficient, you can simulate the look with box-sizing: border-box and use a 10px border that matches the body background.
Which raises the point that you may want to review the box model to learn better what margin and padding are and how they relate to elements:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
madrougebeauty.com uses a "frame" that is layed on top of all elements; it has nothing to do with padding.
To achieve something like it, look at the following:
.wrapper {
background-image: url(https://images4.alphacoders.com/432/43258.jpg);
background-size: cover;
background-position: center center;
height: auto;
min-height: 100vh;
color: #fff;
box-sizing: border-box;
/* Give your content padding so nothing gets hidden under the frame */
padding: 2em;
}
.frame {
position: fixed;
z-index: 9999;
background-color: yellow;
}
.top, .bottom {
width: 100%;
height: 10px;
left: 0;
}
.left, .right {
width: 10px;
height: 100vh;
top: 0;
}
.top {
top: 0;
}
.right {
right: 0;
left: auto;
}
.bottom {
bottom: 0;
top: auto;
}
.left {
left: 0;
}
<!-- These 4 elements build a frame on top of the screen -->
<div class="frame top"></div>
<div class="frame right"></div>
<div class="frame bottom"></div>
<div class="frame left"></div>
<div class="wrapper">
<h1>Headline</h1>
<p>Your content here.</p>
</div>
I'm just working on a simple HTML page but still struggling with the divs.
The plan is: a fullscreen background and four horizontal buttons next to each other on the bottom. The buttons are currently mapped to the background image - so I could just add four invisible layers (divs) with some hrefs for example. Otherwise I would add them manually (in four single jpgs) to the bottom...
Howsoever, I want the whole site to (borderlessly) scale up and down to variable screen resolutions. Therefore also the sizes of the divs/images should scale equally and keep its position.
What I've got so far:
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
img {
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
}
<body>
<div class="background">
<div class="img">
<img src="background.jpg">
</div>
</div>
</body>
At this point I only have the background set up: its in an img-div within a background container with absolute positioning.
How could I add the four buttons now to stick at the bottom of the background a keep its relative size and position when the screen resolution changes?
:)
Take the button images out of the background image, set the body rules as follows (with background-image), add a div at the bottom and put the buttons in there (I chose DIVs with background-images for the buttons, but of course you can also use <button> tags. Adjust the "bottom" and button heights and the button margins as needed:
CSS
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: url(background.jpg) center center fixed;
background-size: cover
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 100%;
text-align: center;
}
.button {
display: inline-block;
width: 80px;
height: 50px;
margin: 10px;
}
.button1 {
background: url(button1.jpg) center center fixed;
background-size: cover
}
.button2 {
background: url(button2.jpg) center center fixed;
background-size: cover
}
.button3 {
background: url(button3.jpg) center center fixed;
background-size: cover
}
.button4 {
background: url(button4.jpg) center center fixed;
background-size: cover
}
HTML:
<body>
<div class="content">
(your content)
</div>
<div class="bottom">
<div class="button button1">(button text 1...)</div>
<div class="button button2">(button text 2...)</div>
<div class="button button3">(button text 3...)</div>
<div class="button button4">(button text 4...)</div>
</div>
</body>
Thanks for the quick help!
The code looks good so far. But I still have the problem that the buttons change its size when I rise or decrease the screen resolution. Is there a way to give them fixed sizes in relation to the whole screen? "buttonX" should always have x% of the screens width and x% of its height... And I don't want the actual visible positioning resp. margin to change when the resolution changes :/
But many thanks so for!
I'm trying to make some header for my website and another div below it, to contain a colored rectangle. Is it possible? I tried it like this so far, but no luck:
.logo {
width: 100%;
left: 0%;
right: 0%;
position: absolute;
}
<div class="logo" onclick="location.href='<%= DefaultPath %>'" style="height:15%; top:0%; background-image:url('<%= LogoPath %>'); background-size: 100% 100%; background-repeat:no-repeat">
</div>
<div style="padding:0%">123</div>
The div that contains "123" should be below the header div. How can I do this?
First of all you should not use so much inline styles. rather use it within a css class (like you did for some code in .logo)
you could use something like this to achieve your positioning:
.header {
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 100%;
background-color: grey;
background-image: url('');
background-position: center center;
background-size: 100% 100%;
}
.numbers {
margin-top: 50px;
height: 100px;
background-color: blue;
width: 100%;
}
and the html is simply this:
<div class="header"></div>
<div class="numbers">123</div>
you would simply place your relative container with a margin-top with the height of your absolute container
i don't really like those absolute px solutions with margins.
if this header should always look like this ( with the triangle and the numbers etc) i would suggest to wrap those two containers into one absolute container and position them both relative like you can find here:
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.header {
display: block;
height: 50px;
width: 100%;
background-color: grey;
}
.numbers {
height: 100px;
background-color: blue;
width: 100%;
}
<div class="wrapper">
<div class="header"></div>
<div class="numbers">123</div>
</div>
The div below, in this scenario, would need the have a margin-top value equal to the height of the absolute positioned div.
<div class="logo" onclick="location.href='<%= DefaultPath %>'" style="height:100px; top:0%; background-image:url('<%= LogoPath %>'); background-size: 100% 100%; background-repeat:no-repeat">
123
Not easy to fix... if you set something absolutely, like you logo there, you break it out of the document flow. Hence, the rest of the page won't care where it is and cannot place itself next to it. It will just be under or over it.
You could detect the position of the logo with javascript and place the other one next to it if it too is aboslute.
I THINK you want to set the logo to position: fixed instead, and add margin-top to the body, so that it always starts where the logo ends. That way the logo would always be on top and follow you when you scroll, and the body wont be covered by the logo.
I often have this problem with a lot of fixed navbars i.e. when I have a fixed navbar, how do I give the element below it some margin, so that the fixed navbar is not covering that element?
I was just wondering if there is a more elegant way of doing this apart from the <br> tag and margin-top.
The sample code would be like:
HTML code :
<nav>
I AM NAVBAR
</nav>
<br><br>
<div>
</div>
CSS code :
* {
padding: 0;
margin: 0;
}
nav {
height: 50px;
width: 100%;
background: #444;
color: #fff;
text-align: center;
font-weight: bold;
font-family: verdana;
position: fixed;
top: 0;
left: 0;
}
div {
height: 500px;
width: 100%;
background: tomato;
}
Fiddle here.
Fixed position relatives to the screen's viewport. You can just set top margin or padding on the body tag, and make the value >= the navbar height.
body {
margin-top: 50px; /*or padding*/
}
http://jsfiddle.net/5k5mxcn1/1/
There's a theory in CSS that you only apply bottom margins.
http://csswizardry.com/2012/06/single-direction-margin-declarations/
So to keep things modular, you could create a wrapping class:
<nav class="nav__wrapper">
<div class="nav__content">
Navigation
</div>
</nav>
<p>Text content</p>
css:
.nav__wrapper {
height: 30px;
margin-bottom: 10px // breathing room
}
.nav__content {
background: #dadada;
height: 30px;
line-height: 30px;
position: fixed;
width: 100%;
}
fiddle: http://jsfiddle.net/wv53qLwz/
A fixed element is position relative to the viewport, meaning it stays at the same designate spot and does not leave a gap in the page where it would normally have been located.
You can apply a top margin to the element that is directly following the fixed element.
div {
margin-top: 50px;
}
However, I've found out that using the scroll-margin property does the trick. It's explained better here https://css-tricks.com/almanac/properties/s/scroll-margin/#aa-enter-scroll-margin
div {
scroll-margin-top: 50px;
}
I need to design a page with border images on each side. I need the page to fit on 1280x1024 and 1024x768 resolutions. Is it possible to have a fixed size for the center div and crop the border images in the lower resolution ?
1280x1024 : border-200px center-840px border-200px
1024x768 : border-72px center-840px border-72px
I've made two images with 200px X 5px. I've tried to use the float property without success.
So I've made it this way so far, it works in 1280x1024 but not in 1024x768 (it's too wide).
HTML :
<body>
<div id="right"></div>
<div id="left"></div>
<div id="center">
<h1>Title</h1>
<p>Content here</p>
</div>
</body>
CSS :
html {
margin: 0px;
padding: 0;
}
body {
margin: 0px;
padding: 0;
width: 100%;
background-color: white;
overflow: auto; /*to clear the floats*/
}
#right {
clear: both;
position: absolute;
right: 0;
background-image: url('/site_media/images/border-right.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#left {
clear: both;
position: absolute;
left: 0;
background-image: url('/site_media/images/border-left.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#center {
width: 840px;
margin: 0px auto;
padding-left:10px;
padding-right:10px;
}
Thank you!
since the center element if fixed-width, this should be easy. the side border should be placed as 'background' in the body instead of having its own div.
correct me if im wrong, based on what i understand here, you want the side border to be cut/crop by 1024 resolution instead of shrink. how about you make a single image with 1280 width, place both side border images in it accordingly, left and right, leave the center area empty. save this as a single image (up to you if you want a transparent background), then do the followings.
<style type="text/css">
body { /* can also use your own div */
background:url(path_to_the_single_image) repeat-y top center;
}
#center {
width:840px;
margin:0 auto; /* centered the div */
background:green;
}
</style>
<body>
<div id="center">center content</div>
</body>
thats it! now you should have your fixed width element in the center, and your side-borders in the background. if you load it in 1280, you should see the full border, while if you resize down to 1024, your centered element should remain there, and your side border just now should cropped out by the browser.
let me know if this is what you looking for.. :)
if I understand correctly - what you're looking for is a bit difficult to achieve without javascript.
You can consider a bit different approach that is: can the sidebars (graphic borders) slide under the center content?
example:
<style type="text/css">
#wrapper { position: relative; }
#right, #left { width: 200px; position: absolute; background: gray; }
#right { right: 0; }
#left { left: 0; }
#center { width: 840px; margin: 0 auto; background: green; position: relative; }
</style>
<body>
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
<div id="center">center</div>
</div>
</body>