EDIT:
The chat window should be aligned to the right, with the chat area within the chat window, like this, why isn't it?: Codepen
Should be this:
I'm looking to make a simple site with a header and a rectangle on the side. For some reason, I cannot position my logo correctly! What I currently have:
html,
body {
background-color: #333;
margin: 0;
padding: 0;
}
#overlay {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.2;
background: #ccc;
background: -webkit-linear-gradient(right top, #8900AB, #282828);
background: -o-linear-gradient(top right, #8900AB, #282828);
background: -moz-linear-gradient(top right, #8900AB, #282828);
background: linear-gradient(to top right, #8900AB, #282828);
}
#header {
position: absolute;
background: #404040;
width: 100%;
height: 10%;
}
#logo {
position: absolute;
background-image: url(http://csgovoid.net/img/logo.png);
background-repeat: no-repeat;
background-size: contain;
}
<html>
<body>
<div id="overlay"></div>
<div id="header">
<div id="logo"></div>
</div>
<div id="Seperator_H01"></div>
<div id="chat_extended">
<div id="chat_area"></div>
<input id="chat_input" type="text" placeholder="Chat...">
<button id="send_button" onClick="send()">SEND</buttton>
</div>
<div id="Seperator_V01"></div>
</body>
</html>
CodePen
What I'm trying to achieve:
(The text input and send button aren't included in the picture.)
It looks like you need to add a width and height :) A div has a height and width of zero by default, and since there is nothing in there you need to set it!
you need to add img tag;
<div id="logo">
<img src="http://csgovoid.net/img/logo.png">
</div>
and add following css:
#logo img{
width:2%;
//background stuff is removed -- not required in this case
}
#chat_extended
{ text-align:center;
padding-top:5%;
}
#header {
position: absolute;
background: #404040;
width: 100%;
//height is removed -- not required
}
Here is a fiddle : https://jsfiddle.net/5odd0q1n/
CSS :
html,
body {
background-color: #333;
margin: 0;
padding: 0;
width:100%;
height:100%;
}
#overlay {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.2;
background: #ccc;
background: -webkit-linear-gradient(right top, #8900AB, #282828);
background: -o-linear-gradient(top right, #8900AB, #282828);
background: -moz-linear-gradient(top right, #8900AB, #282828);
background: linear-gradient(to top right, #8900AB, #282828);
}
#header {
position: absolute;
background: #404040;
width: 100%;
height: 10%;
}
#logo {
position: relative;
background-image: url(http://csgovoid.net/img/logo.png);
background-repeat: no-repeat;
background-size: contain;
height:100%;
}
HTML : (you had a typo in </button>)
<html>
<body>
<div id="overlay"></div>
<div id="header">
<div id="logo"></div>
</div>
<div id="Seperator_H01"></div>
<div id="chat_extended">
<div id="chat_area"></div>
<input id="chat_input" type="text" placeholder="Chat...">
<button id="send_button" onClick="send()">SEND</button>
</div>
<div id="Seperator_V01"></div>
</body>
</html>
Absoulute position is not good for responsivnes becuse you can't get a width or a height relative to parrent using css only :)
Anyways you asked for border line on the header : https://jsfiddle.net/5odd0q1n/3/ (you can find it here)
you only need to add
border-bottom: 10px solid purple ;
to your #header :)
Related
I have an image that I would like to overlay on top of a background gradient that I have set on a section element. Both the background gradient and image I am setting in CSS and calling via a class in HTML. Originally when just using the background gradient it worked fine, but after adding the image to place over the background gradient the background gradient disappeared?
.banner-gradient {
background: radial-gradient(circle, #ba000b, #9e0008);
color: white;
z-index: 0;
}
.banner-overlay {
background: url("../imagery/image.png");
max-width: 100%;
height: auto;
background-position: bottom;
background-repeat: repeat-x;
z-index: 1;
}
.section-align-center {
text-align: center;
}
<section class="banner-gradient banner-overlay section-align-center">
<div class="container">
<p>image over background gradient</p>
</div>
</section>
Try using background-image instead of background for image.
.banner-gradient:before {
content: " ";
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top: 0;
left: 0;
background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%);
}
.banner-overlay {
background: url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') repeat;
}
.section-align-center {
height: 400px;
position: relative;
}
<section class="banner-gradient banner-overlay section-align-center">
<div class="container">
<p>image over background gradient</p>
</div>
</section>
I solved this with the help of this post. You must first place the banner-gradient in your outer div then in your inner div use banner-image.
HTML
<section class="banner-gradient section-align-center">
<div class="container banner-overlay">
<p>image over background gradient</p>
</div>
I would rather edit the class of the element you want the transparency in
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
div.background {
background: url('https://www.w3schools.com/css/klematis.jpg') repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
https://jsfiddle.net/mergatroid/xkmyqjec/1/
I have list of news articles so user know that there is some text in bottom. How i tried like this style="background: linear-gradient(360deg, rgba(135, 135, 135, 0) 0%, #878787 20%)"
but i am not getting what i want to achieve.
Here is screen how i want to get it
Now i am getting like this
Just apply it on an ::after pseudoelement. I create a snippet to illustrate. Create a wrapper with relative and ::after on it, and inside the scroll layer and the articles. Just easy.
.wrapper {
position: relative;
}
.scroll {
position: relative;
height: 150px;
overflow: auto;
}
.article {
height: 80px;
background: blue;
margin: 10px;
}
.wrapper::after {
content: " ";
position: absolute;
bottom: 0;
width: 100%;
z-index: 1111;
background-image: linear-gradient(transparent, #ccc);
height: 50px;
}
<div class="wrapper">
<div class="scroll">
<div class="article">a</div>
<div class="article">b</div>
<div class="article">c</div>
</div>
</div>
You need to just update your .scss file like:
.item-md{
background: #878787;
padding-right:15px !important;
color: #fff !important;
}
I think its solve your problem
There may be a simple solution, but I can't seem to figure this out. I'm taking a design I made and turning it into a live site. There is a gradient background and a dark overlay layer for effect. I can't seem to place the content above the overlay.
http://i.stack.imgur.com/Vmtj6.jpg
HTML:
<div class="overlay">
<div class="container main">
{{> yield}}
</div>
</div>
CSS:
html, body {
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
/* Gradient: */
background: #08a8d4;
background: -moz-linear-gradient(45deg, #08a8d4 7%, #04ffc4 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(7%,#08a8d4), color-stop(100%,#04ffc4));
background: -webkit-linear-gradient(45deg, #08a8d4 7%,#04ffc4 100%);
background: -o-linear-gradient(45deg, #08a8d4 7%,#04ffc4 100%);
background: -ms-linear-gradient(45deg, #08a8d4 7%,#04ffc4 100%);
background: linear-gradient(45deg, #08a8d4 7%,#04ffc4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#08a8d4', endColorstr='#04ffc4',GradientType=1 );
}
.overlay {
height: 100%;
opacity: 0.26;
background: #535353;
position: relative;
}
.main {
margin-top: 50px;
}
.main h1 {
color: white;
}
change the
.overlay {
height: 100%;
opacity: 0.26;
background: #535353;
position: relative;
}
to
.overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
opacity: 0.26;
background: #535353;
}
Have you tried using the CSS z-index option.
apply a z-index:100 to the content you want raised
you should place your .container.main outside of .overlay and then use position: absolute on either
<div class="overlay">
</div>
<div class="container main">
{{> yield}}
</div>
assign position: absolute on either .overlay or .container and make sure the container of both these two elements has also position property defined
I am trying to make some line appear(say about 10px) after hovering mouse on an image at the bottom of the image
I saw this on MTV's website in their "You would also like these" section below every post.They use css-background sprites to do that.
I am going mad after repeated failed attempts to recreate.Everythings works,except the main onhover line coming up.
This is my code so far
CSS
.yel_strip{background-position:-280px -495px; width:165px; margin:-8px 0 0 0; height:5px; position:absolute; display:none; z-index:1;}
.yel_strip:hover{ background:url(http://mtv.in.com/images/sprite_v1.png) no-repeat;}
HTML
<div class="movieL hover_thumb">
<div><img width="165" height="93" alt="" src=""/>
<div class="yel_strip"></div>
</div> </div>
Any help would be appreciated.Thanks
I've made working fiddle for you with no extra not needed markup in your html: http://jsfiddle.net/PJMPw/3/
Your HTML:
<a href="#" class="hoverable">
<img src="http://placekitten.com/g/300/300" />
</a>
And CSS:
.hoverable {
display: block;
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
}
.hoverable:hover:after {
bottom: 0;
}
.hoverable:after {
content: "";
position: absolute;
width: 100%;
height: 10px;
bottom: -10px;
left: 0;
background: -moz-linear-gradient(left, rgba(46,170,232,1) 0%, rgba(255,235,137,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(46,170,232,1)), color-stop(100%,rgba(255,235,137,1)));
background: -webkit-linear-gradient(left, rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
background: -o-linear-gradient(left, rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
background: -ms-linear-gradient(left, rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
background: linear-gradient(to right, rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
This is the HTML:
Replace http://yoururl with your url.
<div class="container">
<span></span>
</div>
This is the CSS:
Replace http//yourimage with your image address.
.container {
width: 165px;
height: 93px;
background: url('http//yourimage');
position: relative;
}
#internal_image {
display: blocK;
width: 165px;
height: 93px;
}
#internal_image:hover span {
display: block;
width: 165px;
height: 5px;
position: absolute;
background: url(http://mtv.in.com/images/sprite_v1.png) no-repeat;
background-position: -280px -495px;
bottom: 0;
}
EDIT: Added EXAMPLE: http://jsfiddle.net/BmwCe/3/
The simples thing you could do is set a border on the image on hover.
i.e
markup
<div class="image-container">
<img src="../styles/images/Desert.jpg" />
</div>
css
.image-container {
display: inline-block;
position: relative;
}
.image-container img {
width: 100px;
height: 100px;
}
.image-container img:hover {
border-bottom: 5px solid green;
}
If you insist that you want to have a background image instead of border you could do this
<div class="image-container">
<img src="../styles/images/Desert.jpg" />
<div class="shiny-border"></div>
</div>
.image-container {
display: inline-block;
position: relative;
}
.image-container img {
width: 100px;
height: 100px;
}
.image-container .shiny-border {
position: absolute;
top: 90px; //subtract the height of the shiny-border from 100px which is the height // to have the inset effect of the image
height: 10px;
width: 100%;
display: none;
}
.image-container img:hover + .shiny-border {
display: block;
background-image: url(../styles/images/Hydrangeas.jpg);
}
Final resulting background image that I need:
Background image that I have used:
But I have got this Fiddle
::Summary of Fiddle::
HTML...
<div id="top-part">
<div id="topmost">
<div id="top-most" class="wrapper">
</div>
</div>
<div id="topmenu" class="wrapper">
</div>
CSS...
.wrapper{
position: relative;
width: 943px;
margin: 0 auto;
}
#top-part{
background: url(img/bg-header-effects.png) no-repeat top center;
}
#topmost{
background: #900;
opacity: 0.8;
}
#top-most{
height: 139px;
}
#topmenu{
background: #900;
opacity: 0.8;
height: 51px;
border-radius: 0 0 20px 20px;
}
Update - to cover your recent edit
#header{
background: #f00 url('http://i.stack.imgur.com/GWVfL.jpg');
opacity: .6;
width: 100%;
height: 189px;
}
Working Fiddle
You could try using the background property in CSS:
div{
background: url('path_to_your_image.jpg') no-repeat;
}
Learn more about using the background-image property here
Note:
There is a difference between background and background-image. In this answer I've used the background property which basically takes all of the possible options for a background image in CSS and lets them be used in a single call.
For example, you could split the above up into two selectors:
div{
background-image: url('path_to_your_image.jpg') no-repeat;
background-repeat: no-repeat;
}
You could do like this fiddle
html...
<div id="top-part">
<div id="topmost">
</div>
</div>
<div id="top-menu" class="wrapper">
<div id="topmenu">
</div>
</div>
css...
.wrapper{
position: relative;
width: 943px;
margin: 0 auto;
}
#top-part{
background: url(img/bg-header-effects.png) no-repeat top center;
}
#topmost{
background: #900;
opacity: 0.8;
height: 139px;
}
#top-menu{
background: url(img/bg-header-effects.png) no-repeat 50% 45%;
border-radius: 0 0 20px 20px;
}
#topmenu{
background: #900;
opacity: 0.8;
height: 51px;
border-radius: 0 0 20px 20px;
}
The easy approach that I'm thinking of is having a picture within divs covering the whole page. The code will be very simple, but the only downside is the image may be warped or it can be clicked on unless you have this.
HTML:
<div id="backgroundcolor">
<div id="backgroundimage">
</div>
</div>
CSS:
#backgroundcolor {
background-color: #000;
z-index: 1;
}
#backgroundimage {
background: ("http://cdn.theatlantic.com/static/infocus/election110712/s_e01_37923312.jpg");
resize: none;
object-position: center;
object-fit: initial;
}