There is example in JsFiddle .
Small description: Div is 300x300 but might be 500x500 or 100x100 in future (so need flexible solution) with background image (which is size:cover so don't care about size).
Inside this div there is <p> with hight of 50px (but might be 100px or 25px in future) which has text inside (20) and background-color that is a bit transparent (blue).
I want to center it inside this div and sollution should be flexible (so for future changes it won't be take a few hours to fix all images/ideas manually, so it would be cool to use % values.
Has anyone an idea?
One way:
.cover-price{
height: 300px;
width: 300px;
background-repeat: no-repeat;
background-size: cover;
position:relative; /*Make container relative*/
}
.cover-price p{
line-height: 50px;
width: 100%;
height: 50px;
background-color: rgba(43,32,122, .3);
color: pink;
position:absolute; /*make P absolute*/
top: calc(50% - 50px); /*give top as 50% - height of p*/
}
Fiddle
Using calc since you have specified css3 in tags
If not using calc for lack of support below IE9 the you can specify the top value as height of the container/2-height of para i.e here top: 100px;
You should be able to just add display:table-cell; vertical-align:middle; to your cover price class.
Have you tried Span and normal padding??
<p><span class="price">20.0 </span></p>
.cover-price p{
line-height: 50px;
width: 100%;
height: 50px;
/*background-color: rgba(43,32,122, .3);*/
color: pink;
padding-top : 45%;
position: relative;
}
.price{
background-color: rgba(43,32,122, .3);
}
http://jsfiddle.net/BZGhU/13/
.cover-price{
height: 300px;
width: 300px;
background-repeat: no-repeat;
background-size: cover;
display:table-cell; vertical-align:middle;
}
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 have an icon set as background, as shown below:
As you can see there must be padding right after the arrow to have nice space.
How can I solve this issue?
HTML
<span class="arrowIcon">Newsletter Sign up</span>
CSS
.arrowIcon{
background-image:url(../img/arrow.png);
background-position:right center;
background-repeat:no-repeat;
background-color:#5379A5;
padding:10px;
color:#FFFFFF;
float:right;
width:55%;
}
You can position a background image FROM the right by writing this in your css.
background-position: right 10px center;
I consider this to be the cleanest solutions.
You can do it with calc.
#test {
background-color: moccasin;
width: 500px;
height: 100px;
background-image: url('http://www.math.muni.cz/~bulik/gifs/arrow.small.left.gif');
background-position: calc(100% - 10px) center;
background-repeat: no-repeat;
}
<div id="test">
</div>
You can add a right border with the same color as the background :
border-right: 10px solid #5379A5;
A background image does not take padding into account, use background-position for that or split up your <span> into <span>newsletter sign up<img></img></span> .
Here it is :
.arrowIcon {
background-image: url(http://www.clker.com/cliparts/7/6/4/a/1206569902228245216pitr_green_single_arrows_set_1.svg.hi.png);
background-position: 95% center;
/* adjust the 98% as your needs or put px value instead if you know extact div size */
background-repeat: no-repeat;
background-color: #5379A5;
background-size: 1em;
padding: 10px;
color: #FFFFFF;
float: right;
width: 55%;
/* to display correctly in SO */
position: absolute;
top: 25%;
right: 0px;
}
<span class="arrowIcon">Newsletter Sign up</span>
Since, you have given float:right its going to be in right .
I need to have two divs with images equally spaced from the center of the page, one on the left and another one on the right, above central div.
I have tried to make an example in the following picture:
the main page div (flowers) is 1024 pixel, and the two right/left blue divs need to stay in the same position...
I am not that CSS expert ...how can I achieve this behaviour?
my CSS code so far:
.overlay-left{
background-color: transparent !important;
background-image: url("/images/background-left.png");
background-position: center top;
background-repeat: no-repeat;
height: 100vw;
position: absolute;
width: 400px;
//left: calc(-60vw + 50%);
left: calc(-50% + 600px);
margin-left: -150px;
z-index: 100;
}
.overlay-right{
background-color: transparent !important;
background-image: url("/images/background-right.png");
background-position: center top;
background-repeat: no-repeat;
height: 100vw;
position: absolute;
width: 400px;
//left: calc(+130vw - 50%);
left: 1024px;
margin-left: 100px;
z-index: 100;
}
What you need is define a parent for your image (here #parent) and put image, and two other div[s] inside that parent.
You can do this:
#parent{
position:relative;
}
#parent img{
max-width:94%;
display:block;
margin:auto;
}
#parent> div{
width:50px;
height:300px;
background:rgba(125,125,255,0.5);
position:absolute;
top:0;
bottom:0;
margin:auto;
}
#right{
right:0;
}
#left{
left:0;
}
<div id="parent">
<img src="http://www.planwallpaper.com/static/images/744081-background-wallpaper.jpg"/>
<div id="right"></div>
<div id="left"></div>
</div>
I think I managed the problem by using Calc.
I need to calculate half of the width of the page and then subtract or add a fixed number of pixels.
I Wa using Left with Calc with no luck, until I found this:
How to set the 'left' property of my div using css3 calc?
so basically I needed to use webkit-calc, moz-cal instead of simple "calc"
Now this is a snippet of working CSS:
.overlay-left{
background-color: transparent !important;
background-image: url("/images/background-left.png");
background-position: center top;
background-repeat: no-repeat;
height: 100vw;
position: absolute;
width: 400px;
left:-webkit-calc(100%/2 - 842px);
left:-moz-calc(100%/2 - 842px);
left:calc(100%/2 - 842px);
z-index: 100;
}
I am making a test webpage to learn html/css. I would like to make the image mold to the shape of the border. It should not be much of a problem but it seems as though the image in not centered in the border. As I change the image size etc it seems as though the image is more so in the middle of the page and leaves the border etc. I just want it to fit perfectly in the border, and for the photo to be clipped along the borders edges. I am having problems with this.
How can I make it so that the image is directly centers and fills the entire border without the middle of the photo or the majority of the photo being left outside of the border?
#pic {
float:right;
transform: rotate(90deg);
}
#bod {
height:300px;
width:300px;
border: 5px ridge blue;
float:right;
border-radius: 105px 105px 0px 0px;
overflow:hidden;
background-image: url("smile.jpg");
background-size: 800px 800px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div id="bod">
<div id="pic">
<img src="http://lorempixel.com/800/500" />
</div>
</div>
Change the CSS for your #bod selector to the following:
#bod {
border-radius: 105px 105px 0px 0px;
border: 5px ridge blue;
height: 300px;
width: 300px;
float: right;
overflow: hidden;
background-image: url("smile.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Just to be clear, I've removed the background-attachment attribute from the style definition and changed the value of the background-size attribute to cover, which is the important part.
Update
You've previously set the image through your CSS by setting the background-image to url("smile.jpg") in the #bod styling. I'm guessing that line isn't needed anymore since you're now setting the image in your HTML with: <img src="http://lorempixel.com/800/500" /> instead.
That image is now off-center, to fix that change your #pic styling to the following:
#pic {
float: right;
transform: rotate(90deg);
transform-origin: 50% 50%;
height: 100%;
width: 100%;
}
I've added the transform-origin, width and height attributes to the #pic styling.
The center of rotation is middle of div, so you have to make sure that the center is in the right place. You should just do this:
#pic {
width:100%;
height: 100%;
transform: rotate(90deg);
}
#pic img{
width: 100%;
height: 100%;
}
https://jsfiddle.net/ebc5yjzu/3/
I have a square image, and I'd like to put it inside a circle border. How can I make it so that the entire image fits instead of its corners getting cut?
.circle {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 100px;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png');
background-size: contain;
}
Here it is on jsfiddle.
You need to shrink the image slightly to make it fit within the circle. To calculate the exact size, divide the diameter of the circle by sqrt(2). In this case, 200px / sqrt(2) is about 141px.
Thus, add the following properties:
background-size: 141px;
background-repeat: no-repeat;
background-position: 50%;
JSFiddle
Note that the blue block doesn't touch the circle because the image has a transparent border.
UPDATE: As cassiorenan correctly points out, using a percentage allows the image to automatically scale if you change the size of the circle. Since 1 / sqrt(2) = 0.707..., you can use 70.7% instead of 141px:
background-size: 70.7%;
Change the background size to a percentage(So it will still have the same relative size ragardless of you changing the circle's width/height.) and center it. While you're at it, tell it to not repeat.
On your particular case, this code works:
.circle {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 100px;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png');
background-size: 90%;
background-repeat: no-repeat;
background-position:center;
}
Edit: Fixed code formatting.
As I said in my comment you must remove transparent border/space around the image or if you don't wanna do that then use this CSS
.circle {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 100px;
background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png') center;
background-size: 130%;
}
Give the background a size like background-size: 100px; then position it in the center of the div and tell it not to repeat:
background-size: 100px;
background-position:50%;
background-repeat:no-repeat;
The coding should now look like this:
.circle {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 100px;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png') ;
background-size: 100px;
background-position:center center;
background-repeat:no-repeat;
}
JSFiddle Demo