I'm trying to position the logo to the center of the header div with half of the logo overflowing to the bottom div. I have the following but I can't figure out how to dynamically set it to be centered. Because relying on top and left values seems like it's going to be inconsistent.
.header {
position: relative;
height: 200px;
background-color: #000;
&:after {
z-index: 2;
content: ' ';
position: absolute;
left: 27%;
top: 60%;
width: 200px;
height: 200px;
background-image: url('images/logo.png');
}
}
You can use left: 50% with negative margin-left (half of logo width).
.header {
background-color: #000;
position: relative;
height: 200px;
}
.header:after {
margin-left: -100px;
position: absolute;
background: #f00;
bottom: -100px;
height: 200px;
width: 200px;
content: ' ';
z-index: 2;
left: 50%;
}
<div class="header"></div>
May I suggest flexbox?
Centering logic will be handled for you, then you just need to make sure the background image is positioned correctly.
.header {
background-color: #000;
height: 200px;
position: relative;
&:after {
content: '';
height: 100%;
display: flex;
background: url('http://i.imgur.com/9My4X1v.jpg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
}
}
https://jsfiddle.net/JackHasaKeyboard/9azLwx22/10/
Related
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>
Im using an image sprite with transparency which im applying to pseudo content. I need a coloured rounder border around the image.
This is what I have so far:
http://codepen.io/anon/pen/bpmGaz
<div class="icon"></div>
.icon:after {
content: "";
display: inline-block;
background-color: gold;
background-image: url(http://orig00.deviantart.net/1110/f/2014/143/9/b/mega_man_hd_sprites__transparent_background__by_lunodevan-d7jgruq.png);
background-position: -129px -40px;
height: 100px;
width: 100px;
}
.icon {
margin: auto;
margin-top: 100px;
position: relative;
width: 100px;
}
.icon:before {
content: "";
display: inline-block;
background: gold;
position: absolute;
top: -50px;
left: -50px;
width: 200px;
height: 200px;
z-index: -1;
border-radius: 100%;
}
However I need it to look like this:
I can do this with additional pseudo content (see below) but the code is getting a bit messy. Is there a shorter way to do this?
http://codepen.io/anon/pen/VaEwQy
.icon:after {
content: "";
display: inline-block;
background-color: gold;
background-image: url(http://orig00.deviantart.net/1110/f/2014/143/9/b/mega_man_hd_sprites__transparent_background__by_lunodevan-d7jgruq.png);
background-position: -129px -40px;
height: 100px;
width: 100px;
}
.icon {
margin: auto;
margin-top: 100px;
position: relative;
width: 100px;
}
.icon:before {
content: "";
display: inline-block;
background: gold;
position: absolute;
top: -50px;
left: -50px;
width: 200px;
height: 200px;
z-index: -1;
border-radius: 100%;
}
I tried using the outline property however sadly it doesn't work cross browser with border-radius.
Adding this code to your pseudo-element seems to do the trick:
border: 50px solid gold;
border-radius: 100%;
http://codepen.io/anon/pen/aNRzmE
I'm trying to give the background of a container a rounded arrow feel. I want the arrow to always be stretched to full width and able to adjust height on the fly (if necessary, I can adjust height with javascript).
Here's an example:
Is this possible using CSS?
If not, how should I accomplish it -- SVG background image?
You can use pseudo elements to achieve this shape.
FIDDLE
div {
width: 200px;
height: 100px;
overflow: hidden;
position: relative;
display: inline-block;
padding: 35px 100px;
}
div:before {
content: '';
width: 200px;
height: 200px;
background: #ccc;
border-radius: 20px;
position: absolute;
transform: rotate(-56deg) skewY(25deg);
}
div:after {
content: '';
width: 334px;
left: 33px;
top: 134px;
z-index: 1;
height: 40px;
background: #ccc;
position: absolute;
}
<div></div>
do not know what I might be doing wrong, I tried to put it this way:
.container-image{
background: url('http://i.imgur.com/Dl8UBO7.png');
width: 226px;
height: 169px;
display: inline-block;
position: relative;
z-index: 20; // dont work
}
.container-image img{
position: absolute;
left: 14px;
top: 13px;
width: 199px;
height: 141px;
z-index: 10; // dont work
}
jsfiddle
I need the image is behind the edge (.container-image)
Put a container around the border div and the image. http://jsfiddle.net/7fqAu/2/
<div class='example'>
<div class="container-image"></div>
<img src="http://i.imgur.com/T0KMwIs.jpg">
</div>
body {
background: red;
}
.container-image {
background: url('http://i.imgur.com/Dl8UBO7.png');
width: 226px;
height: 169px;
position: relative;
z-index: 20;
}
.example {
width: 226px;
height: 169px;
position: relative;
}
.example img {
position: absolute;
left: 14px;
top: 13px;
width: 199px;
height: 141px;
z-index: 10;
}
You could add the border image to .container-image:after instead of as a background to .container-image - no need for z-index at all then.
jsfiddle here
my problem is:
I got this HTML:
<div id="UNDER">
</div>
<div id="OVER">
</div>
and this CSS:
#UNDER
{
width: 100%;
height: 10vh;
background-color: #004;
position: fixed;
z-index: 50;
}
#OVER
{
width: 100%;
height: 100vh;
background: url("images/bg.jpg") center center no-repeat fixed;
background-size: cover;
position: relative;
z-index: 9000;
}
But the background-image is behind UNDER and not over.
I try with the same code, just with background-color instead of background and it's working !
#UNDER
{
width: 100%;
height: 10vh;
background-color: #004;
position: fixed;
z-index: 50;
}
#OVER
{
width: 100%;
height: 100vh;
background-color: #009;
position: relative;
z-index: 9000;
}
Any clue about to make it works with an image in background ?
Thanks for the help.
I think you meant to have background instead of background-image.
http://jsfiddle.net/e56Sp/
background: url("images/bg.jpg") center center no-repeat fixed;