I'm trying to put a responsive form inside a div with a background image that takes the full width off the screen. After searching around a while it seemed the best option to make the background image div the full size of the image was to work with a padding-bottom the size of the image.
The problem now is, when I watch it on smaller screens the background image div is to small to fit the content of the form. I tried using min-width:100% but that didn't help.
html:
<div class="background-image-div">
<div class="centerer-div">
<form id="form">
"some form stuff"
</form>
</div>
</div>
css:
.background-image-div{
background-image: url(background.png)
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
width: 100%;
background-size: contain;
position: relative;
padding-bottom: 25%;
}
.centerer-div{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: auto;
display: table;
width: 100%;
}
#form{
text-align: center;
}
Maybe it's because you're not closing the form tag?
<div class="background-image-div">
<div class="centerer-div">
<form id="form">
"some form stuff"
</form>
</div>
</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 have an image that is e.g. 1000x1000 px. I want to insert it into my web page so that it has 500x300 px. I do not want that it is distorted though. I want it to be zoomed down to 50% of its width (so 500x500 without distorting) and then cropped for 300 in height (i.e. 300 px of the image would be displayed from the top of the image of those 500 px).
I am trying to use a normal img tag but if CSS is needed that is ok too.
Thanks.
You can put the image inside div,
and set the div height, width and overflow hidden;
<div style="width: 500px; height: 300px; overflow: hidden;">
<img src="./1.jpg" alt="" style="width:100%;" >
</div>
Create a div that is 500x300 px in size and set your image as the background image to that div, with its size being cover and position being top.
HTML:
<div id="my-image"></div>
CSS:
#my-image {
width: 500px;
height: 300px;
background: url(your-image-location.jpg);
background-size: cover;
background-position: top;
}
Here's some examples. I think what you want would be #example3. On the other hand, you can also see this working example :)
.fit-image {
height: 500px;
width: 300px;
background: url("https://via.placeholder.com/1000x1000");
background-size: contain;
background-repeat: no-repeat;
}
.resize-image {
height: 500px;
width: auto;
}
.crop-image {
height: 500px;
width: 300px;
background: url("https://via.placeholder.com/1000x1000");
background-size: cover;
}
<h3>Make the image adapt to the size of the div </h3>
<div id="example1" class="fit-image">
</div>
<h3>Resize an image</h3>
<div id="example2">
<img src="https://via.placeholder.com/1000x1000" class="resize-image" />
</div>
<h3>Crop the image</h3>
<div id="example3" class="crop-image">
</div>
You can achieve this using the following two methods:
Method 1: with CSS and background-image
Ditch the img tag and put your desired image in the background-image property of a div like:
width:500px;
height:300px;
background-image:url('http://unsplash.it/1000/1000');
background-size: cover;
background-position:center;
You can see the working code here.
Method 2: using position:absolute
Put your img tag inside a div and crop out the rest of it using overflow:hidden like:
div{
width:500px;
height:300px;
overflow:hidden;
position:relative;
}
div img{
width:100%;
height: auto;
position:absolute;
left:0;
top: calc(50% - 250px);
}
And the working code.
You should add position,left and top if you want your picture to be vertically centered in the div.
The Problem
I have a user image, which I want to scale up and down with the window so that the height is always 100% and the image stays centered.
Example 1
This example scales as the window is resized, but the height doesn't stay at 100% and therefore gets cut off at the bottom.
.user {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0%;
}
CodePen Example 1
Example 2
This example works perfectly, apart from when the width of the browser window is smaller than the width of the image, the right-hand side is cut off.
I do want the image to be cropped, but I want the right and left sides to be cropped equally.
.user {
object-position: center;
display: block;
height: 100%;
margin-left: auto;
margin-right: auto;
}
CodePen Example 2
Visual Example
Here is an example of how I want the images to appear when the browser is scaled horizontally/vertically.
An idea is to use multiple background like this:
I used multiple div to illustrate with different sizes
body,
html {
height: 100vh;
margin: 0;
}
.bg-shine {
background-position: center;
background-repeat: no-repeat;
background-size: auto 100%, cover;
background-image: url("https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png"), url("https://t.motionelements.com/stock-video/design-elements/me1656952-blue-sunrise-background-hd-a0120-poster.jpg");
}
<div style="display: inline-block;">
<div class="bg-shine" style="height:100px;width:400px;">
</div>
<div class="bg-shine" style="height:100px;width:200px;">
</div>
</div>
<div style="display: inline-block;">
<div class="bg-shine" style="height:200px;width:100px;">
</div>
</div>
Update
To avoid using the image within CSS you can consider the inline style and a separate div for the user image so that you have almost the same markup as using an image tag:
body,
html {
height: 100vh;
margin: 0;
}
.bg-shine {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://t.motionelements.com/stock-video/design-elements/me1656952-blue-sunrise-background-hd-a0120-poster.jpg");
}
.bg-shine>div {
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
height:100%;
}
<div style="display: inline-block;">
<div class="bg-shine" style="height:100px;width:400px;">
<div style="background-image:url('https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png')"></div>
</div>
<div class="bg-shine" style="height:100px;width:200px;">
<div style="background-image:url('https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png')"></div>
</div>
</div>
<div style="display: inline-block;">
<div class="bg-shine" style="height:200px;width:100px;">
<div style="background-image:url('https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png')"></div>
</div>
</div>
I like your question! I approached it from a different angle, and tried to use background rather than img element. Please see the results here:
https://codepen.io/Varin/pen/xYqXQe
body, html {
height: 100vh;
margin: 0;
}
.bg-shine {
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("http://t.motionelements.com/stock-video/design-elements/me1656952-blue-sunrise-background-hd-a0120-poster.jpg");
position: relative;
}
.image {
padding:0;
margin:0;
width: 100%;
height:100%;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
background-image:url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png');
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;
}
<div class="bg-shine">
<div class="image">
</div>
</div>
I'm trying to create a CSS style that will take an image and scale it to best fit a letter box shaped div. The overflow will be cropped off. I'm close with this and it currently looks like this:
The original image is
I'd like to modify this so that the image is centered vertically in the div rather than top aligned. What am I missing here? My html is
.crop {
width: 670px;
height: 200px;
overflow: hidden;
}
.crop img {
width: 670px;
}
<div class='crop'>
<img src='http://cycle.travel/images/600/amsterdam_ccby_conor_luddy.jpg' />
</div>
I can't assume the height of the image to be the same everywhere I use this.
You can position the image relatively and then have the browser bump it upward 50% with top:-50%;:
.crop {
width: 670px;
height: 200px;
overflow: hidden;
}
.crop img {
width: 670px;
position:relative;
top:-50%;
}
<div class='crop'>
<img src='http://cycle.travel/images/600/amsterdam_ccby_conor_luddy.jpg' />
</div>
You could use the CSS background-position property.
https://www.w3schools.com/cssref/pr_background-position.asp
.crop {
width: 100%;
height: 200px;
overflow: hidden;
background-image: url('http://cycle.travel/images/600/amsterdam_ccby_conor_luddy.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div class='crop'></div>
I have managed to get the button image in place correctly but now the positioning is all off.
I want it to be centered as this image shows:
What I have so far is here: http://codepen.io/anon/pen/snjCu.
I am trying to position the image inside the center of its column so that it is correctly in place when the screen is larger.
Any help is appreciated.
<footer>
<div class="banner">
<div class="container-fluid">
<div id="footer-controls" class="text-center">
<div class="col-xs-4"><i class="fa fa-picture-o"></i>
<span>GALLERY</span>
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4"><i class="fa fa-file-text-o"></i>
<span>LEGAL</span>
</div>
</div>
</div>
</div>
</footer>
footer #footer-controls .orange-button {
background: url('http://i.imgur.com/lmB72tf.png') no-repeat;
width: 215px;
height: 210px;
background-size: 100%;
position: absolute;;
top: -50px
}
You can adjust the position of the image with a CSS transform
Codepen Demo
footer #footer-controls .orange-button {
background: url('http://i.imgur.com/lmB72tf.png') no-repeat;
width: 215px;
height: 210px;
background-size: 100%;
position: absolute;
top: -50px;
left:50%; /* push the image half-way over */
transform:translateX(-50%); /* bring it back half its own width */
/* or margin-left: -50% of image width */
}
Although not desirable, I've found that giving the column and the orange-button fixed width styles will solve this issue.
.orange-button {
background-image: url('http://i.imgur.com/lmB72tf.png');
background-repeat: no-repeat;
background-size: 215px 210px;
display:inline-block;
width: 215px;
height: 210px;
Usually you can center background images with:
background-position: center center;
This is actually the default value.
However your container with the image is not centered.
You may wanna consider repositioning the container and trying somthing else than position: absolute;