I understand that in order for an element to be height 100% of the viewport the parent has to have a fixed height or for html and body to be height 100%.
My problem is I have an introduction title which I want in the middle of the screen, easy I thought, I will make a div 100% width and height then the user scrolls down to reach the rest of the content... Not so easy. For the div to be 100% height I need to make html height 100% but when I do that the gradient background repeats itself as it reads the height of the viewport (html 100%) and not the content.
The site is here.
Code:
<div class="intro">
<div class="intro_text">
<h2><?php the_title(); ?></h2>
<h3><?php the_date('Y'); ?></h3>
</div>
</div>
<div id="content">
<!--The user scrolls down to see this-->
</div>
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
background-color: #004000;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ec448c), to(#5a94bc));
background: -webkit-linear-gradient(top, #ec448c, #5a94bc);
background: -moz-linear-gradient(top, #ec448c, #5a94bc);
background: -ms-linear-gradient(top, #ec448c, #5a94bc);
background: -o-linear-gradient(top, #ec448c, #5a94bc);
}
.intro {
width: 100%;
height: 100%;
}
You can do the negative margin trick:
.intro {
height: 200px;
width: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}
That will center the div in the viewport as long as all the ancestors don't have a position. The trick is that you position the div 50% of the viewport width and height away from the top left corner. Then you just use a negative margin equal to half the height and width of your .intro div in the top and left margins (this will center the div over the new center point).
Note: If you adjust the height and width, you should also adjust the negative margin (ex. if you change the width to 300, the negative left margin should be 150 - half the width) Also, this trick should work as far back as IE6, so no worries.
I'm a little confused by you question but if you don't want your background to repeat, you could try
body { background:url(your_image.jpg) top no-repeat; background-position:fixed; }
For fixing your background : Instead of applying your gradient to body, use another fixed element
div#mybackground {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:-1;
background: ..gradient..;
}
Now, on your site you can do
.intro_text {
height:100%;
}
And then using JavaScript, set line height of .intro_text to same value as height of .intro_text, and add this to your h3 :
.intro_text h3 {
position:relative;
top: -90%;
}
A better alternative to top -90% will be setting top to negative value of the height of .intro_text
Set the background to the html and add a overflow: hidden to it.
Then add a overflow: auto to the body.
Demo
Related
I want to create a header with a fixed background. So I defined the following properties:
header {
margin: 0;
padding: 0;
width: 100%;
height: 300px;
display: block;
background-image: url('...');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
Now I have the following problem. Currently, the background is centered according to the Screen Width and Height. Since the header is at the top, the actual background of the header is just the top of the image. In addition, the header image section changes every time I change the screen height, which is not my goal.
I want the image to be centered within the header (center of the image is at the center of the header, but only if I have not scrolled down). In addition, the header image section should only change if I change the header width, height or screen width but not if the screen height is changed.
You can rely on vh unit combined with some calc(). The center is initally 50vh and you want it to be 150px from the top so we need a translation of 50vh - 150px. You should also get rid of cover if you want the image to not change when the screen height change but it may not render like you want.
I replaced 300px with 100px for the demo.
.header {
height:100px;
border:1px solid;
background:
url(https://picsum.photos/id/1014/1200/800) 50% calc(50% - (50vh - 50px)) fixed;
}
.not-fixed {
background-attachment:initial;
background-position:center;
margin-top:20px;
}
body {
min-height:200vh;
margin:0;
}
<div class="header">
</div>
<div class="header not-fixed">
</div>
With the use of cover
.header {
height:100px;
border:1px solid;
background:
url(https://picsum.photos/id/1014/1200/800) 50% calc(50% - (50vh - 50px))/cover fixed;
}
.not-fixed {
background-attachment:initial;
background-position:center;
margin-top:20px;
}
body {
min-height:200vh;
margin:0;
}
<div class="header">
</div>
<div class="header not-fixed">
</div>
You can clearly see how the first image is centred exactly like the second one without fixed
To get more details about the caluclation check this: Using percentage values with background-position on a linear gradient (the section Combining pixel and percentage values)
Try to wrap the img (outside the header div) and header div and play with position relative/absolute to superimpose header on top of the image.
Having done that, you can use z-index to push image backwards
div {
display:block;
width:320px;
background:url('images/cnon.jpg');
background:contain;
}
Is there any way to auto-adjust <div> height depending on background height?
I can't understand what do you actually want, but if you want to make div fully aligned to background:
div {
display:block;
width: auto;
height: auto;
background:url('images/cnon.jpg');
background:contain;
margin: -10px; //Optional
}
Sorry if i didn't understood your question well.
if you could use jQuery you can handle it simply by checking on the img height then apply this height to the div itself
You can adjust the height of div, adjusting the padding top of the div, just need to set the css automatically.
.div_image{
background:url('images/cnon.jpg');
height: 0;
width: 100%;
background-size: contain;
padding-top: 20%;
}
The padding-top is calculated by a formule.
(image-height[px] / image-width[px]) * container-width[%]
Example: (274px / 1370px) * 100% = 20%
With this result the padding-top need to be 20%.
I created a simple markup with position:fixed <div> header that has two hyperlinks. Next I want that div to dynamically match the width of the content of the page.
The problem here is that the dimensions of the page's content are controlled by padding of the body element that is set in pixels.
Here is the fiddle that describes the situation: http://jsfiddle.net/jn7z1wke/2/
Googling says that the width of the fixed element could be controlled dynamically in percents (like it is shown in the fiddle width: 95%; but that doesn't solve my problem - I need the width of the fixed div to be dynamically adjusted in pixels.
I perfectly know how to do that on JS/JQuery but ultimately I want to do that on plain CSS.
You could use calc() to subtract the 40px of padding.
Updated Example
.fixedheader {
position: fixed;
background: none repeat scroll red;
width: calc(100% - 40px);
}
Browser support for calc() can be seen here.
Alternatively, just set right:20px/left:20px:
Example Here
.fixedheader {
position: fixed;
background: none repeat scroll red;
right:20px;
left:20px;
}
SET padding: 0px 2.5%; to body - DEMO
.fixedheader{
position: fixed;
background: none repeat scroll red;
width: 95%; /* this has to be changed and match the width of the .content on window resize */
}
.content{
background: none repeat scroll 0% 0% #A0A2A7;
padding-top: 20px;
}
body
{
margin: 0;
padding: 0 2.5%;
background: none repeat scroll 0% 0% #C2BAC1;
}
Is there a CSS way to stop a repeating background image at a specific position?
HTML:
<div class="container bgimage">
This is the content
</div>
CSS:
.container
{
height:100%;
}
.bgimage
{
background-image:url('bg.png');
background-repeat:repeat;
}
I want to repeat the image horizontally and vertically at position 0 and stop repeating when the repeating image is reaching vertical height: 400px, like a max-height but only for the background and without shrinking the .container DIV.
I know how this can be done with gradient backgrounds, but is there also a solution for repeating image backgrounds when the .container DIV is even higher than 400px?
Example CSS Gradient:
linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FFFFFF 400px) repeat fixed 0 0 rgba(255, 255, 255, 0)
...
Now I want to do the same with an image, and stop it at 400px.
hope it will help you
.youclass:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:url(path/image.png) repeat-y;
}
demo
Although I don't know if what you're asking for is possible, I have a solution that may work for what you need.
What you can do is create a div outside of your container div that will serve as your 400px high repeated background.
HTML:
<div class="tile-background"></div>
<div class="container">
Hello, Luigi.
</div>
CSS:
.container {
z-index: 0; /* MAKES the container appear on top of other elements */
position: absolute; /* REQUIRED for z-index */
}
.tile-background {
/* REQUIRED FOR Z-INDEX ... positions the div in reference to the window */
position: absolute;
top: 0px; /* positions div's top at the top edge of the window */
left: 0px; /* positions div's left side at the left edge of the window */
width: 100%;
height: 400px;
background-image: url(bg.png);
background-repeat: repeat;
}
Here is a preview of the the code does:
http://jsfiddle.net/Ember_Hawk/WP5Zu/1/
Essentially, you create a div that appears behind all other elements and does not affect their positioning.
If you need the background to start where the container div starts with respect to its position on the y-axis, you just change the "top" attribute of the "tile-background" class.
If you have an element with dynamically changing height that lies above your container, then this really wouldn't work without some help.
Hope I helped! Good luck! =)
I have a div containing a sidebar. I would like the sidebar's height to be 100% (of the parent div). For now it is only high as the content it has.
#parent {
height: 100%;
}
#sidebar {
height: 100%;
}
When you set the height to 100%, it's 100% of what? The parent might be set to 100% but what quantity is that? While html is set to the height of the viewport, your parent div must be set to something with a set height in real numbers, or inherit it from its parent.
Sorry 100% only apply to width does not apply to height you can try a jquery approach instead
html_height = $("#parent").height();
$('#sidebar').height(html_height);
with this unless you have a padding/margin on the side bar the height should be okay
There are many possibilities to realise this.
The easiest way is to set the height of <html> and <body> to 100%.
HTML
<div id=parent>
<div id=sidebar></div>
</div>
CSS
html,body{height:100%}
#parent {
height: 100%;
background: #222 /* not needed */
}
#sidebar {
width: 200px; /* not needed */
height: 100%;
background: #444 /* not needed */
}
DEMO
EDIT
overflow:auto fixes the problem too height content:
DEMO