I am unsure of why I cannot get a background-image to appear in the following snippet. The url is correct and I have set size to the image. Also, how can you align a background-image in the center of a page? I know there are properties like right top, but I do not see one for center vertically and horizontally.
Thanks.
$("#arrow-icon").slideToggle(1000);
.arrow {
height: 400px;
width: 100%;
background-color: blue;
text-align: center;
}
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="arrow">
<div id="arrow-icon">
<!-- <img src="http://optimumwebdesigns.com/icons/down-arrow.ico"> -->
</div>
</div>
The problem is that the div is smaller that the picture.
You can get around this with the background-size property
Example:
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
background-size:100% 100%;
}
fiddle - https://fiddle.jshell.net/800modgt/
Or you can change the div width and height to the image width and height...
And in terms of centering, simply use:
background-position: center;
That said, I'm noticing that it's not center on the page on the Fiddle previously posts. You can use
margin:auto;
to center a <div> horizontally
You might consider for the positioning using CSS3 for positioning, as it's very versatile in changing position of a div and how far it slides out. Here is a JSFiddle. It's for side animation, but it will work for just a standard up/down, too.
https://jsbin.com/yovaqo/edit?html,css,js,output
Related
I have a situation where I have a div container with an image inside of it. The image is a variable asset so I never know what the height and width of the image will be. I want the div container to always fit to the size of the image and then add some padding to it... so for example if the image inside is 200px by 100px then the container should stretch to be 200px by 100px and then have 30px padding around it.
Here is an example of the CSS I'm using.. (the image is meant to be centered within the div vertically and horizontally):
#container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: red;
border-radius: 20px;
transform: translate(120px, 54px);
padding: calc(21px/2) calc(58px/2);
}
#container:hover {
background: pink;
}
Just for reference this is the html element:
<div id="container"><img src="image.png"></div>
So far I haven't been able to find any css trick that works. I tried using "fit-content" on the container, but it seems like fit-content is more for stretching the image to fit the container, not the other way around, so I resorted to using Javascript:
var container = document.getElementById("container");
container.style.width= container.querySelector('img').offsetWidth+"px";
container.style.height= container.querySelector('img').offsetHeight+"px";
I would rather not use JavaScript if I don't need to, so please let me know if there is a simpler way of doing this...
AFAIU, Your code is working as expected without the JavaScript:
#container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: red;
border-radius: 20px;
transform: translate(120px, 54px);
padding: calc(21px/2) calc(58px/2);
}
#container:hover {
background: pink;
}
<div id="container">
<img src="https://picsum.photos/400">
</div>
Ok guys, I solved it...
I had this in my css:
#page img, #page div {position: absolute; border: 0;}
This was causing the image to have an absolute position which pulled it out of the document flow. Once I added position: relative to the img, it started working.
I appreciate the responses everyone. It was helpful! Thank you!
If I understand right this is what you want. No matter what size the image is the container will be 20px bigger.
#container {
float: left;
background: pink;
}
#image {
width: 500px;
height: 300px;
padding: 20px;
animation: size 5s linear infinite alternate;
}
#keyframes size {
from {width: 100px; height: auto;}
to {width:400px; height: auto;}
}
<div id="container">
<img src="https://static.toiimg.com/photo/72975551.cms" alt="pic" id="image"/>
</div>
I'm using bootstrap inside of React to display a grid of images in fixed size boxes. The images are all of different sizes and I don't want to distort them. The behavior I'm looking for is an image displayed in the center of a fixed size box, say 325X250 with a white(or any color) background. I'm really not a CSS person, thus the question.
This is my React code.
return (
<div className="row">
<div className="image-viewer">
{this.state.overlay}
<ul className="list-inline">
{this.state.images.map(function (image) {
return (<li key={image.src}><a href="#" onClick={this.handleClick} data-id={image.mediaId}><div className="img-container "><img
src={image.src}
className="img-responsive"
alt={image.mediaId}/></div></a></li>);
}, this)}
</ul>
</div>
</div>
);
This is the styling I've done till now,
.image-container{
width: 250px;
height: 300px;
/*width: 400px;*/
overflow: hidden;
}
.image-container img{
height: auto;
width: 100%;
}
This clearly doesn't work. I've looked into this link,
How can I make all images of different height and width the same via CSS?
But couldn't get any solution to work to my requirement.
Any help appreciated.
As an alternative to the <img> tag, you could use any block level element and CSS background properties:
background-image: url(http://domain.top/path/to/img.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
The property background-size and the value contain will render a background image to stretch to it's containing element's edges as far as it can without distortion and will maintain original aspect ratio.
SNIPPET
.img {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
outline: 1px dashed red;
width: 325px;
height: 250px;
margin: 10px auto;
}
#bbc {
background-image: url(http://i.imgur.com/4TLlrL3.png);
}
#lena {
background-image: url(http://i.imgur.com/o1RbMvI.png);
}
#normal {
background-image: url(http://i.imgur.com/43uy0hP.png);
}
<div id='bbc' class='img'></div>
<figure id='lena' class='img'></figure>
<section id='normal' class='img'></section>
Try adding 100% to both of them:
.image-container img{
height: 100%;
width: 100%;
}
Adding 100% to both of them will have it go full width of parent element
Given a scenario where you don't know the height and width of image elements in advance, let's say that in cases where image height is greater than image width, you'd like to vertically center the image by cropping the same amount of pixels form its top and bottom, such that the new image height matches the image width. For example, if an image has a width of 200px, and its height is 250px, crop 25px from its top and from its bottom.
Here's an example setup:
HTML:
<div class = 'cell'>
...
<div class = 'image_container'>
...
<img ...>
</div>
</div>
CSS:
.cell {
display: inline-block;
float: left;
/* width will be changed by use of '#media screen'.
Smaller browser window -> larger width */
width: 31%;
}
.image_container {
position: relative;
float: left;
width: 100%;
}
.image_container > img {
width: 100%;
}
Is it possible to accomplish the aforementioned center/crop operation using only CSS, or is it necessary to use javascript/jquery for this?
You can use the object-fit CSS attribute. It acts a lot like the background-size attribute.
.image_container > img {
object-fit: contain;
}
Note that this doesn't have full browser support as of now (October 2016) so you may want to look into setting the image as a background on a div and using background-position and background-size to deal with this instead of an <img> tag.
.image_container {
height: 300px;
background-color: cornflowerblue;
image-rendering: pixelated;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALklEQVQoU2NkgID/UBqdYmSESoJobOA/sgKQKTCFMDaKAuqYAHMs3CqiHInXmwDZGBMDEmk6SQAAAABJRU5ErkJggg==');
background-repeat: no-repeat;
background-position: center center;
background-size: 200px;
}
<div class="image_container"></div>
.cover_image {
height: 400px;
background: url('http://lorempixel.com/g/400/200/') no-repeat scroll center center;
background-size: cover;
}
<div class="cover_image"></div>
So i have a div with a background image and i would like to make the div same size as the background image when i resize the window, so i can place some text in the center of it and i want to image to be responsive and so the div also.
my html for the image and text:
<div id="headerimg" class="header">
<h1>Welcome to my website</h1>
</div>
and my cc for it so far:
#headerimg{
background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
background-size: cover;
width:100%;
}
.header{
height: 700px;
width: 100%;
margin: auto;
padding: 20%;
color: white;
text-align: center;
font-size: 50px;
}
i am just using a random image from google atm, ill replace later; but anyway.. how can i get the height to align whenever? Jquery maybe? -but im not realy familiar with jquery much...and yes, i want the div to be full width of the site all the time.
Would something like the following work for you:
https://jsfiddle.net/44k0320v/
I've updated your header width to use 50vw units, your example image has an aspect ratio of arount 2:1 meaning that if you want the div to maintain the correct height you need to set the height to be half of the viewport width (the measurement across the width of the screen is 100vw).
I have also updated the background image to have a size of 100% rather than cover so it's width will scale with the div.
I've also updated the font size to also use vw units.
New css below:
#headerimg{
background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
background-size: 100%;
}
.header{
box-sizing: border-box;
height: 50vw;
width: 100%;
margin: auto;
padding: 10% 20%;
color: white;
text-align: center;
font-size: 3.5vw;
}
A similar solution to jazibobs, also using the vw height but with more "flowy" text. Currently the background will respond to pretty much any width however at narrow widths it doesn't really make much sense with the text. For this you could use media queries to possibly even hide the background at smaller widths or just set the text smaller.
https://jsfiddle.net/kzhzasot/
#headerimg{
background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
background-size: 100% auto;
width: 100%;
height: 100vh;
}
.header{
margin: 0px;
padding: 0;
color: white;
text-align: center;
font-size: 50px;
display: table;
}
h1 {
display: table-cell;
vertical-align: middle;
}
I'm making a responsive website and I want a image next to a div.
While placing the image next to the div is no problem, it gets tricky when I make my screen smaller.
I gave the image a width of 100% and a height of auto (responsive image) and this is the result:
This example is how it needs to be permanent, even when I scale it down.
Right now when I scale it down, this happens:
Because the image is responsive, it shrinks and the div stays in place.
Is there any way to make the div scale with the picture?
My CSS (Made in SASS):
.block-middle{
background-color: $oranje;
color: #fff;
padding-top: 85px;
padding-left: 55px;
padding-right: 55px;
line-height: 30px;
font-size: 18px;
font-weight: 300;
padding-bottom: 87px;
.button-wit-bruin{
margin-top: 30px;
display: inline-block;
}
h1{
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: 700;
padding-bottom: 30px;
}
}
.block-right{
img.liggend{
width: 100%;
height: auto;
}
}
And the HTML is simply:
<div class="col-md-4 no-p block-middle">
<div id="img1_div"></div>
<img id="img1" alt="" />
<script>
$(document).ready( function(){
$(window).on("load", function(){
$(window).on("resize", function(){
var imgHeight = $("#img1").height();
$("#img1_div").height( imgHeight );
}).resize();
});//window load
});//document ready
</script>
This code will work in most cases ( except there's no overriding behaviour ), no matter where your image and div are placed. I would like to mention though that resize and scroll events should not be handled crudely this way, but should be optimised using a global timeout variable.
the trick is to set the height of the div relative to the width...which ironically, you can't do with the height property, since height:auto; makes it the height of it's children.
padding however is relative to the width of the parent...so it's a little bit funky, but if you play with the padding-bottom as a % and make the height:0px; you can achieve the desired effect without using Javascript. Here's the relevant CSS:
.responsive-background {
float:left;
width:60%;
height:0px;
padding-bottom:30%; /* adjust this depending on the height/width of the image you are aligning to */
}
And a Codepen with more detail and some additional styling:
http://codepen.io/ryantdecker/pen/LZYYaj
I think this will do the trick for you.
One way I can think of is, use the image as background for div and use background-size as cover:
.right-block {
background: url('https://placeimg.com/640/480/any');
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
Ahhh sorry I misunderstood your question. This can be done with a bit of flexbox if your target browsers support it. Is this the result you're looking for?
.container {
display: flex;
}
.left-block {
background: red;
width: 50%;
}
.right-block {
width: 50%;
}
.image {
display: block; // Removes spacing around image cause by default display: inline;
width: 100%;
}
<div class="container">
<div class="left-block">
</div>
<div class="right-block">
<img class="image" src="https://placeimg.com/640/480/any">
</div>
</div>
Previous Answer:
It seems as though there's a height set on your .block-right element. The code you provided is rather incomplete as you're missing the markup for your .block-right element. But is this what you're looking for?
.left-block,
.right-block {
float: left;
width: 50%;
}
.left-block {
background: red;
height: 200px;
}
.right-block {
background: grey;
}
.image {
width: 100%;
}
<div class="left-block">
</div>
<div class="right-block">
<img class="image" src="https://placeimg.com/640/480/any">
</div>