I am using foundation 4 as a framework for my personal site (not 100% portfolio site, more as advertising myself as a freelancer) and I have a contact box with a background image set and these CSS styles applied:
#contact-box {width: 1052px;
height: 400px;
background-image: url('../images/contact-bg.png');
margin-top: 150px;}
I want to make it so it scales down when you shrink the browser, but instead it just gives me a horizontal scrollbar and doesn't scale at all and I know it's because of the 1052px width set... So how would I code this out so it's responsive? If I use max width and max height it breaks the div and removes its bg image. The contact box has a contact form in it (which is responsive) along with a phone number, email, and 3 social icons.
I wanted to just leave a comment but I don't seem to have the option..
I don't know if this is the answer you want but I usually make background images scale to the window size with code like this:
width: 100%;
height: 400px;
background-image: url('../images/contact-bg.png');
background-size: 100%;
margin-top: 150px;
You can use that css code for div tags and the page body, although in my experimentation the width and height values are not necessary for the page body. Doing it this way will maintain the aspect ratio of your background image and should allow it to scale with the window.
Since the above example maintains the aspect ratio, the image will scale vertically to the point where it exceeds the size of the container it is in and will appear to be cut off on the bottom. Alternatively you can use:
width: 100%;
height: 400px;
background-image: url('../images/contact-bg.png');
background-size: 100% 400px;
margin-top: 150px;
The second argument for the background-size element will make sure the image never scales vertically at all. This method however will result in your background image being horizontally stretched whenever the window's width exceeds the aspect preserved width of the image you are using.
Hope this helps! :)
You can try this and modify it your according source taken from here http://css-tricks.com/perfect-full-page-background-image/
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
and this is another method for doing this
#contact-box{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Set the width of #contact-box to width: 100%.
Related
I seem to be having some issues with an image. It's not sticking to the same width when I modify the max height, like below.
.lead-pic img {
background-size: cover;
margin-left: -150px;
max-height: 1000px;
What I'm trying to achieve is an image that covers both sides of the page and also reduce the height of the image at the same time. I'm not sure if there is some code that locks the width in place when you change the height pixels.
Here is a screenshot of what I mean when I change the height:
This is on wordpress within a staging environment so I can't provide a URL to the website. Any ideas?
you can set only one property to image either height or width. If you set both the image will blur, aspect ratio is not same as original image. Try to wrap image in one element set property to that wraping element and assign max-width: 100%; to image tag.
If I am not wrong on this one, if you use the background-size property it will not be aplied to your image which is coded in your HTML file. For this you need to ad a background: url(link/to/image.png)
.lead-pic {
background: url(link/to/image.png);
background-position: top;
background-size: cover;
margin-left: -150px;
max-height: 1000px;
Example:
.lead-pic {
background: url(http://lorempixel.com/400/200);
background-position: top;
background-size: cover;
height: 300px;
width: 450px;
}
<div class=lead-pic></div>
Hope this helps. And, correct me if I'm wrong :).
If you want it as a background and to automatically adjust size, try making the image position fixed and putting your content in div with position:absolute. Use vh and vw to set the size. vh and vw are percentages of the current viewport height (vh) or width (vw).
i.e.: height:100vh = 100% of the current viewport height.
.lead-pic {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
.content-example {
position: absolute;
top: 0;
left: 0;
width: 100vh;
height: 100vh;
}
<img class="lead-pic" src="https://s-media-cache-ak0.pinimg.com/736x/7f/d7/ab/7fd7ab72321777f4413ae3485622896c.jpg" />
<div class="content-example">
All of your content can go here.
</div>
Keep in mind that this will stretch the image disregarding the aspect ratio and will degrade the quality. If you want to keep the quality of the image, set it to 100vh/vw in the direction of the shortest dimension (in this case, width:100vw). The following snippet expands the image width, only:
ADDED AFTER CORRESPONDENCE, BELOW
This will get you the div like I understand you want it. If you want to add parallax functionality, I'd suggest searching for "Pure CSS parallax"
.lead-pic-container
{
max-height:200px;
height:200px;
width:100vw;
overflow:none;
background-size:cover;
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7f/d7/ab/7fd7ab72321777f4413ae3485622896c.jpg');
background-position: 50% -325.828px;
}
<br><br><br>
<div class="lead-pic-container"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Solved.
With combined information from stack overflow users, here is the answer:
.lead-pic {
background-image: url(http://www.cutepinkboutique.com/staging/wp-content/uploads/2017/06/pexels-photo-220436-1.jpeg);
background-size: cover;
height: 900px;
width: 2000px;
margin-left: -220px;
background-position: 50% center;
}
.move-pic {
padding: 120px;
height: 1000px;
width: 100%;
}
Im trying to design a home page for my website where im using a div to show an illustration.
i want to use an image with the div that covers the entire size of the div.
the image dimensions are 1920x850.
this is the code for the div
<div class="custom-col col-md-12 col-sm-12" id="widget-static-block-1"></div>
the css:
#widget-static-block-1 {
background: url({{ d_banner1.jpg' | asset_url }});
width:100%; }
i want to be able to view the image on different screen sizes , but the it always gets cut off (either height or width)
ive tried playing around with height and width attributes to no luck.
If i set height:850px; then obviously it shows perfectly on a 1080p sceen but gets cut off on a smaller screen.
One thing i want to be clear about is that i want the entire image to show at all times at all browser sizes, i dont want it to be cut off via height or width.
Try background-size: 100% 100% or background-size: 100vw 100vh. If you want to be certain your div suits every media you can use vw and vh units.
It seems like you're asking for the div to fill the parent (height or width). And if you don't want the background image to appear cropped, you need to maintain the aspect ratio.
This looks what you need: Maintain aspect ratio of div but fill screen width and height in CSS?
Working example
Add styles to div with background:
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
You can resize window to see result.
html, body {
position: relative;
height: 100%;
margin: 0;
}
div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url('http://ghk.h-cdn.co/assets/16/09/980x490/landscape-1457107485-gettyimages-512366437.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<div>
</div>
I have one problem that I can't solve, I need my banner to be full width, not boxed. For example: the page is 1024px witdh and my banner is 800px width, now i need my banner to be 100% width. If you understand me, so, my friend and me we was trying a lot of options but we didnt figured it out.
Here is my CSS code with banner:
#banner{
background-image: url(mats/banner.jpg);
width: 100%;
height: 470px;
background-repeat: no-repeat;
position: relative;
background-position: center;
display: block;
}
I have tried everything but nothing successful.
It is background-size.
background-size: 100%;
On applying this property, your background image(800px width) would strech to 1024px, which results in image quality loss.
Better applying this property on images with width > 1200px
If the height: 470px is also intended as background height, dont use it.
Never set height & width on a image, it changes the aspect ratio. If one is set, the other will auto adjust according to, else Images looks shrinked or stretched
I think you might missing background-size
#banner{
background-image: url(mats/banner.jpg);
background-size: 100%;
width: 100%;
height: 470px;
background-repeat: no-repeat;
position: relative;
background-position: center;
display: block;
}
I had made a full screen background image for one of my clients, but the problem is that when I make the image to fit all the screen using the following css codes:
#bg-image img{
position:fixed;
left:0;
top:0;
width:100%;
max-height: 100%;
}
#bg-image{
height: 100%;
width: 100%;
float: left;
overflow: hidden;
position: relative;
}
Everything works perfect, as the image is filling all the background of my home page, but the problem is that now the background image seems to be stretched, and I would like to know how to make my image is size or ratio to be correct in order to fit the whole screen size without getting stretched (with full quality), so that the background image is quality to be perfect.
So, how to make my image to fit perfectly on the background of my home page.
Any Help Would Be Very much Appreciated!
You should really look into the background size property instead of using fixed images. Using 'cover' for background-size, means that the image should grow or shrink just enough to cover the whole background.
If you know the dimensions of the image. You can use a media query to change the background-size to 'auto' when it would otherwise grow beyond it's original size.
html, body {
min-height: 100%;
}
body {
background-image: url(http://leydenlewis.com/images/LANDING_PAGE.jpg);
background-repeat: no-repeat;
background-position: 0 0;
background-size: cover;
}
#media (min-width: 1120px), (min-height: 630px) {
body { background-size: auto; }
}
Try doing something like this:
#bg-image {
position:fixed;
left:-50%;
top:-50%;
width:200%;
height: 200%;
}
#bg-image img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
This should get you the results you want and work in most browsers as well.
This should keep the image the correct ratio:
#bg-image{
height: auto;
width: auto;
float: left;
overflow: hidden;
position: relative;
}
<style>
body {
background: url(http://37.media.tumblr.com/tumblr_lusitdffhf1qj5tnlo1_r1_500.gif);
background-size: 320px 600px;
background-repeat: no-repeat;
padding-top: 40px;
}
</style>
Since the questions doesn't specifically state CSS only (or NOT Javascript), here is a jQuery solution that I've worked out and have been using. I've noticed there might be an issue with mobile browsers.
//resize the background image
function resizeImage($selection){
//get the ratio of the image
var imageRatio = $selection.width() / $selection.height();
//get the screen ratio
var screenRatio = $(window).width() / $(window).height();
//if the image is wider than the screen
if(imageRatio > screenRatio){
$selection.height($(window).height()); //set image height to screen height
$selection.width($(window).height()*imageRatio); //set the correct width based on image ratio
}
//if the screen is wider than the image
else{
$selection.width($(window).width()); //set the image width to the screen width
$selection.height($(window).width()/imageRatio); //set the correct image height based on the image ratio
}
}
Run this whenever you want to resize the image, typically on "onresize" and "onload"
<body onresize="resizeImage($('#bgImage'))">
#bg-image{background: url(https://unsplash.com/photos/P3IJy9JMsiU/download?force=true) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
I'd like to set a webpage background image to scale with the browser window so that it never loses its original aspect ratio (becomes stretched), and so that the image itself stays basically centered. After the window reaches a small enough size, I want the image to overflow (disappear) on both the left and right sides, not just the right side, as it does by default if the image is absolutely positioned.
Here is an example of what I'm doing right now: http://jsfiddle.net/S59EW/2/
#background img {
position: absolute;
min-height:100%;
width: 100%;
height: auto;
top: 0;
left: 0;
}
(The image has to be within a div positioned absolutely because of some javascript I'm using that applies to it.)
If you resize the jsfiddle window you'll see that the image keeps its aspect ratio only if you don't make the window too tall. Then the image is stretched vertically.
And if you remove "height: auto" you get the same thing except the image stops resizing after a certain point and disappears on the right/bottom sides but not on the top/left sides.
#background img {
position: absolute;
min-height:100%;
width: 100%;
top: 0;
left: 0;
}
So, I need:
The background image to always occupy the entire window without scrollbars.
The image to always keep aspect ratio.
The image to overflow onto the left and right side after a certain browser size threshold, so that it remains basically centered.
Thanks everyone
You can set the div background through the CSS, that way the image will fill the div and the sides will cutoff when the div is resized smaller. This code will center the image within the div and cutoff at the edges when shrunken down:
HTML:
<div id="background"></div>
CSS:
#background {
position: absolute;
min-height:100%;
width: 100%;
height: auto;
top: 0;
left: 0;
background: url(http://2.bp.blogspot.com/-ayEwJpMGTPQ/USqliwPWo1I/AAAAAAAAHtI/ab6NHVy0Q48/s1600/tree.jpg) no-repeat center center;
-webkit-background-size: cover; /* Add in these */
-moz-background-size: cover; /* four lines to */
-o-background-size: cover; /* remove the white space*/
background-size: cover; /* around images */
}
JSFiddle
and full screen JSFiddle
Updated JSFiddle with background-size property included to remove white space
Updated full screen version
Updated with slideshow
Updated fullscreen with slideshow
You may need to play with the aspect ratio of the background photos in order to get the look you want.
I have these two options, one is CSS only but it would need media queries at a small width.
Here is the background image JSFIDDLE, in this one it will scale exactly how you want it.
Finally, drum roll please, if you need the image to be a tag its self and act this way well there is a FIDDLE for that. :p
First CSS,
#background img {
position: absolute;
min-height:100%;
width: 100%;
height: auto;
margin-top: -40%;
top: 50%;
left: 0;
}
#media only screen and (max-width: 1700px) {
#background img {
margin-top: 0;
top: 0;
}
}