I have an MVC app with an image in the footer. My CSS currently looks as follows:
footer {
position:absolute;
bottom:-150px; /* This puts the footer 100px below the bottom of the page*/
width:70%;
height: 170px; /* Height of the footer */
background-image: url("/Images/Footer/Footer3.png");
background-repeat: no-repeat;
background-position: center;
}
The problem I have is that the image is not being resized correctly to fit within the width and height of the container. Parts of the image are cut off. And when I resize the browser viewport (shrink it), more of the image is cut off. The image size is 1000x175 if that helps. I would like the image to be responsive and be auto resized correctly within the container.
did you try
background-size: 100% 100%;
Related
I'm making a website and using a background image in a div.
The background image itself is using "cover" as its size. The div itself has a max width, as does its parent div.
However, when I test on larger screens, it continues to stretch. The divs themselves do not, they stay bounded at their upper levels, but the image continues to grow as the window expands.
I've tried using a width of 100%, which has the same problem. I've tried limiting the img.bg size, I've tried changing the background-size to cover contain and 100% cover, but nothing seems to make a difference.
Here's where it's at right now. On 1920x1080 browsers, the image will stretch all the way to 1920, even though I can only see 1300px of it.
img.bg {
max-width: 1300px;
}
.parallax {
background-image: url("images/headerimage2.jpg");
height: 350px;
max-width: 1300px;
min-width: 650px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
The HTML where it's going I invoke with just this:
<div class="parallax"></div>
I have a parallax class which contains the image as well. I tried to make the image responsive by setting the image width to 100%, but its just not working.
.parallax1 {
/* The image used */
background-image: url('Images/FloralPurple.png');
/* Full height and width */
height: 100%;
width:100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
and the following is the HTML code:-
<div style="height:230px;background-color:#001332;font-size:20px; color: #ffffff; padding: 18px">
Some text which defines the image</div>
I tried adding the image tag inside of my div, but still, nothing got changed.
Thank you
The size of your background image is defined by the background-size css property.
When set to cover the image will scale in order to fill the div. You can set the background size to the following values:
cover As described the div gets covered. The image gets scaled and cropped.
contain The image is always full completely visible and gets scaled in order to be completely visible.
100px 50px A fixed size. The image gets streched.
50% 100% A percentage. The image gets stretched.
Example:
background-size: 100%;
The image would always fill the div. But get stretched in order to do so.
I have a status menu as a header on certain pages on my site which works fine on narrower viewports but on larger ones the background image is stretched too wide and becomes too narrow so the status menu dissapears into the white body.
How can I stop the background image from going too narrow when the viewports are made wider?
Trying a min-height in css didn't seem to solve the issue for some reason.
with the html:
<header class="banner-header bg-light">
</header
and the css
.banner-header {
width: 100%;
background: url("../images/navbar-header.svg") no-repeat center bottom;
background-size: cover;
min-height: 180px; }
Working fine on smaller viewports
Goes to narrow on larger viewports
background image without status menu
Try to control background-size manually on larger screens with #media
More info on #media here
More info on background-size here
For example:
.banner-header {
width: 100%;
background: url("../images/navbar-header.svg") no-repeat center bottom;
background-size: cover;
min-height: 180px;
}
#media (min-width:1200px) {
.banner-header {
background-size: 1600px 300px;
}
}
1600px is the width and 300px is the height. Those are placeholder values, pick what best suits your needs.
I hope this will help you!
I am trying to create a full width parallax site and having an issue getting background images for sections to scale properly.
How would I get a full width image in desktop view to shrink down and contain a 100% width but the height shrink and image contain proportions to fit the width? The problem I am having is I can't set a background container to have a max height.
I'm really looking for a way for the height to shrink from 100% down when the viewport keeps getting smaller so that the focus of the picture isn't lost and maintains proportions just like a responsive image would.
I have tried background-size: contain as well but even then the container has to a have a fixed height which has to change while the background image shrinks because otherwise the image won't be fluid with the container.
#main-photo {
background-image: url("images/main.jpg");
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin-top: 130px;
height: 100%;
width: 100%;
}
If I remove the height obviously nothing is rendered in the browser and max-height doesn't work like it would for responsive images.
Can someone please help me with this effect?
You need to use background-size: contain instead of background-size: cover. Demo here
#main-photo {
background-image: url('images/main.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
height: 100%;
width: 100%;
}
I found a solution using a padding trick that adds height and allows the image to maintain its aspect ratio. Thank You!
Just add
padding-bottom: %here
You won't need to specify a height for the background image only a 100% width.
Here is a great article. http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
My header is a picture, so I can't use percentages. it has to be of fixed width and height.
with that, when I resize the window and make it smaller, the content of the page fits to the correct size, but the header stays the same (of course) thus, it overflows beyond the page's borders and adds a scroll bar at the bottom.
Can I cut, or crop, the header so its height is always fixed, and the width corresponds automatically with the fixed height, but that the overflow of the header out of the page's border's is hidden?
I can use
body {
overflow-x:hidden;
}
but I fill that's cheating.
any ideas?
thanks!
I think this is what you're after... Make your header a div that fits 100% width x whatever height you require. Then set that div to have a background image and overflow: hidden;. That will always resize to fit your page width with no scroll bars.
div{
display: block;
position: relative;
width: 100%;
height: 200px; /* Set your height here */
overflow: hidden;
background: url(http://www.f-covers.com/cover/beach-fun-vintage-photography-facebook-cover-timeline-banner-for-fb.jpg) no-repeat center center;
}
This keeps the background image dimensions at the original size. If, however, you want the image to stretch to fit the div, add this to the css;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
Here's a working fiddle: http://jsfiddle.net/AWMQ6/
Enjoy!