I am doing some research for a ruby on rails web app I am working on and need some help with a few questions.
Is it possible to render/display images as the background of a web page using a masonry jquery type pluggin?
If the answer to the 1st question is no, then is is possible to manually render multiple images as a background using css(3) and html(5)?
Lastly, if I can use 1, 2 or any other method to display multiple background images, will I be able to apply regular css code to manipulate the images?
Thanks in advance for the help.
It is possible with CSS3. At it's most simplest, here is an example of how you would achieve it:
#exampleA {
width: 500px;
height: 250px;
background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, left top;
}
The order runs from first (on the left) being the top layer to the last (on the right) being the bottom background layer (that's if you're layering them).
EDIT: In order to apply more complicated stylings to each background image such as greyscale you need to break up the CSS into this sort of format:
/* this is the master css block - the height and width here represent the total coverage for all child background images */
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing {
height: 300px;
width: 480px;
position: relative;
}
/* individual stylings for each background image featured - apply greyscale and separate width and heights here */
.sample1 .sea {
background: url(media/sea.png) repeat-x top left;
}
.sample1 .mermaid {
background: url(media/mermaid.svg) repeat-x bottom left;
}
.sample1 .fish {
background: url(media/fish.svg) no-repeat;
height: 70px;
width: 100px;
left: 30px;
top: 90px;
position: absolute;
}
.sample1 .fishing {
background: url(media/fishing.svg) no-repeat top right 10px;
}
Related
I would like to make a transparent arrow over an image. This triangle should be indented in a block and show the background image.
Desired output:
I used skewX() property that #web-tiki had explained here but I want it to display on the top of the border rather than on the bottom of image and have this issue:
A fiddle demo of my code is available here
Can anyone tell me why it's not working in my case?
As stated in the question, your case is a bit different from the example that was provided by web-tiki. In the example that you were referring to, the border with the transparent cut was included as the bottom border for the image whereas you need it as the top border of the plain text area.
The expected output can be achieved with the same skew technique described in that answer. However, it needs to be tweaked a bit to match your case.
First thing is, the skewed pseudo-elements (that produce the border) should be added to the container of plain text area and not the top section which holds the image. This part you have already done correctly.
Next, you need to position the border such that even with the border the height of your text container will be equal to the other two images placed by its side. For this, you need to position the elements that form the border within the plain text container (top: 0%) instead of above it (bottom: 100% in your code).
Then, if the text container has a non-transparent background, you need to clip it such that it is not present behind the elements that is creating the border effect. This can be achieved by adding a padding-top on the text container equal to the height of the border pseudo-elements and then setting background-clip: content-box to it.
Finally, you need to move the entire bottom part up by the same number of pixels as the height of the border in order for the top image to be seen through the transparent cut out area. This can be done by adding a negative margin-top to the bottom container.
Putting it altogether your code should be similar to the below snippet to achieve the effect that you need. (Note: Your fiddle has way too much code and so I have created a simpler sample for the demo).
.section {
height: 200px;
width: 500px;
background: url(http://lorempixel.com/500/200/nature/3);
}
.bottom-container {
margin-top: -15px;
height: 100px;
width: 500px;
}
.text,
.middle-image,
.right-image {
float: left;
height: 100%;
width: calc(100% / 3);
}
.middle-image {
background: url(http://lorempixel.com/200/100/nature/2);
}
.right-image {
background: url(http://lorempixel.com/250/100/nature/1);
}
.text {
position: relative;
box-sizing: border-box;
height: 100%;
padding-top: 15px;
text-align: center;
line-height: 85px;
background: #F7F7F7; /* Just for demo */
background-clip: content-box; /* needed only if your background is not transparent */
overflow: hidden;
}
.text:after,
.text:before {
position: absolute;
content: '';
top: 0px;
height: 15px;
background: rgb(215,182,115);
}
.text:before {
left: 0px;
width: 25%;
transform-origin: left bottom;
transform: skew(45deg);
}
.text:after {
right: 0px;
width: 75%;
transform-origin: right bottom;
transform: skew(-45deg);
}
<!-- prefix free library to avoid browser prefixes in CSS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<section class="section">
</section>
<div class="bottom-container">
<div class="text">Some text</div>
<div class="middle-image"></div>
<div class="right-image"></div>
</div>
Screenshot:
Note: The images that are displayed when the snippet is executed could be different from those in the screenshot because they are random placeholder images
http://html5up.net/big-picture
The overlay.png does make my background brighter. But I do not want to deleted it unless I understand what this png does. Do you guys have a clue?
The overlay.png is used here:
#intro {
background: url('images/overlay.png'), url('../images/intro.jpg');
background-size: 256px 256px cover;
background-attachment: fixed, fixed;
background-position: top left, top center;
background-repeat: repeat, no-repeat;
color: #c2b090;
}
.image:before
{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('images/overlay.png');
}
It's making your background image lighter. overlay.png is a partially transparent blue-ish graphic that overlays intro.jpg. It's set as the first background image of your main section tags. If you delete it, your big images will not be washed out, but it will result in a failed HTTP request because your CSS is still referencing it. If you want to delete the image, you should remove reference to it in your style.css file if you can.
I am attempting to make a sidebar for a tumblr page have a curved header and the rest of the sidebar be squared with 100% height so it flows off the "page" with no visible footer. I have layered backgrounds and as you might expect the square background with current coding is going to show at the top of the curve removing the transparent affect I want at the top.
This is the live preview.
Here is the coding used for those side bars:
#left, #right {
background-image: url('http://static.tumblr.com/gxcukg0/VOFn4jkk6/bg-sidehead.png'),
url('http://static.tumblr.com/gxcukg0/6SUn4jkk3/bg-side.png');
background-repeat: no-repeat, repeat-y;
background-color: #b8a6a5;
position: absolute;
min-height: 100%;
top: 0px;
width: 345px; }
Is there a way of accomplishing my goal without making a separate div for the top of each side?
To get this to work, you need to use the :before selector:
#left:before, #right:before{
height: 100px;
width: 345px;
background-image: url('http://static.tumblr.com/gxcukg0/VOFn4jkk6/bg-sidehead.png');
position: absolute;
top: -100px;
content: " ";
}
#left, #right {
background-image: url('http://static.tumblr.com/gxcukg0/6SUn4jkk3/bg-side.png');
background-repeat: repeat-y;
position: absolute;
min-height: 100%;
top: 100px;
width: 345px;
}
Note that I've bumped down the main divs with top: 100px;, bumped up the :before part with top: -100px;, and moved the header background image to the :before.
Oki doki the best way for you to do this would be to use the css style background-position.
For example
img {
background-position :-10px 0px;
}
The above with offset the image by - 10px to the left and 0px to the top.
I hope that helps!
Is this even possible?
I have a box and want to add one background image over the other. But i want to add an opacity 0.5 just
for the top image.
You can do it with pseudo element:
#example1 {
position: relative;
width: 500px;
height: 250px;
background: url(http://goldenageofgaia.com/wp-content/uploads/2012/09/Field-flowers-image7.jpg) 60% 60% no-repeat;
}
#example1:after {
content: "";
position: absolute;
top: 10%;
left: 10%;
opacity: .7;
z-index: 10;
width: 100px;
height: 100px;
background: url("http://www.butterflyskye.com.au/Monarch%20Butterfly%202.jpg");
}
http://jsfiddle.net/Let8U/
Check out: http://www.css3.info/preview/multiple-backgrounds/ It would help somewhat.
#example1 {
width: 500px;
height: 250px;
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
As you can see in the example given, there are two images - one center bottom and the other top left. For Opacity, I would do that in the image editor if I wanted to layer backgrounds.
There's no way to change a background-image's opacity.
What you can do is add an extra element with the desired opacity and background on top of your box.
This snippet on CSS-Tricks shows an elegant way of doing this with pseudo-elements, so you don't need to clutter your markup to achieve the effect: Transparent Background Images
Hope it helps.
I have a table that gets sorted. The headers have background images (arrows) to show the sorting direction.
The current CSS uses 3 different images like this:
th {
padding-right: 21px;
}
th.sorting {
background: #EEEEEC url("table-sort.png") no-repeat center right;
}
th.sorting_asc {
background: #ECE0EB url("table-sort-asc.png") no-repeat center right;
}
th.sorting_desc {
background: #ECE0EB url("table-sort-desc.png") no-repeat center right;
}
Working example in the JSfiddle here.
Is there a way to reduce these to one image and use CSS sprites? The problem is that a merged image cannot simply be used as a background to the header cell, because multiple images may become visible at once, like here.
I'd like to avoid using extra elements if possible. IE7 support would be great but I could probably live without it.
Pseudo elements like :after could work, but I can't find a way to position the icons in the same way. JSfiddle example.
I figured out a way for pseudo elements to work. Set the table headers as position: relative, then something like this:
.sorting:before {
display: block;
content: "";
position: absolute;
top: 50%;
right: 8px;
width: 7px;
height: 9px;
margin-top:-4px;
background: transparent url("http://i.imgur.com/iONZm.png") 0 0;
}
The icon is positioned 50% from the top, then moved upward a few pixels to be vertically centered.
You can use SpriteMe to generate sprite images on your site.
.sorting_asc {
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
background-position: 32px 0px;
}
.sorting {
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
background-position: 32px -27px;
}
.sorting_desc {
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
background-position: 32px -53px;
}
A quick Google search for a CSS sprite generator comes up with a few options. Though I've never used any of these services myself, I have usually made a single PNG image with transparency. Then you would reference your CSS like this:
th {
padding-right: 21px;
background: #EEEEEC url("table-sort.png") no-repeat center right;
}
th.sorting {
background-position: -100px -100px;
}
th.sorting_asc {
background-position: -200px -200px;
}
th.sorting_desc {
background-position: -300px -300px;
}
Replace the background-position property values with the appropriate coordinates. I think the CSS sprite services can create these values for you based on their compression once it is done, but the CSS coordinates may need some tweaks to get it exactly how you want.