What I'm trying to do is make the background image's height change depending on the amount of text.
ex. image height is 100px and the text within that div is 150px. How would I extend the images height to 150px (or more) depending on the amount of text that was entered?
HTML:
<div class="scroll-bg">
<img src="img/scroll_top.gif" style="position:absolute" />
<div class="scroll-bg-img">
<div class="scroll-content">
<center><img src="img/recent_news.gif" /></center>
<div style="width:100%;margin-top:15px">
<div style="margin-top:10px;color:black">
<p>TEXT TEXT TEXT TEXT MORE TEXT</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.scroll-bg {
width: 810px;
float: right;
}
.scroll-content {
width: 765px;
margin-left: 15px;
word-wrap: break-word;
}
.scroll-bg-img {
background-image: url(img/scroll_bg.gif);
background-repeat: repeat-y;
z-index: 1;
width: 795px;
height: 1000px;
margin-top: 40px;
margin-left: 7px;
padding-top: 15px;
}
background-repeat: no-repeat;
background-size: 100% 100%;
Will cause the background to stretch to fit the container, but that won't be sized to the text as long as you have explicit height and width set on .scroll-bg-img
If you remove those, and let it be sized to the height of the text, the background image will stretch to fit.
You could use background-size : cover in your .scroll-bg-img CSS. However, not all browsers will support that. Just look it up and see what it's all about.
EDIT:
.scroll-bg-image {
background-image : url("img/scroll_bg.gif");
background-position : center center;
background-repeat : no-repeat;
background-size : cover;
}
Update the background properties as such, and see how that does for you.
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 use an image as a background image, background-image: url(), and I also use this image placed inside <img src="">
It looks like the height of src image is shorter the height of the background image.
If I set a height for src image equals height of the background image, the src image will be disturbed.
What CSS properties should I set to make src image have the same height as background image, but it won't disturb the src image? Please note: I need to adjust ONLY in src image, not background image.
Please take a look at my sample in jsfiddle
HTML
<p>
This is background image
</p>
<div class="imageBG">
</div>
<p>
Below is a front image. Its height looks like less than the height in background image.
</p>
<div>
<img src="https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg">
</div>
CSS
.imageBG {
background-image: url("https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 353px;
}
img {
width: 100%;
/* height: 353px; */
}
Please note: Because the image I use is long, I have to set width: 100% for img. If I don't set that, a navigation bar will show at the bottom of the browser.
Consider object-fit and object-position
.imageBG {
background-image: url("https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 353px;
}
img {
width: 100%;
height: 353px;
object-fit:cover;
object-position:center;
display:block; /*to make it behave as div and avoir whitespace issue*/
}
<p>
This is background image
</p>
<div class="imageBG">
</div>
<p>
Below is a front image. Its height looks like less than the height in background image.
</p>
<div>
<img src="https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg">
</div>
Related for more details: Object-fit On A Canvas Element
Add position:fixed in CSS class. Then you can adjust the height.
.imageBG {
background-image: url("https://library.danahall.org/wp-
content/uploads/2019/04/2560px-Bufo_periglenes2.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 353px;
position:fixed;
}
img {
width: 100%;
height: 353px;
}
Just add a class to the img containing div and set its height to 353px.
.image-container {
height: 353px;
}
img {
height: 100%;
width: 100%
}
As i see you src image is right and what you background image is doing is scaling the image to make it fit 100% and also your 353px, so your src image height was'nt wrong, it was the backgorund
if you use math and right proportions you would get this:
height: 252px; // this is the right proportions
right math one
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.
I want to give background size as 636px and 1140px to background image instead of div. as I don't want the scroll of div because of its height.
If I give height and width to the parent div then I get background-image but when i give to background-size then it doesn't work.
.custom_app_phone_div {
margin: 5% auto 0 auto;
height:auto;
width:auto;
}
.custom_app_phone_div .custom_app_phone_bg_image_div {
background: url("http://i.imgur.com/jIE5Bf7.png") no-repeat;
background-position-x: center;
background-size:636px 1140px;;
width: 100%;
height: 100%;
padding: 10px;
}
<div class="custom_app_phone_div">
<div class="custom_app_phone_bg_image_div">
</div>
</div>
Any help would be great.
Thank you.
If not defined the div's height will be determined by the content's height.
What you could do is set the min-heigh property.
I'm not sure what you are asking for. But if you want to change the background image size without changing the div size you should either use an image <img/> or use a helper div as background (see example below).
Now, if you want to get rid of the scrolling bar you can set the parent container .custom_app_phone_div a height/width and set overflow: hidden.
Can you try this and let us know if this works for you?
.custom_app_phone_div {
margin: 5% auto 0 auto;
height:auto;
width:auto;
}
.custom_app_phone_div .bgHelper{
background: url("http://i.imgur.com/jIE5Bf7.png") no-repeat;
background-position-x: center;
background-size: contain;
height: 1140px;
width: 636px;
}
.custom_app_phone_div .custom_app_phone_bg_image_div {
}
<div class="custom_app_phone_div">
<div class="bgHelper"></div>
<div class="custom_app_phone_bg_image_div">
</div>
</div>
Set the size of background images to 636px x 1140px using any image editor and then use:
background: url("http://i.imgur.com/jIE5Bf7.png") center no-repeat;
Working fiddle here
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>