I would like to reproduce the Apple large background effect (apple.com)
The background, while larger than the browser, does not make the horizontal scrollbar appear, and when we make the browser smaller than 1024px, then the background is locked on the left, adopting the normal behavior of a normal 1024px wide website, while online solutions only offer to center the background at all times.
Anyone knows how to do this please?
set Background from CSS,
following html sets background without making horizontal scrollbar appear
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
Related
My website is (https://www.yahoonewsz.com) and I've uploaded an image on the public_html folder in the server.
I have used the following code for background
#main {
background-image: url("image908.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
in advanced CSS section in WordPress.
Why is the image not responsive in mobile?
Thanks.
You're using background-size: cover which according to the background-size docs "Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains."
What this means is that it's scaling to the smallest "non-squished" size it can be that prevents any empty space in the container. Since your site (namely the #main) is roughly 3000px tall on mobile, the background image is being scaled to ~3000px tall.
If you want to constrain it to max width, use background-size: contain which "Scales the image as large as possible without cropping or stretching the image." meaning that it will always fill the container without being cut off. Note this will give you white space under (or above) the image based on your background-position settings.
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 want to place an image as a background, I've also apply the
background-size:cover
for no-scroll. The problem is when i view the page at different resolutions the whole picture (full width) showed up instead of the center portion (blue bordered area), is there any possible way that I can set the image as background with no scrolling and image will remain center aligned.
this image may describe more specifically what I'm trying to ask. I just want to fix this image at any resolution but the blue bordered area must be remain center aligned,
You can combine background-position: center center with background-size: cover.
use:
overflow: hidden;
max-width: 1200px; // change the width
and add to the background :
no-repeat 50% 0;
I have been using css for a few years but have never ventured past using fixed width layouts. I'm looking at using a fluid layout for my next site, or as much percentage as I can, but I have a question that worries me.
If I have an image with 1900px width set as a background, I understand that it simply shrinks when the browser calls for say 1600px.
What happens when the resolution calls for a 2000px width? I will be left with white space, correct? How can one avoid this? I feel like I should probably just throw out that its not an image that can be repeated horizontally.
A trick usually used is to have the image be "inner-glowed" with a color, then set the background color the same as well.
Suppose your image doesn't tile, and has black "inner-glow" or "feather" effect, then you can make the container's background color as such:
background-color: #000;
background-image: url(your_bgimage.jpg); /* image with black borders due to effect */
background-repeat: no-repeat;
background-position: center center;