Responsive Background Image with center/cover - responsive-design

I have this html syntax:
<div class="kalis-img" style="background-image: url(https://example.com/myimage.jpg);"></div>
I have defined in CSS:
.kalis-img {
background: center center/cover no-repeat;
width: 300px;
height: 300px;
display: inline-block;
}
which works fine if I want to have the image at 300px. I tried setting width:100%;height:auto; to make this responsive but instead I get a blank image. Is there a way to make a background image, responsive?

Here's one idea for you:
the end result
code view
HTML
<div class="kalis-img" ></div>
CSS
.kalis-img {
background:url(path_to_image) center center/cover no-repeat;
width: 100%;
/* height: auto; */
/* display: inline-block; */
height:66.67vw;
}
You'll see that I'm setting the height as 66.67vw, which is equivalent to 2/3rds of the viewport width, choose whatever makes sense for your design.
Edit
Right now it's 4 rectangles next to each other, each 300px, taking a
max width of 1200px. When the screen becomes smaller, I would like the
width & height of these 4 rectangles to become smaller, so that they
are still on the same row.
See if this does the trick for you: https://codepen.io/panchroma/pen/wqqoZj
The important bits of the code are:
HTML
<div class="wrapper">
<div class="image image1" ></div>
...
<div class="image image4" ></div>
</div> <!-- end wrapper -->
CSS
.wrapper{
max-width:1200px;
margin:0 auto;
}
.image {
height:400px; /* adjust as required */
display:inline-block;
width:25%;
float:left;
box-sizing: border-box; /* needed to remove browser padding or borders which could break single row layout */
}
.image1,
.image2,
.image3,
.image4{
background:url(path_to_image) center center/cover no-repeat;
}
Good luck!

Related

overlay text over a image in foundation

Hi I have the following foundation codepen:
https://codepen.io/ianims/pen/PmoqBZ
code:
$(document).ready(function () {
$(document).foundation();
});
body {
background-color: #a3d5d3;
}
#wrap {
position:relative; /* make this relative to have the inner div absolute without breaking out */
/* width: 200px; /* fix the width or else it'll be the entire page's width */
background: silver;
border: 1px solid grey
}
#text {
color:#ffffff;
margin-left: 70%;
position: absolute;
width:250px;
height:60%;
top: 0;
bottom: 0;
background: black;
opacity:0.5;
padding :20px;
}
<div class="row fullWidth">
<div class="large-12 columns">
<div id="wrap">
<div id="text">
<br /><br /><br /><br />
<h3>MCA Coding and MLC Compliance</h3>
<p>
This is some text which I need to show on the right hand side. This is some text which I need to show on the right hand side. This is some text which I need to show on the right hand side. This is some text which I need to show on the right hand side.
</p>
</div>
<img src="https://www.burgessyachts.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/0/00006250_13.jpg" />
</div>
</div>
</div>
On a large screen it works ok -- I want the text overplayed on the image over to the right - but if you shrink the screen down the text starts to disappear off to the right -- anyone any ideas how to keep it consistent on all screens???
thanks
It's better to position using the left: position as opposed to margin. You might also want to delete the height property so it accomodates more content.
#text {
padding-top: 2em; /*replaces the <br>s in your html*/
color: #ffffff;
position: absolute;
width: 250px;
/*height: 60%;*/
top: 0;
right:7.5%; /* instead of margin*/
background: black;
opacity: 0.5;
padding: 20px;
}
I made a codepen demo:
https://codepen.io/kemie/pen/pPoqOv

Responsive website images the same height

I am trying to figure out how to make vertical and horizontal images at the same height. The height I need by vertical image. any ideas..
I was thinking to make the same height, but when I resize it shows like above...
css: max-height: 375px!important;
Update:
http://jsfiddle.net/LG2B8/
use min-height for horizontal image
min-height: height of vertical image;
as mention above, just give
css: height: 375px!important;
or
css: height: 4%0!important; //give in percent which is good for responsive ui
Some basic rule is
Height - apply when you need / know proper height
Max-height - apply when you want to restrict image height when exceed, this is good to used for images, you can also use for all other content too.
Min -height - apply when you want to minimum height should be, this is used for div/table/tr/td for responsive ui
I rectify and only change in css. just remove everything and add this. I added width for understand.
img
{
display: inline-block;
height: 300px;
width:200px;
}
img is html tag and all images will work as per "img" css attributes
Here is my solution:
Html:
<div class="w">
<div class="img"><img src="http://i.imgur.com/4OAz0Cf.jpg"/></div>
<div class="img o"><img src="http://i.imgur.com/EJsmCmT.jpg"/></div>
</div>
Css:
.w {
display: table-row;
}
.img{
width: 50%;
display: table-cell;
}
.img img{
min-height: 500px;
max-height: 500px;
}
.img.o img {
width: 100%;
}
Example

Making 3 divs equidistant. They are within a div, within a div. On a parallax webpage

Hi to all,
I'm trying to make 3 divs equidistant from each other. The DIV width is determined by the IMG file in it.
I have succeeded in making a container div 80% width of the page and is centered.
However, the DIVs inside this are equidistant to each other (for as far I can see) but do not center themselves according to the div they are in.
HTML:
<div class="slide" id="slide5" data-slide="5" data-stellar-background-ratio="0">
<div class="slide5_wrapper">
<div class="slide5_recd2011">
<img src="images/RECD2011_thumbnail.png">
</div>
<div class="slide5_recd2012">
<img src="images/RECD2011_thumbnail.png">
</div>
<div class="slide5_recd2013">
<img src="images/RECD2011_thumbnail.png">
</div>
</div>
And the CSS:
.slide5_wrapper{
margin: 0 auto;
width:80%;
position: relative;
max-height:80%;
top:10%;
text-align:justify;
}
.slide5_recd2011, .slide5_recd2012, .slide5_recd2013 {
margin: 10px;
height:auto;
border-radius:15px;
vertical-align: top;
display:inline-block;
}
#slide5_wrapper:after {
content: '';
width:100%;
display:inline-block;
}
Excuse me for my horrible use of terminology (wrappers /containters w/e) just want this to work.
I'm not a real website coder, just trying to learn and I have this project I have taken on while not being too qualified for it (it's a temporary non-corporate website and not going to be my business so I'm not destroying the work field or anything).
Thanks in advance
Here is the link with explanation, here is the working sample.
#slide5_wrapper{
text-align: justify;
}
#slide5_wrapper:after{
content:'';
width:100%;
display:inline-block;
}
#slide5_wrapper div{
display: inline-block;
}
Hope it helps.
What's just about this:
.slide5_recd2012{
width: 33%;
float:left;
box-sizing: border-box;
padding: /*some padding you need */ 0;
}
?

Resizing Background image according to container Div

I have a background image like image.jpg. I want to resize this image according to any div which is using it.
How can i do this in jquery or any other way.
There's many different ways to do this. The best in terms of execution speed is to use CSS, but jQuery can accomplish anything CSS can using the $().css() method.
Here's a fiddle with four five different methods, from just putting the image in, to stretching in css and jQuery. The code is below:
<style>
div
{
background-image : url("http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Les_Halles_%28metro_de_Paris%29_-_Entree.jpg/800px-Les_Halles_%28metro_de_Paris%29_-_Entree.jpg");
height : 200px;
width: 200px;
margin: 10px;
background-repeat : no-repeat;
background-color: blue;
float: left;
}
#one
{
background-size:contain;
}
#two
{
background-size: 100%;
}
#three
{
background-size: 100% 100%;
}
</style>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<script>
$("#a").css("background-size","contain") //fits in aspect ratio
$("#b").css("background-size","100%") //constrained by width
$("#c").css("background-size","100% 100%") //stretch to fill
$("#d").css("background-size","auto 100%") //constrained by height
</script>
Hope this sheds some light on the problem.
There's some good references available on CSS, if you want to explore the properties and see what else can be done.

Why won't these social buttons centre in responsive design?

We've manually programmed Twitter, Facebook and G+ buttons on our site which uses responsive design in a ajax portfolio. They all align with each other perfectly but the problem is we want all 3 to be centred no matter what the size of the surrounding container.
In my head this should work easily with a surrounding Div that has 100% width to expand to the portfolio size, inside that another Div which has margin-left and margin-right as auto which floats centrally to the 100% width div and then inside of that div the containers for the buttons. However for some reason they always hard align to the left. Here is my code at the moment.
Here is an example
http://themixtapesite.com/#/joe-budden-a-lose-quarter
now change your browser window to make it smaller so you can dynamically see all the different sizes - I want those social buttons to float centred in the middle rather than on the left like they are now..
<!-- Social sharing buttons -->
<div class="social-single">
<div class="social-centre">
<div class="twit-button">Tweet</div>
<div class="fb-button"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&title=<?php wp_title( '|', true, 'right' ); ?>&send=false&layout=button_count&width=71&show_faces=false&action=like&colorscheme=light&font&height=21&appId=118471234925480" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width: 71px; height: 21px;" allowTransparency="true"></iframe>
</div>
<div class="gplus-button"><g:plusone href="<?php echo urlencode(get_permalink($post->ID)); ?>" size="medium" annotation="bubble" width="50px"></g:plusone></div>
</div> </div>
And the CSS
/* Social Buttons */
.social-single {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
width: 100% !important;
}
.social-centre
{
margin-left: auto;
margin-right: auto;
}
.twit-button {
float: left;
margin: 0;
margin-right: 5px;
width: 80px;
}
.fb-button {
float: left;
margin: 0;
width: 80px;
}
.gplus-button {
float: left;
margin: 0;
width: 50px;
}
You have already used margin-left: auto; and margin-right:auto; it is good.
You have all things set in the way of responsiveness.
But one thing that browser checks for every element, its width as well as height .
We should define these values separately, otherwise it'll assume it without having any child element inside it.
I've checked your code and as i think you will have to add only one thing - give .social-centre class width whatever you want but it would be good if it is in %'s for its responsiveness.
.social-centre
{
margin-left: auto;
margin-right: auto;
width:50%; //example, whatever you want.
}
And it'll work properly. Hope it'll help you.

Resources