I'm looking for a solution of my problem.
I am using twitter bootstrap for a mobile site and this is my outcome on mobile view:
<div class="row">
<div class="span4">
<div class="visible-phone" style="background-image: url('http://upload.tapcrowd.com/upload/catalogimages/719/catalogimagecardealer#2x.png');></div>
<p class="metadataTitle metacell">
<span style="display: inline-block" class="ellipsis">Car Dealers</span>
<span style="table-row"></span></p>
</div>
</div>
</div>
The css of the div where my image is in:
background-size:contain;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 300px;"
But as you can see there is a margin between the image and the content below, does anyone know how I can fix this?
background-size:contain;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size:
"contain: This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area."
So your image has been scaled so that it fits into the element completely - you seem to want to use cover instead:
"cover: This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area."
Set margin:0; padding:0; to both the image and the content below. This will remove any margin. Since HTML adds a margin by default, you need to explicitly tell HTML to remove a margin.
Related
I am trying to get a picture on my home page. I made a container and a div within the container. When I use pixels as width and height the picture appears but when I use 100% it does not. I tried changing the container to pixels to see if the image would render but it did not.
<div class="container" height="100%" width="100%">
<div class="splash-div" ; style="background-image: url('../../Images/laptopboy.jpg'); background-size: cover; width: 100%; height: 100%;">
</div>
</div>
Why doesn't the picture appear when I use the percentage for height and width?
I think the problem is your image path.
You have entered a wrong path of image file.
Change path and try again.
I want the panel and image to be at a fixed height so that it is not larger than the page and there is no scrollbar. How would I archive this?
<div class="container">
<div class="col-md-8">
<div class="panel panel-primary">
<div class="panel-heading">Panel</div>
<div class="panel-body">
<img src="https://scontent-lht6-1.xx.fbcdn.net/v/t1.0-9/16864258_1261558947267706_6364934376555931917_n.jpg?oh=99e2734014dbdc9080048e0c6022e132&oe=5973503B" width="100%" height="100%">
</div>
</div>
</div>
</div>
https://jsfiddle.net/58br0n1g/
There are several ways you can tackle this problem.
Firstly you want to constrain the height of the panel, using max-height: 100vh; this sets the max height of the panel to 100 viewport height units, which 100% of the height.
Secondly we need to handle the image, Since you've set the image to 100% 100%, the image might overflow the container. Thus you need to decide how the image will be display. You have several options here:
Add overflow: hidden; to the panel, meaning any excess image will just not be shown.
Use background-image: url(/path/to/image.jpg); in CSS instead of an inline image element. This means you can take advantage of the various background-size properties, for example background-size: cover; will make sure the image always fills 100% of the background. Worth doing some research around this.
Hope that helps.
I am redesigning a website for fun and I was messing around with some JQuery and some CSS effects. When you click on an arrow, everything on the page gets pushed down and a video comes up. The issues is I'm trying to create a section for an image. However, changing the background-size of the image to cover ends up making the entire image take up the screen. If I manually change the size of the image then the image is distorted.
Here is the HTML:
<section id="content">
<img src="http://res.cloudinary.com/dvrqqa6ja/image/upload/v1466799500/background_image_mjh10z.jpg"class="stuff"> </img>
<h1>Click the arrow to view Kai Greene's Scar Story</h1>
<span class="msg"><button = class="btn btn-danger">Sign up for our News Letter</button></span>
</section>
<article class="buy">
<h1 class="products text-center">View other products</h1>
</article>
</div>
Here is the CSS:
.stuff{
margin-top: 100px;
background-soze: cover;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
You can view the entire code on codepen: http://codepen.io/sibraza/pen/wWgqBO
Instead of background-size, use width or height to set your desired image size. You can also use object-fit: cover to keep the image aspect ratio no matter what size you set. Its like doing a "cropping" effect.
You would probably have to change the size of the image manually. Setting the width to a certain value and setting height to auto or visa versa should not distort the image. So setting either width or height to auto shouldn't distort the image.
http://www.w3schools.com/css/css_rwd_images.asp is a helpful resource for image sizing in CSS
I have an banner image that is 1920 x 1300 which I want to display within a container or jumbotron which is 800px height.
How can i fit the image in so that it is also responsive and so is the text ontop of it?
<div class="container-fluid>
<div class="image-container">
<h1>Title</h1>
</div>
</div>
CSS:
.image-container{
background-image: url("..images/background.jpg");
background-size: contain;
height:800px;
width: 100%;
}
Or would it be a better idea to re-size the image?
I would suggest to use an html <img> instead of an css background.
I've made an JSFiddle of how I would do that.
Set the inner content inside the <div class="image-container"> and set it absolute.
Here is the JSFiddle.
I'm using cssgrid.net which is a 12col 1140px responsive fluid framework and I'm having trouble centering things.
My website has a "background-size: cover;" image and I have a logo that I want to center horizontally within the browser, even when it's resizing.
This is the HTML I have:
<div class="container">
<div class="row">
<div class="fourcol"></div>
<div class="fourcol">
<div class="logo"></div>
</div>
<div class="fourcol last"></div>
</div>
And the CSS:
.logo {
background: url(../images/logo_retina.png) no-repeat;
background-size: 175px 175px;
}
This is what the top portion of my site looks like:
The logo starts in the second set of 4 columns like it should, but how do I make it centered within that set of 4 columns, even when resizing?
Please keep in mind coding is just a hobby.
Assuming that each div.fourcol has the same fixed width I think that background: url(../images/logo_retina.png) no-repeat center middle; should help. If they are floating one another with width set to auto then it will be problem as div.row may be wider than the cumulative width of div.fourcol.