i have been trying to get my hover sprite to work in the blogger platform, but only the first image will show up.
my css is as follows:
.imagesprite {
display: block;
background-image: url(xxx);
width: 400px;
height: 400px;
overflow: hidden;
background-position: 0 0;
}
.imagesprite:hover {
width: 400px;
height: -400px;
overflow: hidden;
background-position: 0, -400px;
}
nothing happens then my mouse hovers.
Nico is correct. Width and height generally do not change on hover. The only thing you actually need in your :hover statement is the new background-position (which doesn't take a comma). If .imagesprite is a div, you probably don't need display: block or overflow: hidden, either.
.imagesprite {
background-image: url(xxx);
width: 400px;
height: 400px;
background-position: 0 0;
}
.imagesprite:hover {
background-position: 0 -400px;
}
Related
I cannot get get rid of the white spaces along the left, right and top of my background image that i am using to cover above the fold for the header of the webpage.
I am running my tests on Google Chrome. using VS Code as my editor.
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
/*Top part image background blue*/
.image-box {
background-image: url(backgroundtoppart.png);
background-repeat: no-repeat;
height: 100%;
width: 100%;
position: absolute;
background-size: 100% 100%;
z-index: -1;
}
<div class="image-box">Image</div>
background-position: top left; Could be worth a try rather than absolute.
I'm using a CSS Sprite Sheet technology and have a problem with multiple backgrounds.
In this website - https://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_img you can see how to set a background from a sprite sheet but my case is a bit different.
Simple code:
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat, url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
width: auto;
height: 40px;
background-size: 319px 349px, auto;
}
<div id="nav1"></div>
And the problem is I don't want to show these 2 icons. I want to show only the first one:
How could I make it? I've tried height and width properties but I think it's not for multiple backgrounds.
It is not possible to crop each image in a multiple-background setting separately. So if you want to keep the yellow bar, but only show one icon on it, consider using a pseudo-element, or an actual DOM element reserved to displaying single icons. E.g. here with an <i>:
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
background-size: auto;
height: 40px;
width: auto;
}
i.icon1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat;
background-size: 319px 349px;
display: inline-block;
height: 40px;
width: 40px;
}
<div id="nav1"><i class="icon1"></i></div>
If you want to make sure it stays in the background, use z-index. If you want to make sure it doesn't interfere with the content of #nav1, use position: absolute; top: 0; left: 0 as well.
You would have to specify a width.
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat;
width: 40px;
height: 40px;
background-size: 319px 349px, auto;
position: relative;
}
#nav1:after {
content: "";
background: url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
width: 232px;
height: 40px;
position: absolute;
z-index: -1;
}
<div id="nav1"></div>
I am trying to make my background-img round and put it into center. I am trying with code given below:
.jumbotronhh
{
background-image: url('http://simplelize.com/wp content/uploads/2013/03/old-camera-620x350.jpg');
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
height: 300px;
width: 300px; *//If I don't use this line then the background picture stays in center in a rectangular form but after using this I got the bg-img circle but it moves at the left side of the screen..*
}
what to do?! I am totally novice.. pls help..
You could put the image behind everything else to look like an actual background-image, by creating a div class and setting some z-index.
<div class="bg-image">
<img src="mybackground.jpg">
</div>
And CSS:
.bg-image {
position: relative;
min-width: 100%;
min-height: auto;
}
.bg-image img {
position: relative;
width: 100%;
height: auto;
z-index: -100;
border-radius: 30px 30px 30px 30px;
}
Since you really can't use the border-radius in background properties.
I tested your code with another picture and it works fine
Let me know if you mean another thing.
HTML:
<div class="jumbotronhh"></div>
CSS:
.jumbotronhh
{
background-image: url('http://goo.gl/amTgah');
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
height: 300px;
width: 300px;
}
I have a such a situation: http://jsfiddle.net/5axmtw9g/3/
<div class="content inner clearfix1 has-left-sidebar">
<div class="sidebar-left-menu prepended"></div>
<div class="content-middle">
<section id="about-stat" class="clearfix1 about-stat-section">
<h1>Some title</h1>
</section>
</div>
</div>
.inner {
margin: 0 auto;
width: 600px;
}
.content.inner {
position: relative;
}
.content .sidebar-left-menu {
height: 100%;
left: 0;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
float: left;
width: 160px;
}
.sidebar-left-menu {
background: #3b86c4 none repeat scroll 0 0;
color: #fff;
}
.content-middle {
margin: 0 0 10px 170px;
}
#about-stat {
background: rgba(0, 0, 0, 0) url("http://quotesnhumor.com/wp-content/uploads/2014/12/Funny-Minions-Pictures-and-Quotes.jpg") no-repeat fixed 0 0;
height: 590px;
overflow: hidden;
position: relative;
transform-style: preserve-3d;
}
As you can see in the fiddle the fixed background image is positioned to the window not to the wrapper. I would like the image to be positioned at the start of "content-middle" div, as expected. Using any solution with background-size:cover is not working for me, as I shall avoid of image stretching.
Would be really grateful for help as I stacked on this and can't find a working solution.
Thanks in advance!enter code here
Try jquery
posBg();
$(window).resize(function() {
posBg();
})
function posBg(){
var posLeft=$('#about-stat').offset().left;
var posTop=$('#about-stat').offset().top;
$('#about-stat').css("background-position", posLeft+"px "+posTop+"px");
}
Fiddle demo http://jsfiddle.net/5axmtw9g/9/
I think you can achieve what you want by adjusting your background to the following:
#about-stat {
background: rgba(0, 0, 0, 0) url("http://quotesnhumor.com/wp-content/uploads/2014/12/Funny-Minions-Pictures-and-Quotes.jpg") no-repeat center top ;
background-size: 100% auto;
The center-top will position the background to the right place. the size will display it at 100% width without adjusting the aspect-ratio. Now you just have to go for a bigger height div to show it full size (or a different background-image).
Demo
Background image X AXIS is 50% plus half the width of it's sibling container
https://codepen.io/AliKlein/pen/dVrmVO
section {
height: 100vh;
background-image:
url(https://source.unsplash.com/collection/194676/3);
background-size: cover;
background-attachment: fixed;
background-position-y: center;
background-position-x: calc(50% + 12.5vw);
}
I', hoping this makes sense but I have HTML code that I have a child which is an svg animation, I'm wanting to have the section responsive so that the position of the svg stays where its meant to be on the map.
I have selected the coast of Africa as a point that I want to keep the SVG in place when the page is resized, but when it is resized you will see that the red marker moves across the rest of Africa.
You can see the jsFiddle for the Source Code and see the result to the full map.
.about-header__map .angola {
position: inherit;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.about-header__map .angola svg {
top: 49%;
left: 42.5%;
position: absolute;
}
Use the width of the image (1440px) instead of width:100%
.about-header__map {
background: url(http://i.imgur.com/ZqQvEUK.png) no-repeat center center !important;
width: 1440px; /*here */
background-size: cover;
height: 500px;
position: absolute;
z-index: -1;
}
FIDDLE
Use a fixed width in .about-header__map
.about-header__map {
background: url(http://i.imgur.com/ZqQvEUK.png) no-repeat center center !important;
background-size: cover;
height: 500px;
position: absolute;
width: 1500px;
z-index: -1;
}