I am trying to get a ribbon png on the top left and bottom right of a box, (refer to the picture below), but was unsuccessful.
That box has a background colour and it's going to have some text in it so the ribbons need to keep their position whenever the box stretches. This seems to be so easy to do so hope someone could help me out.
Use absolute positioning to put two divs in with top:0;left:0; and bottom:0;right:0;. Like this in your CSS:
#box{
position:relative;
/* your styles... */
}
#box:before,#box:after{
content:'';
position:absolute;
width:100px;height:50px;
}
#box:before{
top:0;left:0;
background:#0f0; /* you could put some kind of image here */
}
#box:after{
bottom:0;right:0;
background:#0f0; /* you could put some kind of image here */
}
See this JSFiddle for a working demo.
You can use absolute positioning. It would be something like this:
http://jsfiddle.net/myajouri/389hQ/
.green-box {
position: relative;
/* other styles */
}
.green-box:before,
.green-box:after {
content: "";
display: block;
position: absolute;
width: 100px; /* ...or whatever */
height: 50px; /* ...or whatever */
}
.green-box:before {
top: 0;
left: 0;
background-image: url("wherever the ribbon image is") left top no-repeat;
}
.green-box:after {
bottom: 0;
right: 0;
background-image: url("wherever the ribbon image is") right bottom no-repeat;
}
This should work in IE8 and above + modern browsers. If you don't care about IE8 then you can use CSS transforms to rotate the same image instead of having two different images.
Try to use position: fixed; via CSS
Related
I want to put .image exactly behind .description-wrap. I've tried using padding and margins to center it but no go.
.image img {
display:block;
margin: 0 auto;
width:30%;
bottom:100px
}
https://jsfiddle.net/vsdLk90s/
I have made some changes to your code and explained them in comments.
.image {
position: absolute; /* Out of flow of current structure */
width: 70%; /* To regain the width of previous layout */
margin-top: -15%; /* Align it vertically */
z-index: -1; /* Priority reordering, place the image underneath the text */
}
JSfiddle
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;
}
I know I can set a negative left position on a background image like this:
#element {
background: url(image.png) -20px 0 no-repeat;
}
That'll position the background image 20px to the left of the left edge of #element, regardless of #element's width.
But is there any way to set a negative right position, without giving #element a fixed width (and then just setting a high positive left value)?
It's simply not true that this effect is impossible to obtain through simple CSS. There is no need to complicate your mark-up with unnecessary pseudo elements or multiple divs.
You can use the "calc" function in CSS to make the browser calculate 100% of the containers width and then add your negative margin to that like so (remember to add your negative margin to the 100% not subtract it):
background-position: calc(100% + 20px) 0;
Or if you prefer your mark-up in short-hand format:
background: url("image.png") calc(100% + 20px) 0 no-repeat;
This will position your background-image 100% (hereby obtaining the same effect as using background-position: right) from the left side of its container and by adding the 20px to that, you will obtain your negative right margin.
You can see a demo of how the function behaves in this jsFiddle: http://jsfiddle.net/58u665fe/
The "calc" function is supported by most major browsers, though support for IE9< lacks in certain cases. You can read more about which browsers support this function on http://caniuse.com/#feat=calc.
What you're wanting to do is not possible in the way you want to do it.
A fix might be to create a parent div with a position: relative; attribute and then z-index another div behing a div that holds your content.
<style>
#parent {
position: relative;
}
#background {
background: url(img.png) top left no-repeat;
position: absolute;
top: 0;
left: -20px;
}
#content {
position: absolute;
top: 0;
left: 0;
}
</style>
<div id="parent">
<div id="background"></div>
<div id="content"></div>
There's another way to achieve this without changing your markup:
using the :after pseudo-selector you can add an image to the right of any block although is not the same as an actual css background
so you can do:
#element {
position: relative;
}
#element:after{
content: "";
background: transparent url(image.png) 0 0 no-repeat;
position: absolute;
right: -20px;
top: 0;
height: 50px /*add height of your image here*/
width: 50px /*add width of your image here*/
z-index: 1;
}
#element *{
position: relative;
z-index: 2; /*this makes sure all the "background image" doesn't sit above the elements*/
}
Scenario
html
<div id='fractal'>
<div class='centerdotline'>
<span>Some text</span>
</div>
</div>
css
#fractal {
background-image:url('fractal.jpg');
background-repeat: repeat;
}
.centerdotline {
background-image:url('dotline.png'); /* with alpha channel */
background-repeat: repeat-x;
background-position: center;
}
.centerdotline span {
padding: 0 20px;
/*
override centerdotline background-image
*/
}
I want to remove centerdotline div ( parent ) background-image but not fractal div background-image.
I can't set the background-image in this element (like a piece of fractal.jpg) because I don't know the element's exact position in relation to the fractal div
Thanks for help
Marco
Perhaps This Workaround
Not knowing specifically what your parameters are, the following solution may or may not be useful to you. I offer it, however, in case it is useful for your situation.
Here is the fiddle example. HTML is just as you had it. I removed the line-height on the span that you said was not necessary. If you were doing that, you would need to adjust the pseudo-element height accordingly below. That height should roughly match line-height, which is typically about 1.1 or 1.2, but if set to 500px would need to be that height for the pseudo-elements.
CSS
#fractal {
background-image:url('http://marcomolina.com.br/lab/fractal.jpg');
background-repeat: repeat;
width:500px;
height:500px;
}
.centerdotline {
position: relative; /* using this to place the dots */
text-align:center;
}
/* your span can also be set to display: inline-block and have top padding or margin */
.centerdotline span {
padding: 0 20px;
/*
Did not remove, but skipped centerdotline background image by not putting the background there to keep the background of fractal div behind the text
*/
}
/* put the dots in pseudo-elements and position off .centerdotline edges */
.centerdotline span:before,
.centerdotline span:after {
content: '';
position: absolute;
height: 1.2em; /* this might vary slightly by font chosen */
width: 40%; /* this will vary by text size */
background-image:url('http://marcomolina.com.br/lab/dotline.png'); /* with alpha channel */
background-repeat: repeat-x;
background-position: center;
}
.centerdotline span:before {
left: 0;
}
.centerdotline span:after{
right: 0;
}
Basically I have a Picture in a div nested in 2 divs. I wanted to overlay a piece of tape onto it at the corner of the picture.
So I made a div for that piece of tape image and put it at the bottom of the document giving it the position of relative and giving it these attributes.
#tape
{
width: 100px;
height: 65px;
position:relative;
left: 25px;
top: -662px;
}
And here is the Picture's attributes:
#character-spotlight
{
margin-left:50px;
width:250px;
height:250px;
float:left;
z-index:1;
}
Bot of these Div's are nested into
#content
{
width:800px;
height:1360px;
background-image:url(Cork.Board.png);
background-size:100%;
float:left;
display:block;
}
Which is itself nested into
#container
{
width: 1024px;
height:1600px;
margin-left:auto;
margin-right:auto;
margin-top: 50px;
display:block;
}
Here is the webpage
www.workaholicsfans.com/characters-files/Adam-Demamp.html
It works fine in Chrome but not IE and Firefox.
Any help would be greatly appreciated
(There is no link in your post) I can hardly believe the situation you described and provided css could work. The fact that you have it working in Chrome is just pure luck i guess, are you might have been playing with the numbers to make it fit.
The solution is actualy rather simple.
<div class='picture-wrapper'>
<img class='picture' src='picture.../>
<img class='tape' src='tape... />
</div>
then in the css
.picture-wrapper {
position: relative; /* this now acts as the reference for position absolute of the children */
}
.tape {
display: block;
position: absolute; /* position according to its parent */
top: 0; /* top position */
left: 0; /* left position */
z-index: 5; /* bring to front */
}
That should do the trick.
edit:
i just saw you added the link. If you want the piece of tape to overflow the picture edges, the easy way would be to add some padding-top and padding-left to the wrapper. something like this:
padding: 8px 0 0 8px;
Or if you want it to be absolute positioned according to the page container:
#tape {
height: 65px;
left: 325px;
position: absolute;
top: 300px;
width: 100px;
}
(But I must admit that I like PeterVR's code better since this keeps things relative, which comes in handy if you position 'new' stuff above the #tape div).