I have a button which is actually a div posing as a button. On hover of the div i change the background to a gradient background. However the gradient is overlapping a background image that i have originally. How can i retain the original bg-image.
I have attached a fiddle demo at the end of the question.
<div class="cart-btn">CART</div>
CSS
.cart-btn{
margin-left:20px;
margin-top:2px;
width:120px;
height:30px;
background-color:#0396C2;
border-radius:3px;
background-image: url(http://www.thorlabs.com/images/newhp/shopping_cart2.png) ;
background-repeat:no-repeat;
}
.cart-btn:hover{
border: 1px solid #005387;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0396C2), color-stop(100%,rgba(0,76,158,1))); /* Chrome,Safari4+ */
margin-top:1px;
}
.cart-btn a{
color: #FFFFFF;
display: block;
line-height: 34px;
outline: medium none;
text-align: center;
text-decoration: none;
}
FIDDLE DEMO
you have to give the background link of image again on hover.
.btn:hover{
background: url('url of the image') no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0396C2), color-stop(100%,rgba(0,76,158,1))); /* Chrome,Safari4+ */ ;
}
Try following css...
Demo Fiddle
.cart-btn:hover{
border: 1px solid #005387;
background: url(http://www.thorlabs.com/images/newhp/shopping_cart2.png) no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0396C2), color-stop(100%,rgba(0,76,158,1))); /* Chrome,Safari4+ */
margin-top:1px;
}
Related
I am making the select2 combo box, I want to remove blue color hover style, but I cannot remove it, does not exit. How can I do it? Please give me a solution, thanks
EXAMPLE
Js
jQuery(document).ready(function($){
$('select').select2({width:100});
$('b[role="presentation"]').hide();
$('.select2-selection__arrow').append('<i class="fa fa-angle-down"></i>');
});
view
<select class="js-example-basic-single">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
CSS
.select2-dropdown.select2-dropdown--below{
width: 148px !important;
}
.select2-container--default .select2-selection--single{
padding:6px;
height: 37px;
width: 148px;
font-size: 1.2em;
position: relative;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
background-image: -moz-linear-gradient(top, #424242, #030303);
background-image: -ms-linear-gradient(top, #424242, #030303);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
background-image: -webkit-linear-gradient(top, #424242, #030303);
background-image: -o-linear-gradient(top, #424242, #030303);
background-image: linear-gradient(#424242, #030303);
width: 40px;
color: #fff;
font-size: 1.3em;
padding: 4px 12px;
height: 27px;
position: absolute;
top: 0px;
right: 0px;
width: 20px;
}
Add the following to your CSS code since the code causing the blue hover effect is in a minified css file and is hard to edit:
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: lightgreen !important;
color: white;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: inherit;
}
Here is your updated JSFiddle
If you simply would like to remove the blue background from the element on :hover you can add this line of of code:
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: inherit;
color: inherit;
}
DEMO
Used to this css for hover and default background-color
html .select2-container--default .select2-results__option--highlighted[aria-selected]{background-color: green;}
html .select2-container--default .select2-results__option--highlighted[aria-selected]{color:#000;}
html .select2-container--default .select2-results__option[aria-selected=true]{background-color:red;}
Demo
add in style
.select2-container--default .select2-results__option[aria-selected="true"]
{
background:#fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]
{
background:green;
color:#fff;
}
I have entered the HTML and CSS codes below. What the problem, is that the background image fails to appear. Please do help. Thanks in advance.
.parallax-1 {
height: 200px;
width: 100%;
background: linear-gradient(to bottom, #000 -10%, transparent 30%),
linear-gradient(to top, #000 -10%%, transparent 30%),
url('http://lorempixel.com/400/200');
background-size: cover;
}
.parallax {
width: 100%;
}
.descript {
background: #f2f2f2;
font-family: 'open sans', sans-serif;
font-style: italic;
font-weight: 200;
font-size: 0.7em;
padding: 5px 10px;
}
<!DOCTYLE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,800italic,300,400' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="parallax-1 parallax">
<div class="descript-parallax">
<span>Description for the image</span><br>
<span class="photo-descript">Copyright someone</span>
</div>
</div>
</body>
</html>
Update:
I removed linear gradient ans tried, as advised in some code given in the answers. How can I add them? Also, why is this problem coming only in the top browser Chrome ( latest version )? Some browsers are displaying it, according to the comments below.
your css is mixed up.
use like this
body {
background: #6cab26;
background-image: url(IMAGE_URL); /* fallback */
background-image: url(IMAGE_URL), -webkit-gradient(linear, left top, left bottom, from(#6cab26), to(#6ceb86)); /* Saf4+, Chrome */
background-image: url(IMAGE_URL), -webkit-linear-gradient(top, #6cab26, #6ceb86); /* Chrome 10+, Saf5.1+ */
background-image: url(IMAGE_URL), -moz-linear-gradient(top, #6cab26, #6ceb86); /* FF3.6+ */
background-image: url(IMAGE_URL), -o-linear-gradient(top, #6cab26, #6ceb86); /* Opera 11.10+ */
background-image: url(IMAGE_URL), linear-gradient(to bottom, #6cab26, #6ceb86); /* W3C */
}
in order to get background image with gardient.
(How do I combine a background-image and CSS3 gradient on the same element?)
It's working in Firefox, Chrome, ... but You need define background for each -moz- for FF, -webkit- for chrome and so on.
There is example :
.parallax-1 {
height: 200px;
width: 100%;
border:solid 1px gray;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) -10%, rgba(0,0,0,0) 30%),url('http://lorempixel.com/400/200');
background: -webkit-gradient(linear, left top, left bottom, color-stop(-10%,rgba(0,0,0,0.65)), color-stop(30%,rgba(0,0,0,0))),url('http://lorempixel.com/400/200');
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) -10%,rgba(0,0,0,0) 30%),url('http://lorempixel.com/400/200');
background: -o-linear-gradient(top, rgba(0,0,0,0.65) -10%,rgba(0,0,0,0) 30%),url('http://lorempixel.com/400/200');
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) -10%,rgba(0,0,0,0) 30%),url('http://lorempixel.com/400/200');
background: linear-gradient(to bottom, rgba(0,0,0,0.65) -10%,rgba(0,0,0,0) 30%),url('http://lorempixel.com/400/200');
background-size: cover;
}
.parallax {
width: 100%;
}
.descript {
background: #f2f2f2;
font-family: 'open sans', sans-serif;
font-style: italic;
font-weight: 200;
font-size: 0.7em;
padding: 5px 10px;
}
<div class="parallax-1 parallax">
<div class="descript-parallax">
<span>Description for the image</span><br>
<span class="photo-descript">Copyright someone</span>
</div>
</div>
Of course, for .parallax You can add color:white or some other color, because Your gradient background, black color for text is little hard to see.
I've been working on a webpage for the last few weeks and I have the desktop version complete. Currently I'm working on a stylesheet for the mobile site. But I've run into a problem where the content div will not size to the width of the screen. I've checked all width tags and max width tags all are set to 100% instead of an exact screen size. I've also used js to get the window size and on my test device it's 540px; but the div tag is sizing to 980px. I have a reset css stylesheet included and I made sure it doesn't affect the size as well. I've noticed using position:fixed makes it the right size but then it doesn't scroll. here's the style sheet. and html. Sorry if my code is poor. I'm an application programmer by trade, not a web designer. Any constructive criticism would be appreciated as well.
http://jsfiddle.net/justinclev/ma63f3vo/
html, body { height:100%; width:100%;}
body {
background-color:#131720;
font-family: 'helvetica';
text-align:justify;
text-justify:inter-word;
}
.Header {
z-index:95;
position:relative;
width:100%;
height: 35px;
background-color: #039de3;
/*
background: #5078CC; /* Old browsers
background: -moz-linear-gradient(top, #D93F3F 0%, #FF4040 90%, #4C2020 100%); /* FF3.6+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D93F3F), color-stop(90%,#FF4040), color-stop(100%,#4C2020)); /* Chrome,Safari4+
background: -webkit-linear-gradient(top, #D93F3F 0%,#FF4040 90%,#4C2020 100%); /* Chrome10+,Safari5.1+
background: -o-linear-gradient(top, #D93F3F 0%,#FF4040 90%,#4C2020 100%); /* Opera 11.10+
background: -ms-linear-gradient(top, #D93F3F 0%,#FF4040 90%,#4C2020 100%); /* IE10+
background: linear-gradient(to bottom, #D93F3F 0%,#FF4040 90%,#4C2020 100%); /* W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D93F3F', endColorstr='#4C2020',GradientType=0 ); /* IE6-9 */
}
.Header .Title {
float:left;
width:auto;
margin-left:1%;;
position: absolute;
bottom:5px;
font-size: 20px;
color: white;
}
.Container {
position:fixed;
height:auto;
margin-top:65px;
margin-bottom:70px;
}
.Content {
overflow:auto;
min-height: 100%;
background-color:white;
box-shadow: 15px 0 21px -10px black, -15px 0 21px -10px black;
}
.linkButton {
font-family: 'Roboto', cursive;
background: none;
border: none;
font-size: 16px;
color: #ED5555;
text-decoration: none;
cursor: pointer;
}
.HomePageText {
margin:1%;
width:60%;
float:left;
font-size:8px;
}
/*
*
*
* Header
*
*/
.heading {
font-family: 'Roboto', sans-serif;
width: 100%; /* Spans the width of the page */
height: 60px;
z-index:98;
position: fixed;
top: 0px;
background-color:#131720;
/*
background: #5078CC; /* Old browsers *
background: -moz-linear-gradient(top, #063497 0%, #5078CC 90%, #022162 100%); /* FF3.6+ *
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#063497), color-stop(90%,#5078CC), color-stop(100%,#022162)); /* Chrome,Safari4+ *
background: -webkit-linear-gradient(top, #063497 0%,#5078CC 90%,#022162 100%); /* Chrome10+,Safari5.1+ *
background: -o-linear-gradient(top, #063497 0%,#5078CC 90%,#022162 100%); /* Opera 11.10+ *
background: -ms-linear-gradient(top, #063497 0%,#5078CC 90%,#022162 100%); /* IE10+ *
background: linear-gradient(to bottom, #063497 0%,#5078CC 90%,#022162 100%); /* W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#063497', endColorstr='#022162',GradientType=0 ); /* IE6-9 */
}
.BlueBarHeader {
font-family: 'Roboto', sans-serif;
width: 100%; /* Spans the width of the page */
height: 40px;
z-index:98;
position: fixed;
top:25px;
-webkit-box-shadow: 0px 7px 10px 1px rgba(19,23,32, 0.95);
-moz-box-shadow: 0px 7px 10px 1px rgba(19,23,32,0.95);
box-shadow: 0px 7px 10px 1px rgba(19,23,32,0.95);
background-color:#006694;
background: #006694; /* Old browsers */
}
.Logo {
font-size: 24px;
color: white;
position: absolute;
bottom: 10px;
left: 5px;
}
/*Login Style info */
.Login{
position: absolute;
top: 0px;
right:0;
height:25px;
padding-top:5px;
padding-left: 10px;
padding-right:5px;
color: white;
font-size: 15px;
}
.Login a {
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: white;
text-decoration: none;
}
.Login a:hover {
text-decoration:underline;
color: white;
}
#LoginLink {
display: inline-block;
}
/*
* Footer
*
*/
footer{
position:relative;
display:block;
z-index: 99;
width: 100%;
height:50px;
bottom: 0px;
right:0;
padding-top:0px;
color:white;
background-color:#131720;
/*background: #FF4040; /* Old browsers *
background: -moz-linear-gradient(top, #063497 0%, #5078CC 90%, #063497 100%); /* FF3.6+ *
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#063497), color-stop(90%,#5078CC), color-stop(100%,#063497)); /* Chrome,Safari4+ *
background: -webkit-linear-gradient(top, #063497 0%,#5078CC 90%,#063497 100%); /* Chrome10+,Safari5.1+ *
background: -o-linear-gradient(top, #063497 0%,#5078CC 90%,#063497 100%); /* Opera 11.10+ *
background: -ms-linear-gradient(top, #063497 0%,#5078CC 90%,#063497 100%); /* IE10+ *
background: linear-gradient(to bottom, #063497 0%,#5078CC 90%,#063497 100%); /* W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#063497', endColorstr='#063497',GradientType=0 ); /* IE6-9 */
}
.footer{
display:block;
z-index: 99;
width: 100%;
height:35px;
bottom: 20px;
right:0;
padding-top:10px;
font-family: 'Roboto', sans-serif;
text-align:center;
font-size:20px;
color:white;
background-color:#006694;
}
footer a{
text-decoration:none;
font-style:italic;
color:white;
}
footer a:hover {
text-decoration:underline;
}
Webpage
<?php
include_once '/includes/db_connect.php';
include_once '/includes/functions.php';
sec_session_start();
if (login_check($mysqli) == true) {
$logged = 'in';
} else {
$logged = 'out';
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Imagine That</title>
<?php
include_once '/includes/includes.php';
?></head>
<body>
<div class="Content">
<div class="Container">
<div class="Header">
<div class="Title">Welcome to the Imagine That website!</div>
</div>
<div class="HomePageText">
This site is dedicated to furthering my knowledge of coding as well as web design. If you take a look around which I hope you will.
You will notice that I have quite a bit of features in this site that aren't necessary and some that may just seem obsurd for a digital Portfolio.
Well before you leave thinking I've gone mad and don't know what I'm doing. Allow me to explain the method to my madness, because trust me there is one.
This site has two purposes. The first is to be a digital portfolio displaying my knowledge of code and different projects I have created.
The second is to be a playground for my imagination to come up with new and cool things. To keep it simple this is a digital porfolio displaying all the things that I have learned about web design and coding.
Some of these features can only be accessed by creating a account, Now I know what your thinking. Why should I create a account to such a small website for one guy that serves no purpose for me. Well, To be frank this site does serve a purpose to not only I, but also the new developer looking for source code on odd projects. The projects I post on here will include either their full source code or small fragments for the complicated parts of the program. I will go over a bit of it to teach beginners how to create and do the things I have created already.
So again bare with me and create an account. It's easy and won't take you much time. After that feel free to look around and explore my creation.
</div>
<div style="width:37%; height:100%; float:right;">
<img style="width:95%; height:auto;margin:0 auto; margin-top: 15px;" src="Photos/307470_2505425680003_1303200128_n.jpg" />
</div>
</div>
</div>
<?php
include_once 'Footer.php';
?>
</body>
</html>
Add this to your HTML page's head
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I have a container div, containing 3 divs, a sidebar, a content and a header while all the elements inside are rendered as they should (they are positioned as "relative" if this may influence in my problem), the sidebar and the content won't render min-height: 100%; no matter what...
my div won't stretch with the min-height as it is supposed to...
here is the code: http://jsfiddle.net/vhZV6/4/
as you can see (I put a white background to best recognize it) the div wich is supposed to stretch simply won't...
Edit: here is a temp site where I tried to implement the solutions... http://www.wabisuke-team.org/Temp/home.html as you can see, all but the last 2 pages (strees and "contattateci") are rendered as they should, but those 2 while have a messed background image out of the div not resizing as it should...
Edit:
I solved this by putting a min-height in pixels, instead of in percentage, it now works as i wanted it to, thanks everyone for your efforts and for you patience ^^
Use height: 100%, there is no need for min-height see here http://jsfiddle.net/vhZV6/5/
html{
height:100%;
}
body {
display:block;
height:100%;
margin: 0;
padding: 0;
overflow:auto;
/* just some back ground and graphical tweeks*/
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
color:#000000;
background: #86acef; /* Old browsers */
background: -moz-linear-gradient(top, #86acef 0%, #baceef 35%, #86acef 70%, #baceef 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#86acef), color-stop(35%,#baceef), color-stop(70%,#86acef), color-stop(100%,#baceef)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #86acef 0%,#baceef 35%,#86acef 70%,#baceef 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #86acef 0%,#baceef 35%,#86acef 70%,#baceef 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #86acef 0%,#baceef 35%,#86acef 70%,#baceef 100%); /* IE10+ */
background: linear-gradient(to bottom, #86acef 0%,#baceef 35%,#86acef 70%,#baceef 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86acef', endColorstr='#baceef',GradientType=0 ); /* IE6-9 */
}
/* ~~this fixed width container surrounds the other divs~~ */
.container {
height: 100%;
container:overflow;
display:block;
position:relative;
width: 1000px;
background: #FFF url(../img/Graphic/bg.jpg) no-repeat fixed center;
background-size:100% 100%;
background-position:center;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
.header {
position:relative;
/* header graphical tweeks */
background: #2945c4; /* Old browsers */
background: -moz-linear-gradient(top, #2945c4 0%, #7db9e8 35%, #2945c4 70%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2945c4), color-stop(35%,#7db9e8), color-stop(70%,#2945c4), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2945c4 0%,#7db9e8 35%,#2945c4 70%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2945c4 0%,#7db9e8 35%,#2945c4 70%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2945c4 0%,#7db9e8 35%,#2945c4 70%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #2945c4 0%,#7db9e8 35%,#2945c4 70%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2945c4', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
.sidebar1 {
position:relative;
float: left;
width: 180px;
height:100%;
}
.content {
position:relative;
padding: 10px 0;
width: 780px;
float: left;
height:100%;
background: #FFF;
background-size:100% 100%;
background-position:center;
}
here is the fiddle with long content http://jsfiddle.net/xM4NC/
and here is with short http://jsfiddle.net/xM4NC/1/
I set body to height 100%, but the content div to min-height 100%. That way it's parent had a defined height, so that div will be at least as tall as the body, but will grow beyond it if necessary. Then added a left margin and floated the sidebar in that space
body {
margin: 0;
padding: 0;
height: 100%;
}
#content {
background: #EEE;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 0 20px 0 20px;
margin: auto;
margin-left: 180px;
font: 1.5em arial, verdana, sans-serif;
width: 960px;
min-height: 100%;
}
and the html
<div class="header">header</div>
<div class="sidebar1">sidebar</div>
<div id="content">
text
</div>
What am I doing bad?
CSS:
.submit{
padding-left:10px;
margin:0;
border:0;
outline: 0;
height:32px;
padding-right:32px;
}
.green-btn {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#61A801), to(#8CC400));
background: -webkit-linear-gradient(top, #8CC400, #61A801);
background: -moz-linear-gradient(top, #8CC400, #61A801);
background: -ms-linear-gradient(top, #8CC400, #61A801);
background: -o-linear-gradient(top, #8CC400, #61A801);
color: #fff;
font-family: verdana;
font-size: 13px;
font-weight: normal;
border-radius:5px;
}
.clipboard{
background-image: url(http://cdn1.iconfinder.com/data/icons/opensourceicons/32/Scissors.png) no-repeat right center;
}
HTML:
<input type="submit" value="Copy" class="submit green-btn clipboard">
JSFiddle: http://jsfiddle.net/77NYA/
You cannot specify the position and repeat values inside the background-image property. You can only specify the URL to the image. You'll have to separate them out like this:
.clipboard {
background-image: url(http://cdn1.iconfinder.com/data/icons/opensourceicons/32/Scissors.png);
background-repeat: no-repeat;
background-position: right center;
}
Also note: Some browsers (I don't know which ones) don't allow gradients and background images to be combined together.
Here's an alternate solution using a <button> with an <img> inside it:
<button type="submit" value="Copy" class="submit green-btn">
<img src="http://cdn1.iconfinder.com/data/icons/opensourceicons/32/Scissors.png" alt="[scissors]" />
Copy
</button>
.submit{
padding-left:10px;
margin:0;
border:0;
outline: 0;
height:32px;
line-height:32px;
padding-right:10px;
}
.green-btn {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#61A801), to(#8CC400));
background: -webkit-linear-gradient(top, #8CC400, #61A801);
background: -moz-linear-gradient(top, #8CC400, #61A801);
background: -ms-linear-gradient(top, #8CC400, #61A801);
background: -o-linear-gradient(top, #8CC400, #61A801);
color: #fff;
font-family: verdana;
font-size: 13px;
font-weight: normal;
border-radius:5px;
}
.green-btn img {
float: right;
margin-left: 10px;
}
And the jsFiddle preview. Feel free to play with the margins and stuff to make it look more how you want.
You have to use background: url(...) instead of background-image
The linear gradient will be overridden by your background-image once you fix the background-image property.
Best way to do this is to create a div and use linear-gradient on it. Create 2 child elements one which will contain text and other which will contain the icon as background. Make the div behave like a submit button using jquery.
in your .clipboard class remove -image and make it
.clipboard { background: url(http://cdn1.iconfinder.com/data/icons/opensourceicons/32/Scissors.png) no-repeat right center;
}
because 'no-repeat' is value of background-repeat and
and 'right center' is value of background-position, and you are using these values in background-image .
so syntex is background: image-src repeat-value image-position