This question already has answers here:
Fit background image to div
(8 answers)
Closed 3 years ago.
Why won't it show the whole original picture?
.test {
background: url("http://i27.tinypic.com/28ktoh.jpg") no-repeat;
}
<div class="test"></div>
Problem is that is doesn't show anything, if you type something in the div it shows a little bit of the image. I want it to include the full picture.
Here is the working demo
You need to specify the height
.test {
background: url("http://i27.tinypic.com/28ktoh.jpg") no-repeat;
overflow:auto;
height:500px;
}
Set the height of the div. The div will not be higher than you tell it to be or higher than it needs to be.
Related
This question already has answers here:
Why does styling the background of the body element affect the entire screen?
(7 answers)
Giving background-color to body applying whole page. Why?
(6 answers)
Closed 1 year ago.
Can anyone explain why the background color is filling the entire screen even when body is having zero height?
.bgcolor {
background-color : red;
height:0;
}
<body class="bgcolor"></body>
body tag is always taking the whole document's body, so if you want to give background with limited height then put one DIV inside the body tag and then give specific height, then it will work fine.
so for the solution, please give background color to HTML div as well.
html {
background-color: #ffffff;
}
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 1 year ago.
I'm totally beginner, but I really don't know why there is a space between the bottom of my image and my wrap div border!
What's this???
<div class="myItem">
<img src="https://picsum.photos/100">
</div>
.myItem {
border: 5px solid blue;
background: tomato;
}
https://jsfiddle.net/g7rvm0ub/1/
Add display:block to img will remove the bottom space, another approach is add vertical-align:middle to img.
I'm not sure why the div is 5 pixels bigger than the the image, as I am a bit of a beginner as well, but one way to fix it is to decrease the size of the div using height: 100px.
This question already has answers here:
Can I ellipse a clipping mask on the bottom only?
(1 answer)
Can I create a div with a Curved bottom?
(5 answers)
Closed 3 years ago.
I have a big problem finding a solution to this problem.
I have seen many samples of creating a container with curved bottom border exactly as I want but they all have plain or gradient background-color.
I need a container with a background-image and a curved bottom border and a bottom border color like you see in the picture.
The problem with all samples which I have seen is that the background-image gets distored if I use the common way of applying the bottom border using CSS.
This is a plain and simple html structure so if you want to help, you have a reference.
<div class="wrapper" style="background-image:url('images/someimage.jpg');">
<p>some text on the background image</p>
A button
</div>
Thanks in advance.
Have a look into using clip-path, it's not a perfect solution and will require some tweaking of the numbers to get it to look how you wish.
See the below example:
main {
height:500px;
background-color:#ccc;
}
.wrapper {
background-image:url('https://picsum.photos/id/1039/1280/720');
background-repeat:no-repeat;
background-position:center;
height:350px;
clip-path: ellipse(100% 60% at 50% 40%);
}
<main>
<div class="wrapper"></div>
<h2>This is some more content</h2>
</main>
JSFiddle
More Information can be found: CSS-Tricks
This question already has answers here:
CSS Image size, how to fill, but not stretch?
(18 answers)
Closed 4 years ago.
really basic question, but I do marketing for a client so don't know too much besides basics HTML, CSS.
I've got an image slider in the URL below, what should I do so the image occupies the full space of the container (as there are bars on either side of the image). Do I just remove the padding or is there something more efficient to put in the stylesheet. Thanks heaps for your help
https://www.vibrantrealestate.com.au/property/outstanding-warehouse-space-style-on-the-citys-edge/
Try to add this rule in your CSS file :
.inspiry_property_portrait_slider .flex-viewport ul li a img{
width: 100% !important;
}
Here is the result :
Use the following css
div
{
background-image:url(http://placekitten.com/200/300);
width:300px;
height:100px;
background-repeat:no-repeat;
background-size: cover;
}
<div>a</div>
This question already has answers here:
Possible to style the css3 resize function?
(2 answers)
Closed 4 years ago.
How do you change resize icon of an element with resize style applied?
for example:
.resize{
background-color:red;
width:300px;
height:220px;
resize:horizontal;
overflow: auto;
}
https://codepen.io/anon/pen/WOyQVq
See those 2 black lines at the bottom right? How do you change that icon?
I don't think it is possible to change that controller symbol. In your case, I can suggest this solution. Add background color red and it will disappear
.resize::-webkit-resizer {
background-color: red;
}