I am having an issue getting my background image in my header to look right.
Right now, it is set to:
.hero {
background: url(http://wordstream-prod.s3.amazonaws.com/landing_pages/assets/img/e682443e-b4c0-483f-823e-8170fd4b71b2) no-repeat center center;
background-size: cover;
background-position: center;
}
Ive tried many variations of css to get it to work but cant figure it out. I would like the section to show the full image and keep showing it (not cut it off) as the browser shrinks. As of now, it is cutting on the top and bottom of the image until I shrink down and then it shows the whole thing. When I shrink further, it cuts off the sides.
When I switched the bg size to contain, I was left with a bunch of space around the image on small devices. Any help is appreciated.
Link: http://solatube.solabrite.com/premier-dealer
To do that, the aspect ratio of .hero needs to match that of the image. You can do this by applying a padding to the element with the percentage amount that represents the image aspect ratio. You can get that percentage by dividing the image height by it's width (500/1280 = 39.0625%).
Add this CSS
.hero {
height: 0;
padding-top: 39.0625%;
}
If you usebackground-size: cover, then the image will be scaled until it covers the whole available space.
Maybe try it with background-size: contain, then the image will be scaled until it covers either the x or y dimension of the available space.
BUT: If your image has the same aspect ratio as the area it is trying to cover, neither of this should be a problem though.
Related
I'm trying to find out ways to keep images, type and other graphic elements that fill a browser window to maintain their proportion and relationships to one another while continuing to fill the window while that window is resized.
To see what I mean, please take a look at the following examples:
Example 1:
https://www.nytimes.com/2017/09/26/magazine/how-fake-news-turned-a-small-town-upside-down.html?rref=collection%2Fsectioncollection%2Fmagazine&action=click&contentCollection=magazine®ion=stream&module=stream_unit&version=latest&contentPlacement=1&pgtype=sectionfront
Example 2:
https://www.nytimes.com/2017/09/28/magazine/here-comes-the-closer-in-the-seventh-inning.html?rref=collection%2Fsectioncollection%2Fmagazine&action=click&contentCollection=magazine®ion=rank&module=package&version=highlights&contentPlacement=6&pgtype=sectionfront
Note how the photo in each, especially in Example 1, is not stretched or squeezed out of its natural shape. Also note how either the full width or the full height of the image is always shown no matter what size the browser window is. Further, the type (headline and intro copy) remains anchored to the bottom left and remains the same size.
How can I achieve this effect?
Additionally, I would like to know how to set the page up so that large image and the graphics that accompany it, change every few seconds.
I would prefer to do this is CSS, but also welcome HTML and other solutions.
Thanks.
I think you are looking for background-size: contain;
In contrast to background-size: cover; it does not ensure the background image covers the whole container, instead the background image gets resized so that the height AND the width are the same or smaller than the size of the container.
Example for contain:
textarea {
width: 100px;
height: 100px;
background-image: url('http://via.placeholder.com/100x100');
background-size: contain;
background-repeat: no-repeat;
}
<textarea></textarea>
Example for cover:
textarea {
width: 100px;
height: 100px;
background-image: url('http://via.placeholder.com/100x100');
background-size: cover;
background-repeat: no-repeat;
}
<textarea></textarea>
Sidenote: I intentionally used textareas for the examples, because they can easily be resized in the bottom right corner for testing
You will have to give width in % for this kind of effect. Don't specify the height and width for the image in pixels. You will have to use '%' for varying the image width ( with proportionate height ) with the screen size or browser size.
If you wish to provide height and width in pixels then you will have to use media queries in CSS to specify height and width for varying screen sizes.
I'm not actually a front-end developer, but I've been asked to do the css for a responsive web-application. Mostly I've managed to piece everything together using getBootstrap and stackOverflow, but I've run into one issue that I've not been able to find a solution for.
Namely; the design calls for a responsive full-width background image across the top of the home page. Fixed-height, to be cropped when the page narrows.
No problem in itself, but the smaller-size design for the same page calls for this image to be cropped to a slightly off-center position, like so:
There's plenty of code samples on how to lock the image to the left of the page and have it crop from the right, or center the image and have it crop from both sides equally, but I can't for the life of me figure out a fluid way to have the image crop about 33% from the left and 66% from the right.
Is there a reliable way to do this, and/or would there be a clever workaround?
The key to this is the background-position property in combination with background-size: cover.
background-size: cover tells the browser that you want the image to expand to fill the available space, and let the extra parts of the image be cut off outside of your box.
So if you had a <div> with 200px width and 200px height and an image that was 1000px wide by 500px high then it would shrink down to 200px high and 400px wide.
The next question is how do you choose which parts of the image are shown and which aren't? That's where background-position comes in.
You can set this as something simple, like background-position: center center; which centers both vertically and horizontally and is often the desired outcome. For your situation though, you want to use something like this:
background-position: center left 33%;
This will make your image centered at larger screens and when there's more width than the container (e.g. <div>) needs then it'll move it to focus on 33% from the left.
Here's a full example:
HTML:
<div class="hero"></div>
CSS:
.hero {
height: 500px;
background-image: url("[your-image-url]");
background-size: cover;
background-position: center left 33%;
background-repeat: no-repeat;
}
Hope that makes sense. Here's a codepen showing it in action.
I hope this is simple but here is the code I'm doing and it works perfectly except for one thing, the scale isn't kept. It gets wide and then looks silly.
.div1 {
background-image: url("images/headerbgimage2.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
}
The image scales when resized and on smaller sizes it looks normal but as it gets bigger (wider) it stretches and looks awkward. How can I make it so the image keeps its aspect and just "zooms" in on itself keeping the whole div covered and the image scaled.
An example of this working on a site is techhubdenver .com with their top div background image
Can this be done with CSS or will I need to get some Javascript coding going to do this.
I know how to make new images for responsive type pages but I was hoping to just use one image and have it work no matter the device. it only becomes a problem when the screen size is way off from the image size (too small or too wide).
if the image would just "shrink" but keep aspect ratio for smaller devices I think it would work and if the image would just "zoom in" staying on the center of the image when the screen size gets to large i think it would work good.
Keep aspect ratio and always fill the div (okay to zoom in) is my goal here.
You need background-size: cover;. That will scale your background such that it covers the element.
.div1 {
background-image: url("images/headerbgimage2.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
i have a problem with an image in my website it does not appear properly in browsers the picture cuts certain areas in mobile browser
this are the images
desktop pc screen image
image on a mobile browser
this is the code for the image
section#landing {
width: 100%;
height: 100vh;
background: url('../../img/bg.jpg');
background-size: cover;
background-position: center;
background-attachment: scroll;
}
#media only screen and (max-device-width: 320px) {
}
Step 1: Look up the code you are using to see what it is supposed to do:
cover
A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
Well, it is clipping the image, and you don't want it to clip the image, so clearly cover is wrong.
Step 2: Look at the other options:
contain
A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.
That might do the job.
<percentage>
A value that scales the background image in the corresponding dimension to the specified percentage of the background positioning area, which is determined by the value of background-origin. The background positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding, and content. If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present. Negative percentages are not allowed.
… or that (with 100% 100%), depending on what you actually want:
see here jsfiddle
do not use cover because that makes the image to be cropped
instead use contain also add background-position:top center because with contain the img resizes and the empty spaces ( top and bottom ) are filled with the background-color which in your case is transparent . so it's better to align the bck img to top and fill the bottom area with whatever you want
you can with media query set the background-size:cover on pc and contain on mobile
code :
section#landing {
width: 100%;
height: 100vh;
background: url('http://i.stack.imgur.com/fXmkE.jpg');
background-size: contain;
background-repeat:no-repeat;
background-position: top center;
background-attachment: scroll;
}
I am building a single page site constructed of 4 divs, one on top of the other and each one with its own fixed background image. The images are much wider than the screen as I want to site to keep its look across a large range of screen sizes, however does anyone know how to truely center a background image. So in a small monitor they would be viewing the center of the image, and in a larger monitor they would see the same place of the image, just with more around it. Just like this site has
http://www.cantilever-chippy.co.uk/
When the window is resized the background image moves accordingly.
Many Thanks.
If you check the css from your link you see the solution:
#images #bg_1 {
background-image: url(images/bg/1.jpg);
background-position: 50% 0;
}
And the div:
<div class="bg_block" id="bg_1" style="height: 1200px; width: 1055px;"></div>
By JavaScript they change the width of #bg_1 on every resize.
window.onresize = function(event) {
$("#bg_1").css("width", $(window).width());
}
This should work
#bg{
background-image:url(yourURL);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
The background-fixed property is for Firefox and Opera.
You're looking for the background-position CSS property.
http://www.w3schools.com/cssref/pr_background-position.asp
It can take an absolute offset in pixels (so if you know the size of your image and the size of the div you could calculate exactly where you want it to appear). Or, you can pass in a percentage. It can also take a negative numbers so you can offset it off the screen in any direction.
For your case, though, you probably want the simple "center" value. Something like this should work:
/* This should center the background image in the div. */
div.background_image_block {
background-position: center center;
}