I have an LARGE image that needs to be a part of a site, of course this hits the performance. I got the idea to cut it up into pieces and stich the image together at load using a grid was my idea.
One tiny problem though... it has to be in the background.
Should I go the dreadful z-index way to fix this or is there a more beautiful solution? The image can be cut in any number of tiles.
Depending on the required browser support you could use multiple background images. Position them in their appropriate position in the background.
html,
body,
div {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
background-image:
url(http://via.placeholder.com/350x150?text=Image1),
url(http://via.placeholder.com/350x150?text=Image2),
url(http://via.placeholder.com/350x150?text=Image3),
url(http://via.placeholder.com/350x150?text=Image4);
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat;
background-position:
top left,
top right,
bottom left,
bottom right;
background-size:
51% 50%,
50% 50%,
51% 50%,
50% 50%;
}
<div></div>
Related
I am trying to create a polka dot border around my content. For example:
I have managed to achieve this by repeating an image (of two individual dots).
.dots {
background: url('/images/dots.png'), url('/images/dots.png'), url('/images/dots.png'), url('/images/dots.png');
background-repeat: repeat-y, repeat-y, repeat-x, repeat-x;
background-position: right top, left top, right top, right bottom;
}
However it is an imperfect result. On certain sizes the dots will start to overlap.
I'm not sure how to avoid this problem as the image doesn't seamlessly tile.
Is there some other approach I could take for an effect which doesn't suffer from these faults?
You can easily do this with radial-gradient as a repeated background then adjust the values depending on the height/width of the container:
.dots {
width:300px;
height:200px;
padding:60px 70px;
box-sizing:border-box;
background:
linear-gradient(#fff,#fff) 68px 50px/calc(100% - 136px) calc(100% - 100px) no-repeat,
radial-gradient(circle at 12px 12px,#000 20%, transparent 22%) 12px 2px/33px 50px,
radial-gradient(circle at 12px 12px,#000 20%, transparent 22%) 33px 27px/33px 50px;
}
<div class="dots">
The content here
</div>
The problem is occurring because your background image is not as wide as the screen, and is trying to repeat itself.
To correct this, the easiest solution would be background-size: cover. This ensures that the image fills the entire screen, meaning it will never 'wrap around'. Note that this will stretch the image so that some distortion occurs depending on the aspect ratio.
If distortion is a concern, there are other two possible solutions:
Ensure that the image is as large as the largest screen resolution you want to display it on (optimally additionally scaling up the size of the displayed image based on viewport)
Craft the image so that it perfectly overlaps itself when it wraps around, and then make use of background-repeat.
Here's an example of background-size: cover:
.dots {
border: 5px solid black; /* For Snippet */
height: 50vh; /* For Snippet */
width: 50vw; /* For Snippet */
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Polka_dots.svg/1200px-Polka_dots.svg.png');
background-size: cover;
}
<div class="dots"></div>
I have a background with a container that has a filter in its css that gives the lower half of the page a black & white effect.
What I want to do is have the lower half of the text do the same.Any ideas?
class App extends Component {
render() {
return (
<div className="portfoliobackground">
<NavbarInstance />
<div className='headline'>Text here</div>
<div className='profile-box container'>
</div>
</div>
);
}
}
this is the css below
body{
background: url('../images/wtc2.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.headline{
z-index: 0;
font-size: 60px;
font-family: 'Encode Sans Expanded', sans-serif;
color: #e22422;
text-align: center;
position: relative;
top: 7.5em;
}
.profile-box{
z-index: -1;
background: url('../images/wtc.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: grayscale(100%);
width: 100%;
height: 50%;
margin-top: 20%;
border-top: white solid 3px;
position: absolute;
}
Try:
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
and
clip-path: polygon(0 50%, 100% 50%, 100% 0, 0 0);
respectively on two text elements ontop of each other with different colors.
There are several methods to achieve this effect.
The first two that come to my mind are the following: both involve creating two different copies of the text (one that is colored, and the other one that is black or white). These two copies are placed one above the other using a fixed positioning and the z-index property (think of them as different layers).
OVERFLOW HIDDEN - IF YOU KNOW THE HEIGHT OF THE TEXT DIV
In this case, you wrap the colored text in two containers:
1) The first one has a fixed height (in my example, 54px).
#co_1{height:54px;}
2) The second has its height set to 50% of the parent, and its overflow is hidden (meaning that everything that goes beyond its borders is not displayed.
#co_2{height:50%;overflow:hidden;}
The black text, on the other hand, is fully displayed. Given that it is positioned behind the colored one, however, its upper half cannot be seen.
Jsfiddle
CLIP PATH - IF YOU DON'T KNOW THE HEIGHT OF THE TEXT DIV
In this case, you use the clip-path CSS property to display two halves of the text: the upper case is colored, the bottom wrap the colored text in two containers.
This is the colored text (only the top half is displayed):
#co_1{clip-path: polygon(0 50%, 100% 50%, 100% 0, 0 0);}
And this is the black or white text (only the bottom half is displayed):
#co_2{clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);}
Please note that the clip-path property may not be fully supported (see here)!
Jsfiddle
Is there a way to use linear-gradient background which is starting from the center / middle of the screen?
This is my current css:
body {
display: table;
width: 100%;
height: 100%;
margin: 0 auto;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
background-size: 800px;
background: blue;
background: -webkit-linear-gradient(to left, black, blue, blue, black 800px);
background: linear-gradient(to left, black, blue, blue, black 800px);
}
Gradient bg is stopping after 800px (what I want), but it is on the right side of the screen, instead of behind the content of the webpage. I cannot move it to anywhere else. Also it is appearing at different distances from the content, depending of the window size. I need it to be fixed to the center, behind my content.
Maybe something like the next line exists?
background: linear-gradient(to sides, blue, black 400px);
So I'd need to be able to set the starting position of the linear-gradient to the center and let the browser run it to both sides.
400px from center is where it should stop (and after that use the last color) - so a total of 800px wide the gradient should be.
If i understand your request correctly, this is what you want:
body, html {
width: 100%;
height: 100%;
margin: 0px;
}
body {
background-image: linear-gradient(to right, black, blue 400px, black 800px);
background-size: 800px 100%;
background-position: 50% 100%;
background-repeat: no-repeat;
}
Try something like this
background: linear-gradient(to left, black, blue 25%, blue 75%, black 100%);
Using percentages ensures your page will scale, and you'll have the left and right quarters of your screen black with the middle half solid blue!
I have done a bit of googling and can't way a way to stop my background images overlapping. What I'm trying to do is have a div with a faded background. But when the fade reachs full opacity I want to apply a different background image that can repeat so the div looks flawless no matter how long the div is.
I have thought about just applying full length images for each web page but I would rather have this working so I don't need to worry about how much content I can apply to each page.
#content_holder{
width:800px;
height:1000px;
background-image:url(../images/PC/content_top.png),url(../images/PC/content_bottom.png);
background-position:0 0,0 240px;
background-repeat:no-repeat,repeat-y;
}
Added note: the height says 1000px, this is purely for testing purposes as the div is empty at the moment.
The second image does repeat but starts form the top of the div overlapping the other image.
these are the images:
content-top.png show once
content-bottom.png repeat after content-top
Whats happening:
What about just removing background-position and adjust the background-repeat:
background-repeat: repeat-x, repeat;
jsFiddle
edit
Hmm, multiple background just works like this. It's overlaying because the border underneath it is has the full height(it's repeating). A background doesn't see a other background as a boundry. You can do two things:
Make the boundry with a seperate element, so one element for the top
background and one for the bottom background.
You can edit the image to make the transition more smooth, thus you can't really see the border does overlap(a semi-transparent image makes a smooth transition easy)
#content_holder{
width:800px;
height:1000px;
background-color:rgba(0,0,0,.65);
position: relative;
z-index: 2;
background: url(http://i.stack.imgur.com/j3THB.png) top left no-repeat, url(http://i.stack.imgur.com/35j7u.png) bottom left no-repeat;
}
#content_holder:before{
content: '';
position: absolute;
z-index: -1;
top: 240px;
right: 0;
bottom: 0px;
left: 0;
background: url(http://i.stack.imgur.com/35j7u.png) top left repeat-y;
}
Solved it not entirely sure on a full explanation but it works find this post, it was quite similar to mine.
JSFIDDLE
A radical but effective way to deal with this if you have a known max height and you are already in a ":before":
&:before {
background: url('vertical-line.png') no-repeat 0px,
url('vertical-line-repeat.png') no-repeat 140px,
url('vertical-line-repeat.png') no-repeat 200px,
url('vertical-line-repeat.png') no-repeat 260px,
url('vertical-line-repeat.png') no-repeat 320px,
url('vertical-line-repeat.png') no-repeat 380px,
url('vertical-line-repeat.png') no-repeat 440px,
url('vertical-line-repeat.png') no-repeat 500px,
url('vertical-line-repeat.png') no-repeat 560px,
url('vertical-line-repeat.png') no-repeat 620px,
url('vertical-line-repeat.png') no-repeat 680px,
url('vertical-line-repeat.png') no-repeat 740px;
}
I am working on this site: http://www.problemio.com and I have a requirement to add the background image to the top banner which I did.
What I can't figure out how to do is how to shift it all the way to the right and make it smaller in length so that it only takes up half of the screen width.
Any idea how to do that? So far I have this css for the overall banner div:
.banner
{
width:60em;
margin: 0 auto;
position: relative;
padding: 0.3em 0;
z-index: 1;
background-image: url('http://www.problemio.com/img/ui/problemiotoprightimage.png');
background-repeat: no-repeat;
background-image: right-align
}
but I don't know how to make the background image align right and rescale to be 50% of the entire width of the div. Any ideas?
Thanks!
You can use left, right, bottom, top and center for aligning backgrounds. Also percentages.
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') right no-repeat;
However, you cannot resize the images using CSS2 but in CSS3.
background-size: <width> <height>;
More usage:
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') top right no-repeat;
To align bottom and centered:
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') bottom center no-repeat;
Use background-position: right; and background-size: [width] [height] (replace values where needed).