What is the optimal way to slice up this background image for optimal CSS implementation? The designer knows no CSS and since we're not CSS experts, we're not sure of the best way to slice up the background image. The background, of course, should be fluid and scale to different monitor sizes and page lengths. At the same time, it seems sub-optimal to have one large image or multiple small images.
We don't need to support IE6.
Any advice?
By slicing, I'm not 100% sure what you want exactly. I assume you are looking for a way to stretch the Facebook part as much as needed, while still keeping the background image decent.
For most non-phone (ie desktop or tablet) screens, you could cut below the last cloud and have a repeat vertically of the blue sky background. With the CSS property background-repeat: http://www.w3schools.com/cssref/pr_background-repeat.asp
You'd have 3 divs with margin: 0:
the hmm panabee (actual content) div, background image is the balloons, centered. You expect its height to be greater than your image's height. If you want to enforce it, there's min-height. Bottom of this image should be blue sky.
the facebook div, can be as big as you want if you use the background-repeat with the blue sky image.
and the footer div, with a background image of your choice, but the top of the image should be blue sky.
I think all this (except min-height, maybe?) should work on most browsers, even IE6.
CSS3 supports multiple overlapping background images (you'd want them to be transparent PNGs or similar), as well as the background-size property allowing you to adapt to different window sizes. It seems to me this would solve your problem exactly.
Check here to see if a feature is widely-supported enough for your target audience.
Related
I want to recreate an interface similar to Windows Phone 10.
You can see an example of what I try to achieve in HTML in this picture:
The middle tiles act like Windows on the baby picture while the space between tiles is black.
There's no magic going on here. In the picture you've supplied the phone has a desktop of a child that is letterboxed (black stripe across top and bottom). The tiles on the top and bottom of the screen are opaque and show their own backgrounds. The tiles in the middle are fully transparent, but have a solid black border to them to show the child behind them.
To make the tiles, you simply need this:
.tile { background-color:rgba(0,0,0,0);
border: 3px solid black;
}
Take a look at this fiddle for a basic example: https://jsfiddle.net/Lnafvvx9/6/
For a dynamic approach:
You could slice a picture in many litte parts (and delete the sliced borders). Then you create and align different divs with a individual background image containing your sliced picture parts.
There is also a kind of work around for static pages:
Create one div with the big (not sliced picture).
Use a transparent PNG image containing only the "border" of the black background. Place that in a div on top of the other div and you got the style. Then you need to add little divs ontop of the positions where you can see the picture.
The important thing is, that these designs require pixel perfect static layout. This means you can't scale divs size or change the position when the browser window or screen is smaller. But its also the easiest way do do that and the last suggestion allows to change the picture without slicing it.
For real dynamic approach you could load the same picture (unsliced) in every button (use different css id for everyone) and position the background of them individually to fit together. The advantage of this is, that you can then use CSS3 for instance to scale the button size on hover. This can lead to a cool expanding image effect. Just look up
http://www.w3schools.com/cssref/pr_background-position.asp
http://www.w3schools.com/css/css3_animations.asp
I hope that helps :)
On my site, I'm having issues with the repeating-linear-gradientelement in CSS. For the majority of the page, the background looks ok. But suddenly, when I scroll down, it looks as if the gradient just shifts one bar to the right and makes my page look ugly. This is what I currently have as CSS:
background:repeating-linear-gradient(45deg,transparent,transparent 50px,rgba(255,255,255,.1) 50px,rgba(255,255,255,.1)100px), #81D4FA;
I'm really having trouble, and it would be great if someone could help me. Thanks.
As was mentioned in the comments, background-attachment: fixed; will prevent the seam from being visible, but the stripes do not scroll with the page.
According to MDN:
A repeating CSS linear gradient is not a CSS <color> but an image with
no intrinsic dimensions; that is, it has no natural or preferred size,
nor ratio. Its concrete size will match the one of the element it
applies to.
This means that the positioning of the edge of the image depends on the size of the element, and a 45deg line will not line up with its neighbors unless one of the dimensions is a multiple of the other. I recommend making a tile-able image in your image editor of choice and loading it as an asset rather than using repeating-linear-gradient() if you don't want the background to be fixed in place.
I'm having a little problem with one of my background images in a div element. I'm using the following CSS:
.myBox
{
background-image:url('....');
background-repeat:no-repeat;
background-size:cover;
}
My background image is a picture with some people on it. Now, if I increase the width of my browser window, at a specific point, some of the people are cutted off (due to the automatic resize of the image with 'background-size:cover').
My question is: Is there any option (or jQuery plugin), to set a specific part on the background image that will be always visible on all window sizes and also fill the whole element?
There are a variety of solutions you could try; however, you might want to start with something simple like applying a background-position.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
Using the background image of the group of people as an example, you might set background-position: top so that their heads never get cut off. You can also set the vertical and horizontal position in pixel or percent units.
try boostrap3 img-responsive class
.img-responsive Makes an image responsive (will scale nicely to the
parent element)
http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
I want to set a prefereble image as the background for my website.
Now, an image file always comes with a fixed pixel or size. Lets say that my chosen image is 960x960 px.
But my web page may have different size, may be the size is 3 times bigger than the image.
If I set that image as background, then normally it will repeat (I know how to stop it, but that's not what I want). When it gets repeated, it will make a stripe or a shadow type line at that point where they join with each other. That means, at the image joining point, it makes a separate border (I hope you know what I mean) what looks bad and an user doesn't like it.
How to avoid that?
How can I set a background image as only a single image so that it's not clearly visible that many images are joint on the background.
As an example this is my background image:
background-image:url(img/backgr.gif);
Two possibilities:
Use a graphic program to edit your image so it becomes seamless. Look here: http://www.youtube.com/watch?v=NARVupW2ads
Use background-size:cover; to enlarge the background image so it automatically covers the whole screen.
After the background-image line have this line:
background-repeat: no-repeat;
I've already had a look through some posts and couldn't find what I was after. I'm designing something in PS at the moment and I can foresee an issue when it comes to coding the design into html+css.
Imagine my centre div, it's 960px. It's going to have a semi-transparent .png as a background. The design is “full width” so this div will be contained in a larger div, set to 100% width. This is all ok until I get to the background on this outer div. It's also going to have a .png running the full width of the page. Problem is: I don't want it running through the middle, as it will result in the middle have a double thickness to it, if that makes sense?!
Basically, I need a way to either run a div either side that is elastic, or someway of stopping the background from running across the centre 960px portion of the browser window.
I have NO idea how this can be achieved, apart from using JS to set widths, which I don’t really want to do.
Any ideas?
Ok, I’ve tried to get the basic issue here: http://jsfiddle.net/8Bznc/1/
You can just put a non-transparent background on the center div, so the other background doesn't show through.
See here: http://jsfiddle.net/9bnHD/
Apply the background-image only to the wrapping div.
Alternatively, if the center and sides need to have different images, give the center div a non-transparent background-color as well.
Also, you could fake it by using multiple background-images. Demo
Keep in mind this won't work in old versions of IE, but something as non-essential as background transparency can be excepted as graceful degradation.