I'm trying to center an image inside a div, it gets close, but still is not really centered. The image is 976x976 px. The following is the CSS:
div {
margin-left: auto ;
margin-right: auto ;
border:1px solid #ccc;
max-width:976px;
height:976px;
min-width: 433px;
padding:0;
background: url("images/background.png") center center no-repeat;
}
The image must to be centered, but its exorbitant at the top and right, that is:
Looking at your provided URL I saw that positioning the background-image is indeed positioned more towards the top due to the fact the bgimage is larger than the div itself. Therefore you need to play with the percentages.
background: url("images/background.png") no-repeat 50% 18.5%;
Could solve your problem and place the image in the center of you div
Seems to be working fine??
Ive changed the order of your shorthand css and used 50% instead of center.
div {
position: absolute;
width: 100%;
height: 100%;
}
div {
margin-left: auto ;
margin-right: auto ;
border:11px solid red;
max-width:976px;
height:976px;
min-width: 433px;
padding:0;
background: url("http://lorempixel.com/output/fashion-q-c-976-976-4.jpg") no-repeat 50% 50%;
}
<div></div>
Your image on your link is a rectangular image with the circle at the top so isn't square.
Crop that image for your code to work!
Related
I have a container with a background image. This container is a variable height, depending on the content inside it. As the container gets smaller, I would like to progressively cut off the bottom of the background image, while still keeping it in the same place.
I have played around with background-size and background-position but I haven’t been able to achieve this. Any advice?
Basically I would like to do this: http://jsfiddle.net/tdgbu6kv/2/
.one {
height: 500px;
}
.two {
height: 100px;
}
.image {
border: 1px solid red;
background-position: right bottom;
background-size: 50%;
background-repeat: no-repeat;
background-image: url(https://source.unsplash.com/random/800x600)
}
but instead of it cutting off the top of the image, I would like it to cut off the bottom
I have a span with a background where I want the image resized without loosing the radio. I mean not stretching. My image disappear when I use height: auto;
#logo_span{
display: inline;
background-image: url("../gfx/hs_logo.png");
margin: -5px auto auto -100%; /* margin top right bottom left */
background-size: 50% 50%;
background-repeat: no-repeat;
width: 90%;
height: auto;
}
You will need to set the height to an integer or percentage like so:
#logo_span{
display: inline;
background-image: url("../gfx/hs_logo.png");
margin: -5px auto auto -100%; /* margin top right bottom left */
background-size: 50% 50%;
background-repeat: no-repeat;
width: 90%;
height: 250px;
}
Another way would be to place an <img> inside this div but have another div with the same properties but instead of have an img have the background-image. However this is considered messy and can slow down loading speeds as your loading 2 of the same image.
<div class="hiddendiv">
<img src="//file src">
<div class="visiblediv"></div>
</div>
<style>
.hiddendiv img{height:200px; width:500px;}
.visiblediv {height:200px; width:500px; margin-top:-200px; background-image:url(//path to your image);}
</style>
This is just a rough example but this has worked for me in the past, no matter how much im not a fan of this method.
If you want responsive image use <img/> tag instead css background-image. And then in css use width: 90%; height: auto;
I would like to make a transparent arrow over an image. This triangle should be indented in a block and show the background image.
Desired output:
I used skewX() property that #web-tiki had explained here but I want it to display on the top of the border rather than on the bottom of image and have this issue:
A fiddle demo of my code is available here
Can anyone tell me why it's not working in my case?
As stated in the question, your case is a bit different from the example that was provided by web-tiki. In the example that you were referring to, the border with the transparent cut was included as the bottom border for the image whereas you need it as the top border of the plain text area.
The expected output can be achieved with the same skew technique described in that answer. However, it needs to be tweaked a bit to match your case.
First thing is, the skewed pseudo-elements (that produce the border) should be added to the container of plain text area and not the top section which holds the image. This part you have already done correctly.
Next, you need to position the border such that even with the border the height of your text container will be equal to the other two images placed by its side. For this, you need to position the elements that form the border within the plain text container (top: 0%) instead of above it (bottom: 100% in your code).
Then, if the text container has a non-transparent background, you need to clip it such that it is not present behind the elements that is creating the border effect. This can be achieved by adding a padding-top on the text container equal to the height of the border pseudo-elements and then setting background-clip: content-box to it.
Finally, you need to move the entire bottom part up by the same number of pixels as the height of the border in order for the top image to be seen through the transparent cut out area. This can be done by adding a negative margin-top to the bottom container.
Putting it altogether your code should be similar to the below snippet to achieve the effect that you need. (Note: Your fiddle has way too much code and so I have created a simpler sample for the demo).
.section {
height: 200px;
width: 500px;
background: url(http://lorempixel.com/500/200/nature/3);
}
.bottom-container {
margin-top: -15px;
height: 100px;
width: 500px;
}
.text,
.middle-image,
.right-image {
float: left;
height: 100%;
width: calc(100% / 3);
}
.middle-image {
background: url(http://lorempixel.com/200/100/nature/2);
}
.right-image {
background: url(http://lorempixel.com/250/100/nature/1);
}
.text {
position: relative;
box-sizing: border-box;
height: 100%;
padding-top: 15px;
text-align: center;
line-height: 85px;
background: #F7F7F7; /* Just for demo */
background-clip: content-box; /* needed only if your background is not transparent */
overflow: hidden;
}
.text:after,
.text:before {
position: absolute;
content: '';
top: 0px;
height: 15px;
background: rgb(215,182,115);
}
.text:before {
left: 0px;
width: 25%;
transform-origin: left bottom;
transform: skew(45deg);
}
.text:after {
right: 0px;
width: 75%;
transform-origin: right bottom;
transform: skew(-45deg);
}
<!-- prefix free library to avoid browser prefixes in CSS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<section class="section">
</section>
<div class="bottom-container">
<div class="text">Some text</div>
<div class="middle-image"></div>
<div class="right-image"></div>
</div>
Screenshot:
Note: The images that are displayed when the snippet is executed could be different from those in the screenshot because they are random placeholder images
I've got this logo I'm trying to use on a responsive site, but I can't figure out how to have it so it fills the full width of its parent element while maintaining its ratio in height.
When you start resizing the browser window, the logo gets smaller in width but its height doesn't scale properly. Is there a way to maintain this.
Here's my CSS for the logo element:
h1 {
width: 100%;
height: auto;
background: url(http://images.uncyclomedia.co/uncyclopedia/en/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png) no-repeat top left orange;
background-size: contain;
text-indent: -999999px;
text-align: center;
margin-top: 270px;
}
This is the problem I'm having. Look at all that extra space below the
logo.
And here's a CodePen with an example of my issue:
http://codepen.io/realph/pen/LAFsi
Any help with this is appreciated. Thanks in advance!
You could use a padding trick (see CSS-square container) to do what you want with one image
h1 {
background: url(http://images.uncyclomedia.co/uncyclopedia/en/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png) no-repeat top left orange;
background-size: contain;
text-indent: -999999px;
text-align: center;
position:relative;
width:100%;
height: 0;
padding-bottom: 30%;
display:block;
}
Demo
I'm sure this is correct behavior for the implementation I have, but I'm wondering if theres an easy way to do what I want to accomplish.
I have a background image that is a 3px x 3px pattern.
I want this pattern to repeat-x the full width (100%) of the element its set in, however I only want it to repeat-y for half of the width of the element its in (50%).
I have this implementation:
.element {
width: 100%;
background-image: url('/path/to/pattern.png');
background-repeat: repeat;
}
which successefully repeats the pattern throughout the entire element. To attempt to achieve the 50% repeat-y height, which is what I want, i tried:
.element {
width: 100%;
background-image: url('/path/to/pattern.png');
background-repeat: repeat;
background-size: 100% 50%;
}
However, the background-size skews the pattern image to 100%/50% height/width instead of keeping the desired repeat effect.
Is there any way to simply accomplish this?
Thanks
Make a graphic 3px wide and really tall with the different background below. Or, though more code, make a 'unit' of three divs: the base is a div with whatever other color/pattern you want that will be the 50% of the y. Next in that div is the background repeating to a fixed height and that one is positioned relative to the top of the base. The last div is just the content. Not as pretty as a simple CSS declaration, but it works across platforms and most browsers, even IE6.
How does your pattern look like? This may fulfill your requirements. Instead of using a background to display the PNG, you now use an img element, and set the width to 100% and the height to 50%. Or use a div to benefit from background:
<div id="element">
<div id="pattern"/>
<div>I'm at the top!<div>
</div>
The rules:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#element {
position: relative;
min-height: 100%;
}
#element #pattern {
background: url(path/to/pattern.png);
height: 50%;
left: 0px;
position: absolute;
z-index: -1;
top: 0px;
width: 100%;
}
Add another container div
You can create another div inside the container div & set its width to 50% of parent container div. Inside this div, you can fill your pattern.
<div id="container">
<div id="myPattern"></div>
#container{
width:200px;
height:400px;
background-color:black;
}
#myPattern
{
background-color:yellow;
height:50%;
width:100%;
/* fill pattern here */
background-image: url(tt.png);
background-repeat: repeat-x repeat-y;
}
JSFiddle