I have to fix a blue colored 'lock' image to the outside of the container like below:
So far I have achieved this below:
I am setting this image as background-image of the container and the CSS for the container I wrote is:
.container{
margin: 0 auto;
max-width: 620px;
background-color: $white;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
object-fit: contain;
margin-top: 30px;
padding: 40px;
min-height: 100px;
object-fit: contain;
overflow: hidden;
border-radius: 5px;
background-repeat: no-repeat;
background-image: url("../lock.svg");
}
<body>
<div class="container">
</div>
</body>
</html>
If I give background-position, the image is hiding behind the container, like this
Please advice how to achieve this? Is my approach correct?
If you want to set your lock button depending on the container, you have to set a relative position to the container and an absolute position to the button.
Then you set top and right property to the button depending on the container.
.container {
position: relative;
}
.button {
position: absolute;
top: some px;
right: some px;
}
Related
I want an Image to disappear and another to appear at the same place with same size on hover. Therefor I hide the orignal image and create a background image instead. The problem: The background image does not auto scale. If I dont set a specific height it has no height (means no image visible).
You can see the problem here if you scroll down a bit: https://www.ergotopia.de/
My current CSS:
.bestsellerkissen:hover .hoverkissen{
background: url(example.jpg) no-repeat center;
height: 240px;
background-size: 100% 100%;
display: block;
border-radius: 4px 4px 0 0;
}
.bestsellerkissen:hover img{display:none;}
Use opacity instead of display on image. Then you don't need to set height:
.bestsellerkissen:hover .hoverkissen{
background: url(example.jpg) no-repeat center;
background-size: 100% 100%;
display: block;
border-radius: 4px 4px 0 0;
}
.bestsellerkissen:hover img{
opacity: 0;
}
This question already has answers here:
Set size on background image with CSS?
(18 answers)
Closed 6 years ago.
I've tried to look at other answers but no help. My background is dynamic so the size of images will change, so I need to keep aspect ratio so the whole image is seen. here's my CSS:
.image_submit_div {
border: 1px solid #ccc;
display: inline-block;
padding: 20px 50px;
width: 55%;
height: 320px;
cursor: pointer;
background: url('something.jpg'); /* this changes */
margin: 0 0 25px;
}
html
<label for="id_image" class="image_submit_div">
At the moment depending on the image, sometimes alot of it is cut off. I want the image to be downsized so it can be seen fully. Any idea?
Use background-size: cover; to cover the entire element, while maintaining the aspect ratio:
.background-1,
.background-2,
.background-3 {
/* Set the background image, size, and position. */
background-image: url('//via.placeholder.com/350x150');
background-size: cover;
background-position: center;
/* Or, use the background shortcut. */
background: url('//via.placeholder.com/350x150') center/cover;
margin: 20px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.background-1 {
width: 300px;
height: 200px;
}
.background-2 {
width: 200px;
height: 50px;
}
.background-3 {
width: 100px;
height: 200px;
}
<div class="background-1"></div>
<div class="background-2"></div>
<div class="background-3"></div>
If you want to display the entire image, while maintaining the aspect ratio, use background-size: contain; instead:
.background-1,
.background-2,
.background-3 {
/* Set the background image, size, position, repeat, and color. */
background-image: url('//via.placeholder.com/350x150');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-color: #fbfbfb;
/* Or, use the background shortcut. */
background: #fbfbfb url('//via.placeholder.com/350x150') no-repeat center/contain;
margin: 20px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.background-1 {
width: 300px;
height: 200px;
}
.background-2 {
width: 200px;
height: 50px;
}
.background-3 {
width: 100px;
height: 200px;
}
<div class="background-1"></div>
<div class="background-2"></div>
<div class="background-3"></div>
Use background-size:contain; if you want to see the whole image and stretch it to the full width or height (depends on the aspect ratio of the image) of the div.
But if you want to cover the whole div with the background-image and don't mind the image getting cropped then use background-size:cover; instead.
.image_submit_div {
border: 1px solid #ccc;
display: inline-block;
padding: 20px 50px;
width: 55%;
height: 320px;
cursor: pointer;
background: url('http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg'); /* this changes */
margin: 0 0 25px;
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}
<label for="id_image" class="image_submit_div">
I have this code:
background:url("someimage.gif") repeat-y 50px right;
the problem here is that I need the background to start 50px from top so there is a 50px space between the image and the top but that wont happen. I know very well that the image would position right if not repeated but I need it to be repeated vertically. Is there any way around? How can I achieve that space between top and the start of the repeated image?
There a way to fake it if there is nothing in that top space.
Apply 50px (or your chosen value) of padding-top to the div.
The apply the background as usual (repeat-y) but clip the background to the content-boxof the div.
Background-clip # MDN
div {
background: url(http://placekitten.com/50/50) repeat-y;
padding-top: 50px;
height: 50vh;
background-clip: content-box;
width:50vw;
margin:2em auto;
border:1px solid red;
}
<div></div>
OR
Use a position pseudo-element suitably sized/positioned
div {
height: 50vh;
width: 50vw;
margin: 2em auto;
border: 1px solid red;
position: relative;
}
div:before {
content: '';
position: absolute;
width: 100%;
height: calc(100% - 50px);
background: url(http://placekitten.com/50/50) repeat-y;
top: 50px;
left: 0;
}
<div></div>
UPDATE
Here is a jsFiddle with the image and hover event.
I have a sprite image containing 4 "button" images each 30px x 60px - so the total image size is 60px x 120px. Each button is displayed using its proper background offset in the css as shown below.
I want to increase the clickable area of each button, but if I increase padding for the image, more of the image will show than contained in the defined width and height. Can I increase padding or use some other method where the image is still constrained to the amount in height and width?
I do have a containing a tag. I am able to increase the clicking area of the buttons by padding the a tag, but I still need to give feedback via the img hover that the mouse is in the clickable area.
img.prev{
background:url(../img/buttons.gif) no-repeat 0px 0px scroll;
width: 30px;
height: 60px;
}
img.prev:hover{
background-position: 0px -60px;
}
img.next{
background:url(../img/buttons.gif) no-repeat -30px 0px scroll;
width: 30px;
height: 60px;
}
img.next:hover{
background-position: -30px -60px;
}
OK - I think I've got an answer. It seems I can increase the padding of the containing a tag to increase the clicking area and then use the hover event of the a tag to set the background for the img. The following css is for the containing a tags.
Please let me know if there is a better or another solution.
#a-next{
padding-left: 30px;
padding-bottom: 200px;
}
#a-prev{
padding-right: 30px;
padding-bottom: 200px;
}
#a-next:hover > img{
background-position: -30px -60px;
}
#a-prev:hover > img{
background-position: 0px -60px;
}
the pseudo will do . https://jsfiddle.net/mgggf5vo/6/
catch hover from the link, so it includes the pseudo area.
Te correct attribute for links is title, not alt.
a {
display: inline-block;
position: relative;
vertical-align: middle;
cursor:pointer;/* href is missing */
}
a:before {/* give it any size */
content: '';
position: absolute;
height: 60px;
width: 50px;
margin-left: 29px;
}
a[title="next"]:before {
right: 29px;
}
img.prev {
background: url(http://www.waldorfteacherresources.com/img/slideshow-buttons-large.gif) no-repeat 0px 0px scroll;
width: 30px;
height: 60px;
padding: 0;
}
a:hover img.prev {
background-position: 0px -60px;
}
img.next {
background: url(http://www.waldorfteacherresources.com/img/slideshow-buttons-large.gif) no-repeat -30px 0px scroll;
width: 30px;
height: 60px;
padding: 0;
}
a:hover img.next {
background-position: -30px -60px;
}
<div>
<a title="prev">
<img src="http://www.waldorfteacherresources.com/img/blank.gif" alt="prev" class="prev">
</a>
Something Here
<a title="next">
<img src="http://www.waldorfteacherresources.com/img/blank.gif" alt="next" class="next">
</a>
</div>
I want to create an element in css and keep it at a constant right spacing from the main content.
for example:-
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
width: 924px;
height: 580px;
}
now I am creating an image that needs to be at a constant distance from the main content, and on its right hand side.
ie. say 100px from main content at all times, no matter the size of window:-
.NewElement {
width: 78px;
height: 70px;
position: fixed;
bottom: 550px;
right: .main.width() + 100px; <--- how do I represent this??
display: none;
text-indent: -9999px;
background: url('../xxx.png') no-repeat;
background-color: #000;
}
right: .main.width() + 100px; <--- how do I represent this correctly??
Place 'NewElement' within the 'main' DIV (assuming these are DIVs) and set the margin-left:100px, so it will always be relative to that main DIV.
<div class="main">
<div class="NewElement"></div>
</div>
Here's a fiddle.
You would have to use javascript or jquery to do this:
var width = $('.main').css('width');
$('.NewElement').css('width',width+100);