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;
Related
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 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;
}
See image here: http://postimg.org/image/xa6pzd1df/
Website is: http://blackfridaymagazine.com/papa-johns-free-pizza-march-madness/09512
#main {
background: url(img/gray-pattern.png) repeat center center #f3f3f3;
color: #000;
}
Dark gray and light gray backgrounds at bottom should repeat but they do not...
When you repeat an image across the x axis on fluid or full-width layouts, you’d think it would fill the entire width of the browser window no matter the size of the window. Well it does, but what happens is that if the window area is really small, like on mobile devices, the repeated background stops short of the far right edge of the window.
The solution is that you need to add a min-width like this:
min-width: 1024px;/*specify your width here */.
I am somewhat new to CSS and I have a problem that I can't seem to solve. I would like to have a series of divs on my page (stacked one on top of the other) and each of them should contain some text, and one or more images.
In particular, I would like the text to be left aligned, and vertically aligned in the middle, and the images should be right aligned, and the height of the div should be based upon the height of the images (which can be variable).
Basically each of the divs should look like so:
So far I have been able to get one or more of the requirements listed above, but never all of them at the same time. Is this actually possible with pure CSS, or should I just quit wasting my time and use a table?
Hi i have a solution for you chek this link http://jsfiddle.net/8mQc4/15/.
It's based use some properties like:
float and vertical-align.
This code allows flexible height and width of img, and also his container center vertically de text.Just try with more large texts or images.
Oh man I got a fun solution for you that may work but none the less is a solid idea!
If you set the image as the background you can avoid floating or positioning.
.section {
background: url(http://jpowell43.mydevryportfolio.com/flatDesign/images/tab-2.svg) no-repeat rgba(255, 255, 0, 0.4);
background-position: center right;
background-size: contain;
width: 100%;
}
The only thing that I may find to be a problem is the image size is based on the content inside of the div.
JSFIDDLE
This will allow the image to have a fixed size but! it does run into the problem of relying on the text for size over the image. :/
background-size: 80px 60px;
Fixed size
With the use of min-height: whatever; You can still achieve the desired result but not 100% the best.
min-height
I would like to fix my background to 100% height of body and leave it there even when rest of the page scrolls.
How do I achieve this?
Right now all I have is background:url(bg.png);. The height of the image is 1200px and width 20px, if that matters.
in css, use this:
background-attachment: fixed;
Depending on what you want the background image to do there are a couple of options. There is a great article on ALA about full screen BG images that accounts for scaling:
http://www.alistapart.com/articles/supersize-that-background-please/
If you are just looking to position the image in the browser you would do:
background:url(bg.png) no-repeat top left;
background-attachment:fixed;
Or however you want to position it respectively (top right, etc.)
Some browsers still have trouble supporting the stretching of background images so here's a workaround.
CSS3 Example and Support
Since it's already 1200px, you can use background-attachment:fixed; on the background to make it follow when they scroll. Example at w3schools. You can make the image look like it is meant to flow into a solid color at the bottom with a nice gradient, etc.