I have a div with a background-image defined as follows in my stylesheet:
.information_photo {
position: relative;
top: 30px;
width: 100%;
height: 200px;
background-image: url('http://www.ladyblitz.it/wp-content/uploads/2015/04/carbonara.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
}
<div class="information_photo"></div>
As you can see it stretches the original image, instead I want it to just focus on a part of the background-image without stretching or resizing it.
The 100% 100% background-size value means the background should stretch (100%) of the width of the element and (100%) of the height of the element. Have either of them set to auto, which will size the undefined dimension automatically, while preserving the images aspect ratio.
You can then choose which portion of the image is visible by adjusting the respective background-position style.
.information_photo {
position: relative;
top: 30px;
width: 100%;
height: 200px;
background-image: url('http://www.ladyblitz.it/wp-content/uploads/2015/04/carbonara.jpg');
background-repeat: no-repeat;
background-position: center -30px; /* Visible 30 px from the top */
/* 100% height, auto width */
background-size: auto 100%;
/* 100% width, auto height */
background-size: 100% auto;
/* or simply */
background-size: 100%;
}
<div class="information_photo"></div>
Related
I want to include background image which is oversized (4000px x 3000px) in the div,
in such a way that width will take max width of the screen and height will adjust to it.
I don't know why but it doesn't work if the height is not specified (like 1000px).
The image doesn't appear at all.
I wanted to make jsfiddle but there it works (probably because height is somehow specified automatically)
The part of code (HTML):
<section id="panels">
<h1>PANELS</h1>
<div class="section-img">
<!-- here i want the image -->
</div>
</section>
The part of code (CSS):
.section-img {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-image: url("path/to/my/image");
max-width: 100%;
width: 100%;
height: auto;
}
And with this code nothing appears (as it looks the height is 0px), how can i do the thing that height will adjust to size of width i.e. scales itself.
In your example, the div is inheriting the width of the parent section tag, taking into account any margin or padding on the body element. It has display: block so width is 100% , height is auto so it's the size of whatever inside. So in your case there's nothing inside the div tag, which means it's height: auto; value is 0.
.section-img {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-image: url("https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg");
max-width: 100%;
width: 100%;
height: 100px; // auto means 0 if there's nothing in your div element
display: block; // this is a default for every div tag
}
<section id="panels">
<h1>PANELS</h1>
<div class="section-img">
<!-- here i want the image -->
</div>
</section>
Just try this replace the auto with 100% in height and check.
.section-img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url(https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg);
max-width: 100%;
width: 100%;
height: 100%;
display: block;
position:absolute;
top:20%;
bottom:0;
right:0;
left:0;
}
<section id="panels">
<h1>PANELS</h1>
<div class="section-img">
<!-- here i want the image -->
</div>
</section>
Are you like this .
I want to have an image that adjusts to container size.
Example: the container is 100x100 pixels and the image is 90x80 pixels, the smaller property of the image (height in this case) adjust to container size, and the bigger property overflow the container size.
How can I do this?
My code:
HTML
<div class="a-avatar">
<img src="#" alt="profile picture">
</div>
CSS
.a-avatar {
display: block;
width: 100px;
height: 100px;
}
.a-avatar img {
min-width: 100%;
min-width: 100%;
width: auto;
height: auto;
}
use background image, example:-
div.avatar {
background-image: url("paper.gif");
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container
}
I have been searching for a while, I still cannot find the exact answer.
I have a <div> for which the width takes 100% of the screen, the height is fixed at 600px.
I would like to add a background picture to the div for which the picture height would fit the <div> height (600px and no picture crop). Whenever I modify the width of the screen, the height should always remain 600px. The picture would then be centered and cropped on the width direction.
Try this:
.container {
width: 100%;
height: 600px;
background: url('https://images.pexels.com/photos/268415/pexels-photo-268415.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
background-repeat: no-repeat;
background-position: center;
background-size: auto 100%;
}
<div class="container"></div>
Did you tried
`
background-image: url('your-image.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
`
I think this what you are looking for :
body {
margin: 0px;
padding: 0px;
}
div {
width: 100vw;
height: 600px;
background: url('https://wallpaperbrowse.com/media/images/704532.jpg') no-repeat;
background-size: 100% 600px;
float: left;
background-position: center;
}
<div>
test
</div>
Hope this was helpful for you.
I have a div with a background image that I want to expand 100% width and auto scale the div to fit the required height of the image. At the moment it is not scaling the div height unless I set the height of the div to 100% but then it just stretches to the full height of the screen, whereas I want it to scale to the height of the image.
Here is the html:
<div id="mainHeaderWrapper">
</div><!--end mainHeaderWrapper-->
<br class="clear" />;
Here is the css:
#mainHeaderWrapper{
background: url(http://localhost/site/gallery/bg1.jpg);
width: 100%;
height: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
}
.clear { clear: both; }
Thanks for any and all help
Let a transparent image dictate the DIV dimensions.
Inside that div put the same image with CSS opacity: 0
<div id="mainHeaderWrapper">
<img src="path/to/image.jpg"><!-- I'm invisible! -->
</div>
set that image to
#mainHeaderWrapper {
background: no-repeat url(path/to/image.jpg) 50% / 100%;
}
#mainHeaderWrapper img {
vertical-align: top;
width: 100%; /* max width */
opacity: 0; /* make it transparent */
}
That way the height of the DIV will be dictated by the containing invisible image, and having the background-image set to center, full (50% / 100%) it will match that image's proportions.
Need some content inside that DIV?
Due to the containing image, you'll need an extra child element that will be set to position: absolute acting as an overlay element
<div id="mainHeaderWrapper">
<img src="path/to/image.jpg"><!-- I'm invisible! -->
<div>Some content...</div>
</div>
#mainHeaderWrapper{
position: relative;
background: no-repeat url(path/to/image.jpg) 50% / 100%;
}
#mainHeaderWrapper > img{
vertical-align: top;
width: 100%; /* max width */
opacity: 0; /* make it transparent */
}
#mainHeaderWrapper > div{
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
If you know the proportions of the image, use percentage padding to define the height of the container. Set height:0 and set vertical padding to a percentage of the width.
They key to this method is that percentage-based vertical padding is always related to width.
According to the box model (w3.org):
The percentage is calculated with respect to the width of the
generated box's containing block, even for 'padding-top' and
'padding-bottom'.
Below, the image is 400px X 200px, so the proportion of height to width is 1:2 and padding-top is set to 50%;
#mainHeaderWrapper {
width: 100%;
height: 0;
padding-top: 50%;
background-image: url('https://dummyimage.com/400x200/');
background-size: 100% auto;
background-repeat: no-repeat;
}
<div id="mainHeaderWrapper"></div>
stuff below the image
In another example, the image is 300px X 100px. The height is ⅓ of the width, so the padding-top is set to 33.33%:
#mainHeaderWrapper {
width: 100%;
height: 0;
padding-top:33.33%;
background-image: url('https://dummyimage.com/300x100/');
background-size: 100% auto;
background-repeat: no-repeat;
}
<div id="mainHeaderWrapper"></div>
stuff below the image
Edit:
As prompted by Paulie_D, other content in the div must be positioned absolutely, demonstrated below. I suggest positioning these elements using percentages, as well.
#mainHeaderWrapper {
width: 100%;
height: 0;
padding-top: 33.33%;
background-image: url('https://dummyimage.com/300x100/');
background-size: 100% auto;
background-repeat: no-repeat;
}
div#inner_content {
position: absolute;
top: 0;
width: 100%;
margin-top: 10%;
color: #FFF;
text-align: center;
font-size: 20px;
}
<div id="mainHeaderWrapper">
<div id="inner_content">Hello World</div>
</div>
stuff below the image
This can be done without using a dummy image. I will use dimensions of an image I just worked with for example.
The dimensions of my image are 2880x1410. Simplify the dimensions -> 96/47 (I used this simple ratio calculator http://andrew.hedges.name/experiments/aspect_ratio/). Once you have the simplified ratio, plug the height and width to the equation:
height: calc((100vw * W) / H);
So mine would read: height: calc((100vw * 47) / 96);
No need to worry about the contents of the div either (unless they dont fit)
body{ margin: 0; padding: 0}
#box1{
background: url(http://lorempixel.com/400/200/food/);
background-size: cover;
background-attachment: fixed;
margin: 0;
width: 100%;
height: 100vh;
display: table;
}
h1{ color: #ffffff; font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; font-size: 38px; text-align: center; font-weight: normal; background: rgba(0,0,0,0.3); display: table-cell; vertical-align: middle}
<div id="box1">
<h1>Code Bluster BILU </h1>
</div>
I'm trying to setup a series of div's with a background image that each have their own fixed height, and stretch to fill up the width, even if there is overflow on the top/bottom that is clipped. I just don't want the white space on the edges.
Currently, I have: http://jsfiddle.net/ndKWN/
CSS
#main-container {
float: left;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
.chapter {
position: relative;
height: 1400px;
z-index: 1;
}
#chapter1 {
background: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg) 50% 0 no-repeat fixed;
height: 1200px;
}
#chapter2 {
background: url(http://download.ultradownloads.com.br/wallpaper/94781_Papel-de-Parede-Homer-Simpson--94781_1680x1050.jpg) 50% 0 no-repeat fixed;
height: 1200px;
}
See my answer to a similar question here.
It sounds like you want a background-image to keep it's own aspect ratio while expanding to 100% width and getting cropped off on the top and bottom. If that's the case, do something like this:
.chapter {
position: relative;
height: 1200px;
z-index: 1;
}
#chapter1 {
background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
}
jsfiddle: http://jsfiddle.net/ndKWN/3/
The problem with this approach is that you have the container elements at a fixed height, so there can be space below if the screen is small enough.
If you want the height to keep the image's aspect ratio, you'll have to do something like what I wrote in an edit to the answer I linked to above. Set the container's height to 0 and set the padding-bottom to the percentage of the width:
.chapter {
position: relative;
height: 0;
padding-bottom: 75%;
z-index: 1;
}
#chapter1 {
background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
}
jsfiddle: http://jsfiddle.net/ndKWN/4/
You could also put the padding-bottom percentage into each #chapter style if each image has a different aspect ratio. In order to use different aspect ratios, divide the height of the original image by it's own width, and multiply by 100 to get the percentage value.
http://jsfiddle.net/ndKWN/1/
You can use background-size: cover;
But the thing is that the .chapter class is not dynamic you're declaring a height:1200px
so it's better to use background:cover and set with media queries specific height's for popular resolutions.