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;
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 want to have a div, and inside this div must be a field with some color. So i want to have div for example 200px x 200px and set background-color:gray which size ll be 100px x 100px, and start at position 50px 50px.
Please look at this snippet with code:
div{
background-color: gray;
background-size: 100px 100px;
background-position: 50px 50px;
min-width:200px!important;
min-height:200px!important;
max-width:200px!important;
max-height:200px!important;
padding:50px;
}
<div>some text</div>
So as You see the background color filled all div width and height.
Is this possible to make background to fill only 50%?
Note: The red area should be transparent.
We can achieve this effect with a linear gradient, background-size and background-position
The background looks like this:
background: linear-gradient(to bottom, grey 0%, grey 100%) no-repeat;
All this linear-gradient does is give us a background colour that can be manipulated like a background image.
The gradient is treated like an image and can be centered and re-sized:
background-size: calc(100% - 100px) calc(100% - 100px);
background-position: center;
The calc reduces the size of the background by exactly 100px and the transparent space around the div when centered is 50px in width.
Full example
The second div shows the true size of the div and the 20vw width and height shows how the div can be re-sized.
div {
background: linear-gradient(to bottom, grey 0, grey 100%) no-repeat;
background-size: calc(100% - 100px) calc(100% - 100px); /* Reduce height of background by 100px and width by 100px*/
background-position: center;
padding: 80px; /* 50px border + 30px additional padding */
width: 20vw;
height: 20vw;
min-width: 200px;
min-height: 200px;
}
div.no-gradient {
background: grey;
}
/*For example*/
html,
body {
height: 100%;
margin: 0;
}
body {
background: linear-gradient(to bottom, black 0%, white 100%);
}
div {
float: left;
}
<div>some text</div>
<div class="no-gradient">I am the same size as the other div</div>
Other answers have provided good workarounds. Here is the cold hard truth:
You can’t set a background color for half an element’s content area
A background color applies to an elements content area. You can’t apply a background color to half of an element’s content area.
Mozilla explains this:
The content area is the area containing the real content of the element. It often has a background, a color or an image (in that order, an opaque image hiding the background color) and is located inside the content edge; its dimensions are the content width, or content-box width, and the content height, or content-box height.
The content area of an element has exactly one background color. The color may be transparent, and may be inherited rather than defined, or entirely covered - but still, there is always one, and there can be only one.
Inspected elements in a browser developer's tools will help you get familiar with this.
There are many workarounds for the effect you are asking to create, including nested elements, pseudo elements, and thick borders.
Here you go..
div.container {
width:200px;
background:transparent;
border: 1px solid #a7a7a7;
padding:50px 0;
}
div.inner-container{
background-color:gray;
width: 100px;
padding:25px 0;
margin:auto;
}
<div class="container">
<div class="inner-container">
---some text---
</div>
</div>
You can simply achieve that with a border that has the desired thickness:
http://codepen.io/anon/pen/XjpbNJ
<div class="x">text</<div>
.x {
width: 200px;
height: 200px;
background: grey;
border: 100px solid red;
text-align: center;
}
Both background-size and background-position can only be used for images, so you can't use them with just colors.
I would wrap that div in another and do this:
div.wrapper {
height:200px;
width:200px;
padding:50px;
background:red;
}
div.inner{
background-color: gray;
width: 100px;
height: 100px;
}
JSFiddle
If that's not an option you could also use an image instead, and position that.
Use a psuedoelement to simulate the coloring in the desired quadrant.
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>
I have an unordered list containing 3 list items. Each list item has an image, and 3 divs containing text. I want the edges of the image to be feathered, by using only CSS.
My site found here currenly has a feathered effect by using the following html for the image. However it seems to make the whole image feathered, instead I only need the very EDGES to be strong feathered, and then become less feathered as it spans approx. 50px towards the center on all sides of the image.
HTML:
<p class="vignette"><img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg" alt="" /></p>
CSS:
p.vignette {
position: relative;
}
p.vignette img {
display: block;
width:80%;
margin-left:auto;
margin-right:auto;
margin-top:6%;
}
p.vignette:after {
-moz-box-shadow: inset 0 0 180px #defeec;
-webkit-box-shadow: inset 0 0 180px #defeec;
box-shadow: inset 0 0 180px #defeec;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
content: "";
}
You can see I'm using an inset box shadow of 180px but this makes the whole image feathered slightly, and if I use say 50px it is barely noticeable at all! How do I make just the edges strongly and then fading into weaker towards the center?
Thank you!
You need to change some stuff around to get this to work. First, take inline-block off the <a class='divLink'> tag. Then try the following:
.vignette {
width: 80%;
margin: 1em auto;
box-shadow: 50px 50px 113px #defeec inset,-50px -50px 110px #defeec inset;
height: 150px;
background-size: contain;
background-repeat: no-repeat;
}
Then use the following html (and scrap the <img> tag)
<p class="vignette" style="background-image: url(http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg);"></p>
Of course, you could also put the background-image rule inside the css block, but sometimes declaring a background image inline makes a lot more sense, especially if you expect to have a number of photographs or similar.
Create a div that would go inside vignette, and call it fade. It must go above the img though.
.fade {
height: 100%;
width: 100%;
position:absolute;
background: -webkit-linear-gradient(left,
rgba(0,0,0,0.65) 0%,
rgba(0,0,0,0) 20%,
rgba(0,0,0,0) 80%,
rgba(0,0,0,0.65) 100%
);
}
<p class="vignette">
<div class="fade"></div>
<img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg" alt="" />
</p>
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.