#container{
background:url(images/bg-main.png) repeat-y;
width: 903px;
background-position: 0px 687px;
background-position: bottom;
height: 1200px;
margin-left: auto;
margin-right: auto;
}
#content{
background:url(images/bg-wood.png) repeat-y;
width: 903px;
height: 678px;
margin-left: auto;
margin-right: auto;
}
#content div is inside #container div. I want #container's background to start repeating at 687px from top. Is it possible?
EDIT: Is it possible that first x pixels of div (from top) have emtpy space and after x pixels backgrund starts?
As far as I know it's not possible how you're trying to do it, repeat-x and repeat-y, will repeat the image in both directions along the axis
if you repeat container background full length does the content div background image not cover up the first 678px anyway?
can you provide code in a JSFiddle so we can see what effect you're trying to achieve there will be a way ;)
You can achieve this with pseudo element (::before or ::after) and take advantage of calc() for the offset.
Pseudo element will give you more control and won't affect the content and does not require the need for an extra HTML tag.
Here is a basic example with 100px offset from top:
.background {
height: 300px;
border:1px solid;
position: relative;
}
.background::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: calc(100% - 100px);
width: 100%;
display: block;
box-sizing: border-box;
background: url(//placehold.it/100x100);
}
<div class="background"></div>
You can also use the same techique to offset from left:
.background {
height: 300px;
border:1px solid;
position: relative;
}
.background::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
height: 100%;
width: calc(100% - 100px);
display: block;
box-sizing: border-box;
background: url(//placehold.it/100x100);
}
<div class="background"></div>
Or even from both directions (reversed, too!):
.background {
height: 300px;
border:1px solid;
position: relative;
}
.background::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: calc(100% - 100px);
width: calc(100% - 100px);
display: block;
box-sizing: border-box;
background: url(//placehold.it/100x100);
}
<div class="background"></div>
background : url('image path') 0px 287px repeat-y;
This will repeat vertically your background image from 287px from top.
but another way is to set this to your content div :
margin-top:287px;
you best solution is to do like this :
#container{
position:relative;
}
#background{
background:url('image url');
position:absolute;
top:287px;
left:0px;
z-index:100;
}
#content{
position:absolute;
top:0px;
left:0px;
z-index:99999;
}
Related
I have a CSS problem with a couple of parts. The first part is that I need an absolute positioned :after element to be visible above a fixed position element. The second part is that I need to be able to have a modal as a child of that fixed element that will cover the whole screen. Here's a simplified version of my app.
HTML
<body>
<div class='header'></div>
<div class='nav'></div>
<div class='content'>
<div class='modal'></div>
</div>
<div class='footer'></div>
</body>
CSS
.header {
position: fixed;
height: 50px;
width: 100%;
}
.nav {
position: fixed;
top: 50px;
height: calc(100vh - 100px);
width: 100px;
z-index: 1;
}
.nav:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 100%;
margin: auto;
height: 0;
border-left: solid 10px black;
border-top: solid 10px transparent;
border-bottom: solid 10px transparent;
}
.content {
position: fixed;
top: 50px;
left: 100px;
height: calc(100vh - 100px);
width: calc(100vw - 100px);
}
.footer {
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
}
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
z-index: 2;
}
A codepen: https://codepen.io/winterblack/pen/ypBOqz
I can either have a z-index: -1 on my content element, or a z-index: 1 on my nav element. Either way, it gets in the way of the modal, which must have the content element a its parent.
The best solution I can think of right now is to use z-index: -1 on the content element, and remove it when the modal is opened. That will have the strange effect of having the absolute element disappear while the modal is opened...not too big of a deal probably, but not ideal. Any other ideas?
If you changed the position of content to relative, would that be an ok compromise for what you're trying?
.content {
position: relative;
top: 50px;
left: 100px;
height: calc(100vh - 100px);
width: calc(100vw - 100px);
background: aquamarine;
}
I would like to create a following shaped notice bar on the bottom of my webpage (sticky).
Here is my HTML
<div class="notice-container">
<div class="wave"></div>
<div>
<p>Content here</p>
</div>
</div>
And here is my CSS, I tried several things, but here is the latest:
.notice-container {
display: block;
height: auto;
background-color: #ccc;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
}
.wave:after {
content: "";
background-image: url('../wave.png');
background-repeat: repeat-x;
position: absolute;
top: 0;
margin: -30px;
width: 100%;
height: auto;
}
Since the container has a position: fixed, how can I get the repeat-x work on the wave? I would like to display the background-image on top of the container div.
Your pseudo element needs display: block; and also a specified height attribute. Since the value auto would just tell it to extend to fit its contents (and it has none), then the height value would remain 0.
.wave:after {
content: "";
display: block; /* <- Add this */
background-image: url('../wave.png');
background-repeat: repeat-x;
position: absolute;
top: 0;
margin: -30px;
width: 100%;
height: 60px; /* Or whatever your wave.png requires */
}
Place your url and justice the sizes of image in background-size. Also do not forget to change needed height of pseudo element which is also needs to configure margin-top and top
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
footer {
width: 100%;
height: 70px;
border: 5px solid red;
border-top: 0;
margin-top: 20px;
position: relative;
}
footer:after {
width: 100%;
display: block;
content: '';
height: 20px;
position: absolute;
left: 0;
top:-20px;
background-image: url(https://i.stack.imgur.com/z4HMY.png);
background-size: 10% 20px;
}
<footer></footer>
I need to make something like this , how can I make the square on the middle between this two? Here is the CSS and Photo
My Css
#up{
width:100%;
height:30%;
}
#down{
width:100%;
height:70%;
}
#square{
width:40px;
height:40px;
}
Can I setting the square without counting the percentage of the location of the middle line? (because I want to add all something like this into all sessions of the web , and the height of the session will responsive by the text length
You need to use position relative to outer div and position relative to inner div
here is the link how can you do it
fiddle
.one,
.two,
.three {
width: 100%;
height: 50px;
}
.one {
background: yellow;
position: relative;
}
.two {
background: green;
}
.three {
background: red;
}
.square {
position: absolute;
bottom: -10px;
right: 30px;
height: 20px;
width: 20px;
background: white;
}
<div class="one">
<div class="square">
</div>
</div>
<div class="two">
</div>
<div class="three">
</div>
You can have a <div> square as:
<div id="div1"></div>
in CSS:
#div1{
border: 1px red;
height: /*enter the height */
width: /* enter the width */
position: relative;
left: /*enter the distance */
right: /*enter the distance */
top: /*enter the distance */
bottom: /*enter the distance */
z-index: 100 /* make sure other div's have z index lesser than this div's */
}
Put the square INTO the second div, give it a position: absolute and a top: -20px (and left: Xpx- i.e. whatever you need/want).
You can easily do this with position:absolute to your small box div.
Here is the solution that can help you
body,
html {
height: 100%;
margin:0px;
}
#up {
width: 100%;
height: 30%;
background: red;
}
#down {
width: 100%;
height: 70%;
background: blue;
}
#square {
width: 40px;
height: 40px;
background: green;
position: absolute;
top: calc(30% - 20px);
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 1;
}
<div id="up"></div>
<div id="down"></div>
<div id="square"></div>
This is driving me nuts.
The situation is as follows.
I have 1 wrapper div that needs to span the entire width / height of the screen.
I need 1 div that is positioned on the right hand of the screen and has a fixed width (eg. 100px;).
Then the other div needs to span the remaining left half of the screen (no further !).
Note: I don't want to float the elements, I really need the divs to span the entire height of the screen, because a Google Map will be loaded into the div.
I am aware of the calc function in css, but I don't want to use it, because IE8 doesn't support it.
http://jsfiddle.net/gze4vcd2/
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
#wrapper{
position: relative;
width: 100%;
height: 100%;
background: greenyellow;
}
#left{
position: absolute;
left: 0;
width: auto;
background: blue;
}
#right{
position: absolute;
right: 0;
height: 100%;
width: 200px;
background: yellow;
}
This doesn't work at all.
I have tried all sorts of things, but I just can't get it to work.
Have you tried to use position: fixed for your #Wrapper
#wrapper{
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: greenyellow;
}
#left{
background: red;
position: fixed;
left: 0;
top: 0;
height: 100%;
right: 100px;
}
#right{
background: blue;
position: fixed;
width: 100px;
top: 0;
height: 100%;
right: 0px;
bottom: 0px
}
Above is the updated code that works for me
I have a horizontally and vertically centred image on a page. I would like it so when the user scrolls down, the content below it actually comes up, as if the top content is fixed. Like this effect here... http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/
Only problem is for that effect they use the background-attachment: fixed property. I cannot use this as I need the image to be content (it will actually be changed to HTML5 video).
My code is here... http://jsfiddle.net/5jphd/1/
HTML
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg">
<div class="text">Scroll down</div>
</div>
<div class="wrap">
Here is some content
</div>
CSS
html, body {height: 100%}
body {
padding: 0;
margin:0;
font-family: sans-serif;
}
.image {
position: relative;
left: 0px;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-attachment: scroll;
text-align: center;
}
img {
max-width: 90%;
max-height: 70%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.text {
position: absolute;
bottom: 20px;
left:50%;
margin-left: -44px;
}
.wrap {
background-color: lightblue;
text-align: center;
padding: 100px;
font-size: 30px;
min-height: 1000px;
}
Is this possible to do with this markup? So when you scroll down the content will rise up and overlap the image.
Ok i have done it, this is what I wanted to achieve. I simply made the video and scroll text position:fixed, and made the main body content position:relative - http://jsfiddle.net/5jphd/4/
html, body {height: 100%}
body {
padding: 0;
margin:0;
font-family: sans-serif;
}
.image {
position: relative;
left: 0px;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-attachment: scroll;
text-align: center;
}
img {
max-width: 90%;
max-height: 70%;
margin: auto;
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
}
.text {
position: fixed;
bottom: 20px;
left:50%;
margin-left: -44px;
}
.wrap {
background-color: lightblue;
text-align: center;
padding: 100px;
font-size: 30px;
min-height: 1000px;
position:relative;
}
JSFiddle
I think this is what you're essentially asking for. Keep aspect ratios in mind, this is what an hd vieo would probably look like on a 320x480 or so.
#bg {
position:absolute;
position:fixed;
top:0;
width:100%;
height:100%;
margin:auto;
overflow:hidden;
z-index:-1;
}
#bg img { max-width:100%; }