Avoid Background Image From Stretching - css

I put background-image on my site but the result image is stretched.
How I can avoid it?
CSS:
background: rgb(236, 242, 196) url(../images/border.png) no-repeat;
background-size: 100% 100%;
margin-left: auto;
background: rgb(236, 242, 196);
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 75px;
How I can avoid stretched image width and height and make it auto width and height.


If I understood correctly your problem, you should use:
background-size: cover;

Related

CSS:Fix image outside the body of container

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;
}

CSS Image position/focus

I'm building a website and the image I want to put in the as background I can't put it into the position I want.
I want the 'focus' of the image on the web page to be a few px up to the centre of the image. The width I can see it all, but the height no.
The image resolution is '5760x3840px'.
So, I have this piece of css code for the image's settings.
.topwidget{
max-width: 100%;
height: auto;
background-image: url(../images/welcome_banner_bg.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: bottom 1000px;
margin-bottom: 20px;
padding: 50px 0;
}

Try this
.topwidget{
max-width: 100%;
height: auto;
background-image: url(../images/welcome_banner_bg.jpg);
background-repeat: no-repeat;
background-size: 100%;
**background-position: center 10px;**
margin-bottom: 20px;
padding: 50px 0;
}

EO pdf background image

We are using EO.pdf 16, we have css for body tag
body {
background-image: url(../images/background.jpg);
background-repeat: repeat-y;
background-position: center center;
/*background-size: cover;*/
height: 98%;
width:100%;
padding: 0px !important;
margin: 0px !important;
}
We want the background-image on the browser but not in the PDF.
Thanks in advance,
Anjan

This is fixed in version 16.2.9 of EO.

Header banner won't resize on mobile phone/small tablet

Because of the height/design of this company's logo we created an header image that includes it. That header image is located here:
http://tinyurl.com/oqkpvff
Anyone know how to make that header image resize automatically for mobile/smaller tablet?
#title-container {
background-image: url("url of our image is here") !important;
background-position: left top !important;
background-repeat: no-repeat;
color: #FFFFFF;
display: block;
height: 250px;
max-width: 100% !important;
position: relative;
}
I did try height: auto but that didn't work either.

You can use the background-size: contain;
Demo
#title-container {
background-image: url("http://tinyurl.com/oqkpvff");
background-position: left top !important;
background-repeat: no-repeat;
color: #FFFFFF;
display: block;
height: 250px;
max-width: 100% !important;
position: relative;
background-size: contain;
}
contain
This keyword specifies that the background image should be scaled to be as large as possible >while ensuring both its dimensions
are less than or equal to the corresponding dimensions of the
background positioning area.

multi background-image don't work with position

#example1 {width: 500px;
height: 250px;
background-image: url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png),
url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png);
background-position: 20px 10px, 100px 250px;
background-repeat: no-repeat;
}​
Background-image with fixed background-position don't work Demo

You are having same value for height and last number in background position. Change to this and see.
background-position: 20px 10px, 100px 100px;
Demo

Write it as -
#example1 {
width: 500px;
height: 250px;
background: url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png) no-repeat 20px 10px, url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png) no-repeat 200px 50px;
}
Demo
Your code also works but the problem with your code is that you are setting top position of the second image at 250px; where the height of your container is 250px; That's why it's not visible :)

Resources