I have the following image and i want to turn it to CSS Sprite:
<img height="32" width="139" border="0" onmouseout="this.src='/images/top_menu/nav03.gif';" onmouseover="this.src='/images/top_menu/nav04.gif';" src="/images/top_menu/nav03.gif" />
My CSS is
.sprite-top_menu {
background-image: url(top_menu.png);
background-repeat: no-repeat;
/*display: block;*/
}
.sprite-nav03-top_menu {
width: 139px;
height: 32px;
background-position: 0 -32px;
}
.sprite-nav04-top_menu {
width: 139px;
height: 32px;
background-position: -139px -32px;
}
What is the best way to do it ?
<img> tags don't lend themselves very well for sprites, I recommend doing something like this:
<div class="sprite-top_menu"></div>
CSS
.sprite-top_menu {
background: url(top_menu.png) no-repeat;
width: 139px;
height: 32px;
background-position: 0 -32px;
}
.sprite-top_menu:hover {
background-position: -139px -32px;
}
Related
This is my code.I want to move that yellow circle to right (about 25px) .how can I give that style to the second image only.
.img_home
{
background-repeat: no-repeat;
height: 1000px;
background-image: url(http://www.spidycode.com/testing/revibe/images/Circle1.png),url(http://www.spidycode.com/testing/revibe/images/Circle2.png);
}
<div class="img_home"></div>
Try this
.img_home
{
background-repeat: no-repeat;
height: 1000px;
background: url(http://www.spidycode.com/testing/revibe/images/Circle1.png) 25px top no-repeat,url(http://www.spidycode.com/testing/revibe/images/Circle2.png) no-repeat;
}
<div class="img_home"></div>
simply add background-position: 25px 0px, 0px 0px;
Try this
.img_home
{
background-repeat: no-repeat;
height: 1000px;
background: url(http://www.spidycode.com/testing/revibe/images/Circle1.png) 25px 0 no-repeat,url(http://www.spidycode.com/testing/revibe/images/Circle2.png) no-repeat;
}
<div class="img_home">
You could do with setuping parameters with background:
background: url repeat posX posY
.img_home
{
height: 1000px;
background: url(http://www.spidycode.com/testing/revibe/images/Circle1.png) no-repeat,url(http://www.spidycode.com/testing/revibe/images/Circle2.png) no-repeat 200px 0px;
}
<div class="img_home"></div>
been thinking of what would be the best way to achieve a background image with a sharp corners. I tried some css like border-radius and clip-path but no luck. I guess clip-path is the nearest possible answer but can't get it. Please see my sample below.
.main-header {
background: url('http://placehold.it/150x150') no-repeat center center;
background-position: 0% 33%;
background-size: cover;
min-height: 480px;
border-radius: 0 0 45% 45%;
}
<div class="main-header">
<br>
</div>
I'm looking to have below image.
How about this approach?
JSBin
body {
background: white;
margin: 0;
}
.main-header {
background: url('http://www.stevensegallery.com/g/400/200') no-repeat center center;
background-position: center;
background-size: cover;
min-height: 480px;
position: relative;
}
.main-header::after {
content: '';
display: block;
position: absolute;
background: transparent;
/* You can play around with these numbers to adjust the curve */
bottom: -4rem;
left: -25%;
width: 150%;
height: 400px;
border-bottom: solid 4rem white;
border-radius: 0 0 50% 50%;
}
<div class="main-header">
<br>
</div>
You can use below code for it
Add border-bottom-left-radius:60% 30%; border-bottom-right-radius:60% 30%; css. You can play with radius properties to know how it works..
.main-header {
background: url('http://placehold.it/150x150') no-repeat center center;
background-position: 0% 33%;
background-size: cover;
min-height: 480px;
border-bottom-left-radius:60% 30%;
border-bottom-right-radius:60% 30%;
}
<div class="main-header">
<br>
</div>
if you can use image by img, not background. I think you can try "clip-path" as below.
Codepen example
HTML:
<div class="main-header">
<img src="http://placehold.it/150x150">
</div>
CSS:
img {
-webkit-clip-path: circle(100% at 50% 0);
clip-path: circle(100% at 50% 0);
}
and this site is useful to make clip-path (http://bennettfeely.com/clippy/)
I have four categories in my solutions page, Oil&gas, utilities, Inteligent building,
Industrial Engineering.
I have put a hover effect on each category there is a main div
called pic_categry(while hover the background colour change). And I have'
also put an hover effect in child div of pic_categry called pic_catgry_img1. My
problem is when I hovering the parent div(pic_categry) the hover effect of
pic_catgry_img1 is not working its working only hover that div. How can I display both hover effect when hovering parent div (pic_categry).
HTML:
<div id="wrapper4"> <a href="oil_n_gas.php">
<div class="pic_categry">
<div class="pic_catgry_img1"></div>
<div class="pic_catgry_title">Oil N Gas</div>
</div>
</a> <a href="smart_meter.php">
<div class="pic_categry">
<div class="pic_catgry_img3"></div>
<div class="pic_catgry_title">Utilities</div>
</div>
</a> <a href="inteligent.php">
<div class="pic_categry">
<div class="pic_catgry_img2"></div>
<div class="pic_catgry_title">Intelligent Building</div>
</div>
</a> <a href="industrial_engineering.php">
<div class="pic_categry align_tab">
<div class="pic_catgry_img4"></div>
<div class="pic_catgry_title">Industrial Engineering </div>
</div>
</a>
</div>
CSS:
.pic_categry {
width: 233px;
height: 239px;
float: left;
text-align: center;
color: #425B97;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 3px;
margin-right:23px;
}
.pic_categry:hover {
background-color:#e8e8e8;
border-radius:4px;
color:#263a87 !important;
}
.pic_catgry_title {
font-family:'Varela', sans-serif;
font-size:20px;
text-align:center;
padding-bottom: 10px;
}
.pic_catgry_title:hover {
color:#263a87;
text-decoration:none !important;
}
.pic_catgry_img1 {
width: 157px;
height: 128px;
margin: 0px auto;
background-image: url(../images/new/ind_oil.png);
background-repeat: no-repeat;
background-position: left top;
}
.pic_catgry_img1:hover {
background-image: url(../images/new/ind_oil.png);
background-repeat: no-repeat;
background-position: left bottom;
}
.pic_catgry_img2 {
width: 157px;
height: 128px;
margin: 0px auto;
background-image: url(../images/new/ind_smart.png);
background-repeat: no-repeat;
background-position: left top;
}
.pic_catgry_img2:hover {
background-image: url(../images/new/ind_smart.png);
background-repeat: no-repeat;
background-position: left bottom;
}
.pic_catgry_img3 {
width: 157px;
height: 128px;
margin: 0px auto;
background-image:url(../images/new/ind_utlts.png);
background-repeat: no-repeat;
background-position: left top;
}
.pic_catgry_img3:hover {
background-image: url(../images/new/ind_utlts.png);
background-repeat: no-repeat;
background-position: left bottom;
}
.pic_catgry_img4 {
width: 157px;
height: 128px;
margin: 0px auto;
background-image:url(../images/new/ind_heavy.png);
background-repeat: no-repeat;
background-position: left top;
}
.pic_catgry_img4:hover {
background-image: url(../images/new/ind_heavy.png);
background-repeat: no-repeat;
background-position: left bottom;
}
Just change your code like this:
.pic_catgry_img1:hover{
background-image: url(../images/new/ind_oil.png);
background-repeat: no-repeat;
background-position: left bottom;
}
to
.pic_categry:hover .pic_catgry_img1{
background-image: url(../images/new/ind_oil.png);
background-repeat: no-repeat;
background-position: left bottom;
}
so you can apply hover effects changes on child div while mouse enters parent div.
change the background color and use your desired image
.pic_categry > .pic_catgry_img1:hover{background-color:#FF0000;}
try
.pic_categry:hover .pic_catgry_img1{
background-position: left bottom; //only need this
}
from #Atrem Fitiskin 's comment
change only dependent properties (in this case, only
background-position).
I have the following code that allows for a user to hover over an image and it will display a new image (well, a new section of a sprite image). I want it to display a third image on click. 1. Am i doing this the most efficient way? 2. How do I code for an on-click image to show up?
HTML:
CSS:
[class^="signin-"] {
display: inline-block;
vertical-align: text-top;
background-image: url('../images/signin_sprite.jpg');
background-repeat: no-repeat;
*margin-right: .3em;
}
[class^="signin-"]:last-child {
*margin-left: 0;
}
.signin-all{
background-position: 0px 0px;
width: 132px;
height: 37px;
position: absolute;
}
.signin-all:hover{
background-position: 0px -34px;
width: 132px;
height: 34px;
position: absolute;
}
You need JavaScript to solve this.
<a href="javascript:void(0)" onclick="changeImage()">
<img style = "border-radius: 5px;" class="signin-all" src="assets/images/header/blank.png" id="image">
</a>
<script>
function changeImage() {
document.getElementById("image").src="newImageSource";
}
</script>
please help me arrange these 3 buttons horizontally like this photoshopped image:
Please take a look at the code here.
CSS:
a.facebookbt {
background: url(http://i1068.photobucket.com/albums/u445/neobx/bonus5.png) no-repeat 0 0;
width: 132px;
height: 52px;
display: block;
}
a.facebookbt:hover { background-position: 0 -52px; }
a.facebookbt:active { background-position: 0 -104px; }
a.twitterbt {
background: url(http://i1068.photobucket.com/albums/u445/neobx/bonus5.png) no-repeat -132px 0;
width: 132px;
height: 52px;
display: block;
}
a.twitterbt:hover { background-position: -132px -52px; }
a.twitterbt:active { background-position: -132px -104px; }
a.abpbt {
background: url(http://i1068.photobucket.com/albums/u445/neobx/bonus5.png) no-repeat -265px 0;
width: 286px;
height: 50px;
display: block;
}
a.abpbt:hover { background-position: -265px -52px; }
a.abpbt:active { background-position: -265px -104px; }
HTML:
<a class="facebookbt" href="javascript:;"></a>
<a class="twitterbt" href="javascript:;"></a>
<a class="abpbt" href="javascript:;"></a>
a { float:right; margin-left: 5px;}
and change the html markup to this way:
<a class="abpbt" href="javascript:;"></a>
<a class="twitterbt" href="javascript:;"></a>
<a class="facebookbt" href="javascript:;"></a>
This way the layout will be aligned to the right, and in the correct order like in your screenshot.
Demo: http://jsfiddle.net/FzYkJ/12/
How about:
a {
float:left;
}
or
a {
display:inline-block !important;
}
You can add
float:left;
to each button
http://jsfiddle.net/FzYkJ/2/