IE don't seem to know what bottom means... I'm trying to position background svg in the bottom center of the div.
screen shot comparing IE and Chrome
http://codepen.io/g_am1/pen/KdrvbZ
<div id="pixels">
<p><code>background-position: </code></p>
</div>
<div id="percentages">
<p><code>background-position: </code></p>
</div>
<div id="keywords">
<p><code>background-position: </code></p>
</div>
and
div {
width: 800px;
height: 200px;
border: 5px solid #E18728;
margin-bottom: .5em;
background: url(http://ridebike.ws/images/other/bikesenerey.svg);
background-repeat: no-repeat;
}
#pixels { background-position: 350px 0; }
#percentages { background-position: 50% 100%; }
#keywords { background-position: bottom center; }
/* styling for Pen, unrelated to background-position */
p {
margin-top: 50px;
padding: 0 1em;
}
I ended up using preserveAspectRatio="xMinYMax meet"
Related
I want to get the result below but without using the at syntax because it's not supported in Safari, I'm having a hard time with it. Does any one know any approach? Thank you in advance!
#content {
background-color: black;
height: 300px;
width: 500px;
}
#inverted-circle {
background: radial-gradient(110% 200% at 50% 0, white 49.9%, rgba(255,255,255,0) 50.05%);
position: relative;
content: '';
height: 220px;
width: 100%;
}
<div id="content">
<div id="inverted-circle"></div>
</div>
It's still not working on Safari on iOS
Consider background-size/background-position. You make the background twice bigger in height, you divide the vertical radius by 2 and you place your background at the bottom.
#content {
background-color: black;
height: 300px;
width: 500px;
}
#inverted-circle {
background:
radial-gradient(110% 100%, white 49.9%, transparent 50.05%)
bottom/
100% 200%;
height: 220px;
width: 100%;
}
<div id="content">
<div id="inverted-circle"></div>
</div>
Related to get more details: How to animate a radial-gradient using CSS?
You can also optimize your code with only one element:
#content {
height: 300px;
width: 500px;
background:
radial-gradient(55% 36.5%, white 99.5%, black 100%)
bottom /
100% 200%;
}
<div id="content">
</div>
I have a div with a background image that I want to expand 100% width and auto scale the div to fit the required height of the image. At the moment it is not scaling the div height unless I set the height of the div to 100% but then it just stretches to the full height of the screen, whereas I want it to scale to the height of the image.
Here is the html:
<div id="mainHeaderWrapper">
</div><!--end mainHeaderWrapper-->
<br class="clear" />;
Here is the css:
#mainHeaderWrapper{
background: url(http://localhost/site/gallery/bg1.jpg);
width: 100%;
height: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
}
.clear { clear: both; }
Thanks for any and all help
Let a transparent image dictate the DIV dimensions.
Inside that div put the same image with CSS opacity: 0
<div id="mainHeaderWrapper">
<img src="path/to/image.jpg"><!-- I'm invisible! -->
</div>
set that image to
#mainHeaderWrapper {
background: no-repeat url(path/to/image.jpg) 50% / 100%;
}
#mainHeaderWrapper img {
vertical-align: top;
width: 100%; /* max width */
opacity: 0; /* make it transparent */
}
That way the height of the DIV will be dictated by the containing invisible image, and having the background-image set to center, full (50% / 100%) it will match that image's proportions.
Need some content inside that DIV?
Due to the containing image, you'll need an extra child element that will be set to position: absolute acting as an overlay element
<div id="mainHeaderWrapper">
<img src="path/to/image.jpg"><!-- I'm invisible! -->
<div>Some content...</div>
</div>
#mainHeaderWrapper{
position: relative;
background: no-repeat url(path/to/image.jpg) 50% / 100%;
}
#mainHeaderWrapper > img{
vertical-align: top;
width: 100%; /* max width */
opacity: 0; /* make it transparent */
}
#mainHeaderWrapper > div{
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
If you know the proportions of the image, use percentage padding to define the height of the container. Set height:0 and set vertical padding to a percentage of the width.
They key to this method is that percentage-based vertical padding is always related to width.
According to the box model (w3.org):
The percentage is calculated with respect to the width of the
generated box's containing block, even for 'padding-top' and
'padding-bottom'.
Below, the image is 400px X 200px, so the proportion of height to width is 1:2 and padding-top is set to 50%;
#mainHeaderWrapper {
width: 100%;
height: 0;
padding-top: 50%;
background-image: url('https://dummyimage.com/400x200/');
background-size: 100% auto;
background-repeat: no-repeat;
}
<div id="mainHeaderWrapper"></div>
stuff below the image
In another example, the image is 300px X 100px. The height is ⅓ of the width, so the padding-top is set to 33.33%:
#mainHeaderWrapper {
width: 100%;
height: 0;
padding-top:33.33%;
background-image: url('https://dummyimage.com/300x100/');
background-size: 100% auto;
background-repeat: no-repeat;
}
<div id="mainHeaderWrapper"></div>
stuff below the image
Edit:
As prompted by Paulie_D, other content in the div must be positioned absolutely, demonstrated below. I suggest positioning these elements using percentages, as well.
#mainHeaderWrapper {
width: 100%;
height: 0;
padding-top: 33.33%;
background-image: url('https://dummyimage.com/300x100/');
background-size: 100% auto;
background-repeat: no-repeat;
}
div#inner_content {
position: absolute;
top: 0;
width: 100%;
margin-top: 10%;
color: #FFF;
text-align: center;
font-size: 20px;
}
<div id="mainHeaderWrapper">
<div id="inner_content">Hello World</div>
</div>
stuff below the image
This can be done without using a dummy image. I will use dimensions of an image I just worked with for example.
The dimensions of my image are 2880x1410. Simplify the dimensions -> 96/47 (I used this simple ratio calculator http://andrew.hedges.name/experiments/aspect_ratio/). Once you have the simplified ratio, plug the height and width to the equation:
height: calc((100vw * W) / H);
So mine would read: height: calc((100vw * 47) / 96);
No need to worry about the contents of the div either (unless they dont fit)
body{ margin: 0; padding: 0}
#box1{
background: url(http://lorempixel.com/400/200/food/);
background-size: cover;
background-attachment: fixed;
margin: 0;
width: 100%;
height: 100vh;
display: table;
}
h1{ color: #ffffff; font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; font-size: 38px; text-align: center; font-weight: normal; background: rgba(0,0,0,0.3); display: table-cell; vertical-align: middle}
<div id="box1">
<h1>Code Bluster BILU </h1>
</div>
This question already has answers here:
Set size on background image with CSS?
(18 answers)
Closed 6 years ago.
I've tried to look at other answers but no help. My background is dynamic so the size of images will change, so I need to keep aspect ratio so the whole image is seen. here's my CSS:
.image_submit_div {
border: 1px solid #ccc;
display: inline-block;
padding: 20px 50px;
width: 55%;
height: 320px;
cursor: pointer;
background: url('something.jpg'); /* this changes */
margin: 0 0 25px;
}
html
<label for="id_image" class="image_submit_div">
At the moment depending on the image, sometimes alot of it is cut off. I want the image to be downsized so it can be seen fully. Any idea?
Use background-size: cover; to cover the entire element, while maintaining the aspect ratio:
.background-1,
.background-2,
.background-3 {
/* Set the background image, size, and position. */
background-image: url('//via.placeholder.com/350x150');
background-size: cover;
background-position: center;
/* Or, use the background shortcut. */
background: url('//via.placeholder.com/350x150') center/cover;
margin: 20px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.background-1 {
width: 300px;
height: 200px;
}
.background-2 {
width: 200px;
height: 50px;
}
.background-3 {
width: 100px;
height: 200px;
}
<div class="background-1"></div>
<div class="background-2"></div>
<div class="background-3"></div>
If you want to display the entire image, while maintaining the aspect ratio, use background-size: contain; instead:
.background-1,
.background-2,
.background-3 {
/* Set the background image, size, position, repeat, and color. */
background-image: url('//via.placeholder.com/350x150');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-color: #fbfbfb;
/* Or, use the background shortcut. */
background: #fbfbfb url('//via.placeholder.com/350x150') no-repeat center/contain;
margin: 20px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.background-1 {
width: 300px;
height: 200px;
}
.background-2 {
width: 200px;
height: 50px;
}
.background-3 {
width: 100px;
height: 200px;
}
<div class="background-1"></div>
<div class="background-2"></div>
<div class="background-3"></div>
Use background-size:contain; if you want to see the whole image and stretch it to the full width or height (depends on the aspect ratio of the image) of the div.
But if you want to cover the whole div with the background-image and don't mind the image getting cropped then use background-size:cover; instead.
.image_submit_div {
border: 1px solid #ccc;
display: inline-block;
padding: 20px 50px;
width: 55%;
height: 320px;
cursor: pointer;
background: url('http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg'); /* this changes */
margin: 0 0 25px;
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}
<label for="id_image" class="image_submit_div">
UPDATE
Here is a jsFiddle with the image and hover event.
I have a sprite image containing 4 "button" images each 30px x 60px - so the total image size is 60px x 120px. Each button is displayed using its proper background offset in the css as shown below.
I want to increase the clickable area of each button, but if I increase padding for the image, more of the image will show than contained in the defined width and height. Can I increase padding or use some other method where the image is still constrained to the amount in height and width?
I do have a containing a tag. I am able to increase the clicking area of the buttons by padding the a tag, but I still need to give feedback via the img hover that the mouse is in the clickable area.
img.prev{
background:url(../img/buttons.gif) no-repeat 0px 0px scroll;
width: 30px;
height: 60px;
}
img.prev:hover{
background-position: 0px -60px;
}
img.next{
background:url(../img/buttons.gif) no-repeat -30px 0px scroll;
width: 30px;
height: 60px;
}
img.next:hover{
background-position: -30px -60px;
}
OK - I think I've got an answer. It seems I can increase the padding of the containing a tag to increase the clicking area and then use the hover event of the a tag to set the background for the img. The following css is for the containing a tags.
Please let me know if there is a better or another solution.
#a-next{
padding-left: 30px;
padding-bottom: 200px;
}
#a-prev{
padding-right: 30px;
padding-bottom: 200px;
}
#a-next:hover > img{
background-position: -30px -60px;
}
#a-prev:hover > img{
background-position: 0px -60px;
}
the pseudo will do . https://jsfiddle.net/mgggf5vo/6/
catch hover from the link, so it includes the pseudo area.
Te correct attribute for links is title, not alt.
a {
display: inline-block;
position: relative;
vertical-align: middle;
cursor:pointer;/* href is missing */
}
a:before {/* give it any size */
content: '';
position: absolute;
height: 60px;
width: 50px;
margin-left: 29px;
}
a[title="next"]:before {
right: 29px;
}
img.prev {
background: url(http://www.waldorfteacherresources.com/img/slideshow-buttons-large.gif) no-repeat 0px 0px scroll;
width: 30px;
height: 60px;
padding: 0;
}
a:hover img.prev {
background-position: 0px -60px;
}
img.next {
background: url(http://www.waldorfteacherresources.com/img/slideshow-buttons-large.gif) no-repeat -30px 0px scroll;
width: 30px;
height: 60px;
padding: 0;
}
a:hover img.next {
background-position: -30px -60px;
}
<div>
<a title="prev">
<img src="http://www.waldorfteacherresources.com/img/blank.gif" alt="prev" class="prev">
</a>
Something Here
<a title="next">
<img src="http://www.waldorfteacherresources.com/img/blank.gif" alt="next" class="next">
</a>
</div>
I used to have an image that was placed as a background:
#myIco{
background:url(/i/myIco.gif) no-repeat center top;
}
So, when I placed that id into a table cell it'll place the icon in the middle of the cell.
I decided to combine all my icons into a single sprites image.
.sprites{
background-image:url(/i/mySprites.png);
background-color: transparent;
background-repeat:no-repeat;
border:0;
}
The value for the new icon is:
#axXh {
background-position: -33px -83px;
width: 33px;
height: 11px;
}
But now my icon is no longer in the center of the table cell. How do I fix it?
That's tricky. You'll have to encapsulate the icon within its own <span> or <div> and then horizontally position that in the center. I'm a big fan of sprites and stoked that you've decided to use them.
<style>
div { text-align: center; } /* or consider margin: 0 auto; */
.sprites {
background-image: url('/i/mySprites.png');
background-color: transparent;
background-repeat: no-repeat;
border:0;
}
.icon {
background-position: -33px -83px;
width: 33px;
height: 11px;
}
</style>
<div>
<span class="sprites icon"></span>
</div>