I've made my background image responsive in my :after psuedo but not able to control the height responsiveness so I end up with a big white space at the bottom of my image.
My CSS:
.element:after {
content:'';
background:url('http://i57.tinypic.com/4kdytv.png') no-repeat;
background-size:100%;
height:284px;
display:block;
}
Fiddle: http://jsfiddle.net/w6amht6o/
I've seen a couple other questions like this but none of them discuss making the height responsive. I seen you could try something like "background-width:100% 100%;" but this did not work for me.
Let me know what I am doing wrong!
No such thing as background-width in CSS. You're thinking of background-size, which should do exactly what you're describing.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Related
I have a div that I'd like to use a fixed background on. I'm also using background-size cover in order to get the best fit from the bg image.
The trouble is that the background image scales as if it were to cover the div's parent. Not the div itself. Is there any way to fix this?
.panel-image {
height:100vh;
width:50%;
background-size:cover;
background-attachment:fixed;
background-position:center;
background-image:my-image.jpg;
}
.parent{
height:100vh;
}
Here is an online example. The panel-image div is square, as is the source image, yet the image is still heavily cropped as if panel-image div were much wider:
http://jsbin.com/siweloxebe/edit?html,css,output
It's because you've set the height of the child div the same as the parent.
I've played around with your code here and it seems fine, or I may have misunderstood your question
HTML
<div class="bg">
// some code and text nothing crazy
</div>
css
.bg {
background-image: url("color.jpg");
background-position: top;
margin-top: -75px;
}
I'm getting a white margin on both sides between my background image and the edge of the browser.Just trying to get my background image to stretch to the edge... at this point Ive tried a plethora of combos of ...
background position, just reg position: relative/fixed etc. none seem to work. I also tried max-width and that didnt seem to help. Feel like I'm missing something obvious?
Try to remove padding and margin to your body :
html, body {
margin:0;
padding:0;
}
ahhhhh i had a container-fluid in my bootstrap navbar causing the issue, although I believe the 0 margin/padding would have fixed it. learn from my noob mistake everyone!! :)
I'm using centered imgs to act as backgrounds for some tiles. I'm trying to have these images scale with their parent div's height and if they are wider then their parent's for them to hide the overflow.
Example:
* I've got it working now. Answers are below, I'm updating this code to display all I needed to use to get it to work *
HTML
<div class="container">
<img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>
CSS:
.container {
height:250px;
width:50%;
}
.derp{
object-fit: cover;
height: 100%;
width: 100%;
}
Here's a near-example: http://codepen.io/chriscoyier/pen/myPMGB
The difference would be that I'm using s and not background-image, and that instead of the img filling the div completely it would fit to the height and hide the width overflow.
I'm trying to avoid using background-image since I'm using a lot of these tiles and making CSS rules for every one isn't going to work.
In order to scale it with the div's height, I'd change the height from px to % - this way, the larger's the div, the larger's the picture. In order to certain the image, i'd use margin in the image css. That'd look like so:
.derp{
height:80%;
width:80%;
margin:10%;
}
.container {
height:250px;
width:50%; /* needed */
/* inner img is centered horizontally */
vertical-align:top;
text-align:center;
overflow-x:hidden;
}
<div class="container" style="background-color:gray"> <!-- The background is there so you could see the image relative to the div -->
<img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>
The best way to keep the aspect ratio of the image is to set the width to auto (and it's the default behavior so you don't need to set explicitly). And with a simple overflow:hidden it works almost as you want it.
The hard part is centering horizontally. You can try this answer :css to center a image horizontally.
However if all your images aren't the same size, you will need to make one rule per image. And in this case putting the image as background-img would be better for semantic and accessibility (because your image doesn't have a sense in the page, it doesn't convey any information, it's decoration). An <img> would be read by a screen reader (the alt attribute), and in your case it wouldn't help a blind people.
Depending on how many browsers you need to support, I'd suggest you use object-fit! Support for it is okay if you can ignore IE, but in case your project qualifies, I see no problem with using it today. Also, there is always a polyfill.
You can find a nice summary on CSS-Tricks.com about the property. It basically works similarly to background-size, but for <img> tags. In your case, object-fit: cover; does the trick.
I made a little demo on CodePen that shows you how it works.
img {
height: 100%;
object-fit: fill;
width: 100%;
}
I need background image sprites to resize according to the width of their container, without showing the whole sprite, and background-size:100% accomplishes this, like so:
#featured ul.icon-controls li.prevention {
background:url(img/ico1.png) no-repeat;
background-size:100%;
height:60px;
width:50px;
background-position: 0 -113px;
}
But, alas, I have to support IE8, which does not support background-size. I've found scripts like backgroundSize.js, which force IE8 to render background-size:cover and background-size:contain, but those don't work for sprites. And I need to use a sprite for the various states of each icon (hover/active/inactive).
Is there anything I can do -- hacky solutions are ok given my desperation!
Here is a fiddle of my full code: http://jsfiddle.net/Pw7fL/
Check out this!
https://github.com/louisremi/background-size-polyfill
As I found out it is easy to use!
I'm developing a website. Everything looks great on 100% zoom but when I'm zooming in or out in chrome and IE (not Firefox) the style changes and div blocks move! I have a container div with a background and some div blocks on it. Everything should be in exact position and it is important in my site.
You can see in picture how it makes my style look so bad.
I tried to use percentage instead of pixel for sizing and positioning of all elements in the page but its not working.
My CSS:
.container{
width: 880px;
background-image: url('b80.png');
}
.picture{
margin-left:13px;
margin-top:11px;
}
I too faced the same problem, when I tested in a different screen size.
Try position: relative or display: inline-block for .picture. This may solve the issue.