#example1 {width: 500px;
height: 250px;
background-image: url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png),
url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png);
background-position: 20px 10px, 100px 250px;
background-repeat: no-repeat;
}
Background-image with fixed background-position don't work Demo
You are having same value for height and last number in background position. Change to this and see.
background-position: 20px 10px, 100px 100px;
Demo
Write it as -
#example1 {
width: 500px;
height: 250px;
background: url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png) no-repeat 20px 10px, url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png) no-repeat 200px 50px;
}
Demo
Your code also works but the problem with your code is that you are setting top position of the second image at 250px; where the height of your container is 250px; That's why it's not visible :)
Related
I'm building a website and the image I want to put in the as background I can't put it into the position I want.
I want the 'focus' of the image on the web page to be a few px up to the centre of the image. The width I can see it all, but the height no.
The image resolution is '5760x3840px'.
So, I have this piece of css code for the image's settings.
.topwidget{
max-width: 100%;
height: auto;
background-image: url(../images/welcome_banner_bg.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: bottom 1000px;
margin-bottom: 20px;
padding: 50px 0;
}
Try this
.topwidget{
max-width: 100%;
height: auto;
background-image: url(../images/welcome_banner_bg.jpg);
background-repeat: no-repeat;
background-size: 100%;
**background-position: center 10px;**
margin-bottom: 20px;
padding: 50px 0;
}
Currently I have markup for a dotted border line since border is pretty crappy when it comes to making actual dotted borders. my markup is the following
.dotted-line {
background-image: radial-gradient(circle closest-side,#3E3E3E calc(100% - .5px),transparent 100%);
background-repeat: repeat-x;
background-size: 6px 2px;
height: 9px;
width:100%;
margin: 20px 0 0 0;
}
<div class="dotted-line"></div>
However the problem I am having is I want to be able to make the same sort of border but vertical instead of horizontal. I have set background-repeat: repeat-x; but then I just get one solid line. Is it possible to do a vertical radial-gradient?
I played around with your horizontal border and got this vertical dotted border. Take a look at background-repeat: repeat-y;, it's now vertical and the background-size has also changed.
I changed the width and height to get a decent amount of space to play in.
.dotted-line {
background-image: radial-gradient(circle closest-side,#3E3E3E calc(100% - .5px),transparent 100%);
background-repeat: repeat-y;
background-size: 2px 6px;
height: 100px;
width: 9px;
margin: 20px 0 0 0;
}
<div class="dotted-line"></div>
Like this ? You forgot to change the dimension. Sorry if that's not what you asked.
.dotted-line {
background-image: radial-gradient(circle closest-side,#3E3E3E calc(100% - .5px),transparent 100%);
background-repeat: repeat-y;
background-size: 2px 6px;
height: 100vh;
width:10px;
margin: 20px 0 0 0;
}
<div class="dotted-line"></div>
This question already has answers here:
Using percentage values with background-position on a linear-gradient
(2 answers)
Closed 3 years ago.
Everywhere I read says this should be working fine, but for some reason it's not.
This was to fix someone else's issue so fixing it doesn't matter to me, I just want to know why. The problem is on .br .bg-image. I know I'm trying to use calc() but using a simple background-position: 50% doesn't work either.
http://jsfiddle.net/uLaa9fnu/2/
html {
height: 100%;
width: 100%;
}
body {
margin: 0px;
height: 100%;
width: 100%;
overflow: hidden;
}
.bg-image {
height: 600px;
width: 800px;
background-image: url('http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-267a.jpg');
background-size: 100%;
background-repeat: no-repeat;
}
.relative {
position: relative;
}
.containeroverlay {
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
width: 100%;
}
.framesizer {
height: 340px;
width: 300px;
overflow: hidden;
position: absolute;
}
.frame {
background-image: url('http://i.imgur.com/4AcIXsD.png');
background-repeat: no-repeat;
background-size: 100%;
height: 340px;
width: 300px;
}
.tl {
top: 30px;
left: 30px;
}
.tl .bg-image {
background-position: right 30px bottom 30px;
}
.br {
top: calc(100% - 340px - 30px);
/* Height of frame, plus 30px spacing */
left: calc(100% - 300px - 30px);
/* Width of frame, plus 30px spacing */
}
.br .bg-image {
background-position: right calc(800px - 300px - 30px) bottom calc(600px - 340px - 30px);
/* Background Position doesn't like percentages for some reason */
}
<div class="bg-image">
<div class="containeroverlay relative">
<div class="framesizer tl">
<div class="bg-image">
<div class="frame"></div>
</div>
</div>
<div class="framesizer br">
<div class="bg-image">
<div class="frame"></div>
</div>
</div>
</div>
</div>
Solving the problem
After some fiddling I've found what is causing the issue. background-position stops working when the background is as big (or bigger) as the frame it contains.
This is also why dognose's solution works. It removes the background-size.
As proof, I've changed the CSS of the .br-frame and .br .bg-image to the following:
.br {
top:calc(100% - 340px - 30px);
left:calc(100% - 300px - 30px);
}
.br .bg-image {
background-position: calc(100% + 30px) calc(100% + 30px);
/* 100% puts it bottom right, + 30px offset from .br */
background-position: right -30px bottom -30px;
/* or simply use this */
height: 100%;
width: 100%;
background-size: 800px 600px;
}
This way the background-size doesn't equal the frame anymore, causing the background-position to work as it is supposed to.
See the fiddle
The why
The reason it doesn't work with percentages, is because the background-position depends on the background-size, literally. Because background-position: 0% 0%; is top left, and background-position: 100% 100%; is bottom right. If the background image is as big as it's containing frame, there is no more difference between 0% and 100%.
Using this theory in combination with calc(), all it does is:
calc(100% - 340px - 30px) place it to the right (100%), which doesn't move it at all, then move it a total of 370px (-340px - 30px) to the left.
In your case it goes to the right, because you prefixed right before your calc().
background-position
Initial value 0% 0%
refer to the size of the background positioning area minus size of
background image; size refers to the width for horizontal offsets and
to the height for vertical offsets
So any differences on the size of the background image and the size of the element
are welcome and that what makes background positioning work with percentages. Otherwise they don't.
Example:
Consider an image with a size of 500X500 px;
Using a background-position: 50% 50%;
If your div has a width of 600px;
your background image will be shifted to the right by
50% * (600px - 500px) that is 50px
Similarly, if the div has a height of 700px your background image will be shifted down by
50% * (700px - 500px) that is 100px
div{
background-image: url(https://i.imgur.com/gcnJ2Qi.png);
background-repeat: no-repeat;
background-position: 50% 50%;
border: solid grey;
width: 600px;
height:700px;
}
<div></div>
In case the div is narrower than the image
Now you're div element is 300X400 px,and you want to position your background image the same as before (50px right and 100px down)
You will need to specify a negative background-position: -25% -100%;
Because -25% * (300-500) = 50px and -100% (400-500) = 100px
div{
background-image: url(https://i.imgur.com/gcnJ2Qi.png);
background-repeat: no-repeat;
background-position: -25% -100%;
border: solid grey;
width: 300px;
height:400px;
}
<div></div>
In the case where both div and image have the same size:
Any percentage you specify at background-position would be multiplied by zero.
And the image will be always aligned with the top left corner of the div. To fix that make the image smaller or bigger by resetting background-size:80% or 120%;
div{
background-image: url(https://i.imgur.com/gcnJ2Qi.png);
background-repeat: no-repeat;
background-position: 50% 100%;
border: solid grey;
width: 500px;
height:500px;
background-size:80%;
}
<div></div>
The docs
GEspinha is somewhat right. This example works as you might expect:
.br .bg-image {
background: url('http://media1.santabanta.com/full') 50% 50%;
}
while having this - it wont work.
.br .bg-image {
background-position:50% 50%;
}
http://jsfiddle.net/gtj5p0px/ (if this is your expeted output for the bottom right frame)
I'm looking for a way to create bent top and bottom borders like the div in this image. I've tried some ways mentioned here but it depends on using white divs with border-radius on top of the main div but as you can see in this image it should be transparent to display the background image.
This is possible using svg.
For responsiveness remove the svg's width and height attributes, add viewBox="0 0 400 150" then try changing #image's width and height, the svg will respond to its width and height.
Demo on Fiddle demonstrating responsive shape.
Browser support for this approach - This will work on all browsers but IE8.
body {
background: teal;
}
#image {
width: 600px;
height: 300px;
position: relative;
background: url(http://lorempixel.com/600/300);
}
svg {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="image">
<svg width="400" height="150">
<path opacity="0.6" fill="red" d="M0,10 Q0,0 10,0 Q195,40 390,0 Q400,0 400,10 Q390,75 400,140 Q400,150 390,150 Q195,100 10,150 Q0,150 0,140 Q10,75 0,10" />
</svg>
</div>
Another posibility, not using clipping but multiple backgrounds.
Technically less advanced than chipChocolate answer, just providing an alternative
.test {
position: absolute;
left: 50px;
top: 50px;
width: 400px;
height: 100px;
border-radius: 10px;
background-image: radial-gradient(circle at center -778px,
transparent 800px, rgba(255,0,0,0.4) 800px),
radial-gradient(circle at center 828px,
transparent 800px, rgba(255,0,0,0.4) 800px);
background-position: center top, center bottom;
background-size: 100% 50%, 100% 50%;
background-repeat: no-repeat;
}
Thw idea is to divide the element in 2 halves, and then set in each a radial gradient that matches the corners position. The final posiotion of the gradients adjusted by hand.
Can de done responsively also.
demo
body {
width: 100%;
height: 100%;
background: url(http://placekitten.com/g/600/300);
}
.test {
position: absolute;
left: 50px;
top: 50px;
width: 400px;
height: 100px;
border-radius: 10px;
background-image: radial-gradient(circle at center -778px,
transparent 800px, rgba(255,0,0,0.4) 801px),
radial-gradient(circle at center 828px,
transparent 800px, rgba(255,0,0,0.4) 801px);
background-position: center top, center bottom;
background-size: 100% 50%, 100% 50%;
background-repeat: no-repeat;
}
<div class="test"></div>
An other approach with one div, 2 pseudo elements , border-radius and box-shadows :
div {
width: 70%; height: 150px;
margin: 20px auto;
position: relative;
border-radius: 10px;
overflow: hidden;
opacity: 0.5;
}
div:before,div:after {
content: '';
position: absolute;
height: 100%; width: 300%;
left: -100%;
border-radius: 100%;
box-shadow: 0px 0px 0px 140px red;
}
div:before {top: -146px;}
div:after {bottom: -146px;}
body {background: url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');background-size: cover;}
<div></div>
Actually doing this using the CSS would almost be impossible, and you would be good if you just try out a simple PNG image, created using Photoshop, Google Images etc, and create the image exactly of this size and then use it inside the website.
You can add the transparency to the image while creating it by using the Adobe UI tools for editing the image, or you can use the alpha filter in CSS to set the transparency effect to it to display the element that is residing behind it (the effect that you want).
I have a container DIV that centres itself with a width of 90%. It has a min-width of 940px and a max-width of 1240px.
Within this DIV I have a left side bar that is fixed and has a height of 100%. I want the colour from this DIV to continue to the left edge of the screen.
I can't add another DIV in because the margin is auto, and the min and max-height make the margin completely dynamic.
I have tried using a thick border on the container DIV but it acts as a margin in the sense that it doesn't go beyond the screen, it just moves the container DIV.
The current sidebar is where the content will be. This needs to stay where it is so everything appears centred on the page.
CSS Code:
#contain-content {
width: 90%;
height: auto;
min-width: 940px;
max-width: 1240px;
margin-left: auto;
margin-right: auto;
}
#contain-content #left-panel {
position: fixed;
width: 330px;
top: 0px;
background-color: #183950;
padding-top: 115px;
height: 100%;
}
http://jsfiddle.net/YwN8v
Maximise your browser window. The section I am referring to is the space to the left of the side bar.
What about gradient background of the body filling its left 5% with the needed color?
http://jsfiddle.net/YwN8v/2/
body {
background: linear-gradient(to right, #183950 0%, #183950 6%, transparent 6%);
}
Update
Here's a good tool to make gradients: http://www.colorzilla.com/gradient-editor/, but it's better to copy-paste only the needed values from its output:
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE4Mzk1MCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYlIiBzdG9wLWNvbG9yPSIjMjY0NTVhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNyUiIHN0b3AtY29sb3I9IiMyODQ3NWMiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(left, rgba(24,57,80,1) 0%, rgba(38,69,90,1) 6%, rgba(40,71,92,0) 7%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(24,57,80,1)), color-stop(6%,rgba(38,69,90,1)), color-stop(7%,rgba(40,71,92,0)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(24,57,80,1) 0%,rgba(38,69,90,1) 6%,rgba(40,71,92,0) 7%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left, rgba(24,57,80,1) 0%,rgba(38,69,90,1) 6%,rgba(40,71,92,0) 7%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right, rgba(24,57,80,1) 0%,rgba(38,69,90,1) 6%,rgba(40,71,92,0) 7%,rgba(255,255,255,0) 100%);
Simply! Just add left: 0 to your #left-panel-sidebar:
#contain-content #left-panel {
position: fixed;
width: 330px;
top: 0px;
left: 0;
background-color: #183950;
padding-left: 3%;
padding-top: 115px;
height: 100%;
}
http://fiddle.jshell.net/YwN8v/3/