How do I make my background image in the body not to crop when it resizes the window? The site it responsive and the image dosen't resize it juts crops off bits of it. I tried using position:fixed but it didn't work. What code do you need to help me?
This it the code for that wrapper:
.body-wrapper {
background-image: url('http://promegaekonomi.se/wp-content/uploads/2014/09/82.png') !important;
background-repeat: no-repeat;
background-size:100% auto;
}
http://jsfiddle.net/yg17acL0/
Try to use the img tag inside the div.
.responsive {
max-width: 100%;
height: auto;
}
Try this CSS: background-size:contain
Working LINK
(Updated)
Related
I have the following snippet for the image container:
<div class="image-container">
<img src="/images/xyz.jpg">
</div>
.image-container {
width:415px;
height:552px;
}
The div's size is fixed and can't be changed. Images can be different sizes. At this moment, I have the following style for the image:
width:100%;
height: auto;
This may show a lot of empty space within the container for most images because their sizes do not math the 415/552 ratio.
Now I need to make images cover the whole div space. If I make the image the background of the container, this is what I would do:
.image-container {
width:415px;
height:552px;
background: url("/images/xyz.jpg") no-repeat center center / cover;
}
However, the images can't be background images due to a few reasons. How can I use CSS to enlarge images to achieve the same results as if they were used as background images through the above CSS. When enlarged, the image shouldn't be distorted.
Because you have a fixed width and height on your containing div, you can use absolute positioning on the image to make it take up the full height and width, for example:
.image-container {
position: relative;
width:415px;
height:552px;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
Edit: The above css worked after some changes. See fiddle: https://jsfiddle.net/rezvj2uw/1/ for an example
Try with:
.image-container {
width:415px;
height:552px;
background-image: url("/images/xyz.jpg");
background-size: 100% 100%;
}
Jsfiddle:
https://jsfiddle.net/MartinGK/0odgxjh3/3/
Jsfiddle second solution:
https://jsfiddle.net/MartinGK/0odgxjh3/9/
other solution:
https://jsfiddle.net/MartinGK/0odgxjh3/12/
At this page, around viewport width 870px, there is a gap that appears underneath each .program-image img:
How do I ensure each .program-image img is the height of each .program, or each .program is the height of each .program-image img?
Help appreciated.
As the image height is dependant on its width, a gap is created because of this rule. To avoid this, I commonly add the image as a background image of a div, setting the background-size to cover (which makes the image cover the entire div).
First, remove the image tag and place the background image within the program-image div.
<div class="program">
<div class="program-image" style="background-image:url('http://vmpersonal.com/wp-content/uploads/2017/02/program-pregnancy.jpg');">
...
Then I would go ahead to add the following css:
.program-image {
height: 90px; // Or whatever height needed
width: 45.23809523%;
float: left;
max-height: auto;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
This sets the height of the div as it will not take into account the height dimension of the image.
To make sure the image doesn't overflow over the program element. Add the following:
.program {
overflow: hidden;
}
Below is an example of how it looks (Second program is of how it currently is, example excludes background-position:center apologies).
I hope this helps.
<img> tag is inline-block element so you always need to define vertical-align for it. else make it block.
img {
vertical-align: top;
}
or use this
img {
display: block;
}
Maybe try:
height: 100%;
or
min-height: 100%;
on the image selector.
I am using bootstrap 3 i added background image in body its not taking full image, image is cropping below.please help me anyone. i am trying very long back. how to fix full background image in all devices without scroll.
background-repeat: no-repeat;
min-height:768px;
height:auto;
background-attachment: scroll;
background-size: 100% auto;
background-image: url("../images/login/****.jpg");
Since your code is in the body element, if you want a full screen background-image, you can try this
body, html {
height: 100%;
}
I am still trying to get the hang of responsive web design.
I am not able to get the header images to scale as the browser gets smaller.
This is the site,
http://instreamenergy.com/strategic-partnerships/
if I try to make the .header-image #header #title-area height:100% or anything else it just reverts to 20px or something and is stuck there.
Any tips would be awesome!
thanks
I think you're looking for the CSS3 property, background-size
since your image is a background image for a DIV.
Stretch and scale CSS background
http://caniuse.com/background-img-opts
If you were using an image tag, <img> you could do this:
img {
max-width: 100%;
}
You also need to get rid of some of the cruft in your CSS for #title-area. Doesn't look like it needs to be floated: left; or have overflow: hidden;. Removed width, changed height to min-height. no-repeat added to background.
I would update it to:
#title-area {
background: url(your-image.jpg) no-repeat;
padding-left: 0;
min-height: 386px;
float: none;
overflow: visible;
background-size: 100% auto;
}
My problem is that my background to my website always turns white whenever I scroll down.
<div align="center"><img src="bakrund.jpg" class="bg"></div>
.bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -5000;
}
You should use the background attribute of body in your css to define the background image, like this:
body
{
background-image:url('bakrund.jpg');
}
Don't try to hack it in using a div.
If you're trying to set a background image do this
<style>body { background-image:url("YOURURL"); } </style>
It's much easier and is a lot more professional.
This isn't the background to your website - it's the background to a div element... If you're wanting to set the background of your page, you need to change the CSS in your element.
You have to set the position to fixed.
Try:
body
{
background-image:url('bakrund.jpg');
background-size: cover;
background-repeat: no-repeat;
}
Did you try setting your height to 100vh?
html {
height: 100vh;
}