In my css file i have one rule: two add two background images before and after text element. Before i used two images and all was ok. But now i use sprites: so i need to get area of big image and post it to element (background-position) but i have one trouble: if i set background position: i could not stuck to it position like left center and right center:
background: url(../images/png/elements.png) no-repeat -5px -152px, url(../images/png/elements.png) no-repeat -5px -104px;
how could i float first part to left and second to right of the element?
before was:
background: url(../images/png/mail.png) no-repeat left center, url(../images/png/edit.png) no-repeat right center;
is it real to do?
also: i use it with :hover
I'm afraid that it is not possible to limit the visible area of sprite images unless the size of the element itself is limited.
However, perhaps you could assign the background images to ::before and ::after pseudo-elements which are positioned to the left/right side of the parent box properly (either by float or absolute positioning).
So that you could handle the position of each icon interdependently.
For instance:
.box:before, .box:after {
content: "";
display: inline-block; /* or position these elements by floats, etc. */
width: 48px; /* for instance */
height: 48px; /* for instance */
}
.box:before {
background: url(../images/png/elements.png) no-repeat -5px -152px;
}
.box:after {
background: url(../images/png/elements.png) no-repeat -5px -104px;
}
<div class="box"></div>
The left and right you are using belong to background-position. The pixel definitions are overriding them.
You should separate the images to two different elements.
Don't use Shorthand for this (especially in the position property):
try with something like:
div {
width: 100%;
height: 190px;
border: 1px solid red;
background: url(http://alt-web.com/Images/CSSSprite.jpg), url(http://alt-web.com/Images/CSSSprite.jpg);
background-position: left top, right bottom;
background-repeat: no-repeat;
}
<div></div>
Edit: Example with pixels, zero and %.
div {
width: 100%;
height: 190px;
border: 1px solid red;
background-image: url(http://alt-web.com/Images/CSSSprite.jpg), url(http://alt-web.com/Images/CSSSprite.jpg);
background-position: 0 0, 100% -1215px;
background-repeat: no-repeat;
}
<div></div>
Related
I am trying to position a background image on the right side of the screen so that on medium screens one could see a half of it and on big ones the whole image (the image should not be scaled). The problem is that there seems to be no way to position left side of the background in the center of the div that has an unknown width.
And I can't use an img tag because it will result in a horizontal scrollbar.
EDIT:
It seems that there is no way to position a background the way I wanted, at least with background-position. You can offset a background from either side by writing background-position: top 50px left 100px, but you cannot do the same with position center. I wonder why.
Have you try to set a background size and a background position like so :
background-position: 100% 0;
background-size:50%;
You can test it here: https://jsfiddle.net/dL2u6co7/
Here is a working solution. I added another block with an absolute positioning inside the container.
.container {
margin: 50px;
padding: 10px 10px;
position: relative;
width:400px;
height:270px;
border:2px solid red;
}
.text {
float: left;
height: 200px;
width: 150px;
background-color: green;
}
.bg {
position: absolute;
top: 10px;
left: 50%;
width: 50%;
height: 250px;
background-image: url('http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg');
background-position: 0 0;
background-repeat:no-repeat;
background-size: cover;
}
<div class="container">
<div class="text">
Text block
</div>
<div class="bg">
</div>
</div>
I'm trying to fade a div's content out at the edges using a couple of absolutely positioned overlay divs at either side. However, I need the background of the page to be viewable once the fade is finished, and throughout - effectively masking the content of one div using 2 others with linear 'fade' gradients. See the diagram below for a better explanation...
I have tried the following:
Use -webkit-mask property with a linear gradient. This works in Webkit, but nothing else. Also, the linear gradient is rather choppy and stacatto when used with the mask property. Not ideal.
Use SVG gradient mask (e.g. in the Firefox / MDN demo). Works, but only in Firefox. Not anywhere near as poor a gradient as -webkit-mask / linear-gradient in Chrome though
Using a transparent masking GIF or PNG. However, in the example I used the masking colour shows through (see this SO question).
I'm hoping there might be another way that I've not thought of, or perhaps an alternative layout I could use to achieve the same aim. Any thoughts?
I would think that the transparent PNG would be the best bet, make it absolute with a higher z index and make it inside a container div. This container div would float over the background sliding image? I would use a very small 2 px slice and just repeat it along the y axis, but I might not be seeing your problem correctly.
I tried it with a very small slice of the radiant that I repeated down (y) and the underlying image did scroll through the top transparent images. If I follow what you are trying to do. It worked in chrome, firefox and safari: here is the css
#container {
background-attachment: scroll;
background-image: url(Untitled-1.jpg);
background-repeat: repeat-x;
clear: both;
float: left;
height: 768px;
width: 80000px;
position: relative;
}
#container #info {
float: left;
width: 630px;
margin-right: 20%;
margin-left: 20%;
position: fixed;
margin-top: 100px;
height: 519px;
clear: both;
clip: rect(100px,auto,auto,auto);
}
#container #info #l_side {
background-image: url(left_.png);
background-repeat: repeat-y;
float: left;
height: 519px;
width: 165px;
position: relative;
margin-right: -2px;
}
#container #info #content {
background-color: rgba(0, 0, 255, 0.56);
color: rgba(0, 0, 255, 0.56);
float: left;
height: 519px;
width: 300px;
position: relative;
}
#container #info #r_side {
background-image: url(Right.png);
background-repeat: repeat-y;
float: left;
height: 519px;
width: 165px;
position: relative;
margin-left: -1px;
}
I have following markup
<body>
<div class="holder">
<div class="circle"></div>
</div>
</body>
and i have applied a fixed background to body element and white background applied to class holder
body {
background: url(image.png);
background-attachment: fixed;
}
.holder {
width: 500px;
height: 500px;
background: #fff;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: rgba(0, 0, 0, 0);
}
what i have tried to do is to make the circle transparent to see the body background. Simply, what i am trying is, making the circle transparent to see the body background image while the white background around the circle still exist. please excuse my English. Guys please help me.
What you are asking to do will not work using transparency.
However, there is a work around that is quite acceptable:
body {
background: url(http://placekitten.com/g/400/500);
background-attachment: fixed;
}
.holder {
width: 500px;
height: 700px;
background: rgba(255,255,255,0.8);
border: 1px dotted blue;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: url(http://placekitten.com/g/400/500);
background-attachment: fixed;
}
see demo at: http://jsfiddle.net/audetwebdesign/FqMXz/
Just apply the same background image to the .circle div.
This trick is taken from one of the CSS books by Eric Meyer.
The 4th number in rgba() is the alpha transparency. You've set it to 0, which is completely transparent. 1 would be completely opaque. You need to set that to some value between 0 and 1.
That said, if you are trying to create the effect of a hole, then what you need to do is create a background image that is white and has a transparent circle cut in it and make that the background to .holder. It doesn't matter how transparent you make .circle if .holder is completely opaque!
may be you should try it by adding opacity: value attribute or by setting its background-color: rgba(0,0,0,value)
Value must be between 0 to 1.
I'm about to just make 5 divs with 1 in the center all inside of a parent. Parent is transparent and your circle would be too. Surrounded on all 4 sides with ::before & ::after elements that aren't transparent to tighten up the seams... hope that helps.
I have designed a webpage in PSD and I am in the middle of converting it. Within my main content I have a solid background colour but I have a glow effect on a separate layer which appears on top of the background colour.
I have a container that contains all the code, I have a header, main and footer. Within the main, I have added the solid background colour and also added the background image of the glow which I sliced from PSD. However, the solid background colour doesnt appear to show and it just shows the glow effect. Images below show what it looks like and what it should look like:
CSS:
Html {
background: white;
}
#container {
width: 955px;
height: 900px;
margin: 0px auto 0px auto;
}
#main{
background: url(../images/slogan.png) top left no-repeat;
background-color: #282d37;
height: 900px;
width: 955px;
}
You can use multi-background:
#main {
width: 900px;
height: 955px;
background: url(../images/slogan.png) no-repeat, #282d37;
}
To explain: use background css option, first add image, than background color.
LIVE DEMO
The problem is your styles are overriding each other. You need to put the background-color first, and use background-image instead of background. Declare all the values in their own properties so the background property doesn't override the background-color one.
#main{
background-color: #282d37;
background-image: url(../images/slogan.png);
background-position: left top;
background-repeat: no-repeat;
height: 900px;
width: 955px;
}
Try replacing
background: url(../images/slogan.png) top left no-repeat;
background-color: #282d37;
With
background: #282d37 url(../images/slogan.png) no-repeat top left;
A way to do this is wrapping the #main element with a wrapper where you set the background color, then set the opacity matching it (if needed)
#mainwrapper{
background-color: red;
height:100px;
width:100px;
}
#main{
background: url(http://www.w3schools.com/css/klematis.jpg) repeat;
opacity: 0.6;
filter:alpha(opacity=60);
height:100px;
width:100px;
}
<div id="mainwrapper">
<div id="main">
</div>
</div>
I have a large png file that I am using as background image file for my various elements using css. I can use that image when I know the width and height of the element, like
<div id="play-btn"></div>
.play-btn{
background: url(../images/bigImage.png) no-repeat 203px 415px;
width: 100px;
height: 50px;
}
how to use that bigImage as background when I dont want to provide width/height of the elemtn, like
<div id="star-icon">star on left</div>
.star-icon{
background: /*How I will use bigImage here on where star is at location 50,50*/,
padding: 5px 0 5px 60px;
}
You have to use negative left and top, it moves the bgImage in that direction so it displays starting at 50px.
background: url(../images/bigImage.png) no-repeat -50px -50px;