I have a div with an unknown width. I want it to have a large background image.
How do I set the background image width to be as the width of the div itself? (the height of the div is known).
Background size will work, but the aspect ratio of the image will be changed. 500px below is the known height.
.myDiv {
background-image: url(image.png);
background-repeat: no-repeat;
background-size: 100% 500px;
}
More info on background-size here, it's not supported on <= IE8.
Or alternatively you could absolutely position an image relative to the container, but background-size is better.
img.cover {
width:100%;
height:100%;
position:absolute:
top:0;
left:0;
right:0;
bottom:0;
z-index:-1;
}
.myDiv {
background-image: url(image.png);
background-repeat: no-repeat;
background-size: contain; (you could also use cover here)
}
Use background image in the div and background-size css propierty.
Example:
#im {
background-image: url("path/to/img");
background-repeat: no-repeat;
background-size: cover;
}
You can also set the image width to 100% to fill your content div. In order to use height 100% you need specify your div height.
The following CSS attributes will make the background width fit to a dynamic container:
.myDiv {
background-size: 100%; /* fit width to container */
background-repeat: no-repeat; /* do not repeat background */
height: 200px; /* height is known */
}
See an example on JSFiddle
Related
body background image is not showing on mobile height wise. It show on half of the body. image size is (1600*1050)
Here is Css code
body {
background:url('img/dot.png') repeat, url('img/bg2.jpg') center fixed no-repeat;
background-size:auto, cover;
min-width:100%;
height:100%;
margin: 0;
}
Kindly advice me any solution.
Set the background height and width 100%
background-size: 100% 100%;
Remove auto from background-size, like this:
background-size: cover;
Just as the title says. How can I get a background image, or even text to fill width wise, not stretch/squash vertically, and just show up once? I can't seem to figure this out. Thank you.
Edit: I also want the height to scale with the width of the picture proportionally, so it will not be skewed but scaled with the width.
If you only want the background img to fill the width without taking into account the height you can do:
.element-with-back-img{
background-repeat: no-repeat;
background-size: 100%;
}
but with this the img doesn't fill the height of element-with-back-img because the height will set to "auto"
By doing this:
.element-with-back-img{
background-repeat: no-repeat;
background-size: 100% 100%;
}
the img fills the height but if element-with-back-img has different proportions than those from the img, this one will change its proportions to fill the element-with-back-img
I recommend u to:
.element-with-back-img{
background-repeat: no-repeat;
background-size: cover;
}
this scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
I hope this could help u
.test {
background-image: url(http://placekitten.com/1000/750);
background-size: 100%;
background-repeat: no-repeat;
background-color: lightblue;
height: 150px;
display: inline-block;
}
#test1 {
width: 200px;
}
#test2 {
width: 100px;
}
#test3 {
width: 300px;
}
.test:hover {
background-position: center center;
}
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
<div class="test" id="test3"></div>
Use css for the body:
body {background-repeat: no-repeat;
background-size: 100%;}
To fill width-wise, use 'background-size'. That allows you to enter two parameters - width and height, in that order. Use '100%' to fill the width, then a fixed value for the height (assuming you know what the height of your image is).
E.g. if your background image is 500px tall, then:
{
background-size:100% 500px;
background-repeat: no-repeat;
}
You can experiment for yourself here.
I'm trying to stretch an Image Full Screen (Cover): http://www.bootply.com/114850
I have a simple Menu and a call to action button but the image covers only the menu and stops there.
The Section Style is below.
.section-1 {
min-height: 100%;
background-image: url(http://i.imgur.com/fGrTemz.jpg);
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
overflow: auto;
}
What am i missing?
Add
html, body {
height:100%;
}
section-1 is stretching to the height of its parent (html/body) which doesn't have a height set on so it doesn't know what height to be.
Change your min-height from percentage to pixels.
.section-1{
min-height:500px;
}
Percentage height is dependent on the height of the parent, so you need to "pass" the height in percentage to the targeted element.
html, body {
height: 100%;
}
Demo: http://www.bootply.com/114867
Yo specified position:absolute in your .content-holder so that it was removed from the content flow. As a result, its container <section> shrink its height to fit the <nav> element only.
Try remove position:absolute from .content-holder. And if you add position:absolute to .section-1, the background will be fullscreen.
Add the following to you css:
position: Absolute
so your css would be
.section-1 {
min-height: 100%;
position: absolute;
background-image: url(http://i.imgur.com/fGrTemz.jpg);
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
overflow: auto;
}
if you add width:auto; to the section class. then just play around with the section-1 class min-height in "px" to target the screen size that best suits you. essentially what you could do is use media queries to target different screen sizes that way you will always get the perfect size. but thats alot of work so use the
html, body{height: 100%;}
I want to set height 100% and width overflow to an image, so that on every screen the TOP Menu (Red Buttons) and the Footer Menu can be reached easily.
Left hand side and right hand site can overflow.
I tried
.stretch {
width:100%;
height:auto;
}
Withouth success. And changing values makes the image fullscreen and has not the desired effect.
Any Ideas?
Here's a fiddle: http://jsfiddle.net/H75BT/2/
Edit:
From Bigood's answer, I need this one to be centered : http://jsfiddle.net/H75BT/1/
Apply a 100% height on html & body, and define that your .stretch will adapt its height to the height of the body, and recalculate its width to keep the proportions :
html, body {
margin:0;
padding:0;
height:100%;
overflow-x:hidden; /* Add this to prevent the body to adapt its width if you need */
}
.stretch {
width:auto;
height:100%;
}
Working demo
Edit
You can make it centered by using CSS's background:
.stretch {
background-image: url("http://bockt.de/link/home.jpg");
background-repeat: no-repeat;
background-position: center 0px;
background-size: cover;
height: 100%;
position: relative;
background-origin: padding-box;
}
With a <div class="stretch"></div>.
Centered image demo
I'm using the code below to display an image as a background in a div. How do I resize it?
#header {
height: 255px;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
background-position: 50% 50%;
background-image: url('../simg/header.png');
}
You can try controlling the size of the background by using the background-size property.
E.g.:
#header {
height: 255px;
-webkit-background-size:50%;
-moz-background-size:50%;
background-size:50%;
background-position: 50% 50%;
background-image: url('../simg/header.png');
}
This will reduce the background image to exactly half in either dimension.
try Easy Background Resize .js http://johnpatrickgiven.com/jquery/background-resize/
Another approach you can try is to set the css
background-size:contain;
width:50%;
max-height:255px;
and let the browser figure out the height which results in it maintaining the aspect ratio.