Been working on this for days and cannot seem to resolve it.
I have this:
<div class="outer-border">
<div class="grid-layout">
<div class="grid"></div>
</div>
</div>
For the outer-border I have a roman-styled border which is 60 px on top and bottom and 100 px on left and right.
I want to add a background-image to the grid-layout and make it cover the content part and part of the border.
Is there anyway to position the background-image properly for this case?
Right now I get:
Where I used background-size: cover; which works vertically but not horizontally and is not responsive.
My css:
.outer-border {
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-image: url($outer_no_top) 23% 15% 23% 15% repeat;
background-image: url("theme/matrix-marble.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: right
}
Right now the background is only a .jpg, but I have tried different formats but still cannot handle the positioning.
I got it to work in a good way by putting it as a background to the grid-layout, then I had to work with positioning, z-index and negative margins to put it behind the border. This led to the links inside the grid to become unclickable.
Totally stuck right now, any clues?
/David
UPDATE
JsFiddle:
https://jsfiddle.net/bcn42gvm/1/
Hi I had a go with a generic png image. If you specify overflow:hidden; in the grid class, it seems to work. Here is a JSBin - output and code
Related
I'm trying to add a vignette effect to an <img>.
I know there are solutions where it can be solved adding a <div> parent and a CSS, but it's not what I'm looking for.
HTML
So this is what I have...
<img src="https://example.com/image.jpg" class="vignette">
CSS
And I need help with this...
.vignette {
}
To reach this...
Any ideas?
The first obvious thought was an inset box-shadow. However that does not go over the actual image.
It will go over a background-image.
So this snippet keeps the given HTML img element as is but actually renders the image as zero width by making the element have padding which completely fills it.
The original image is put in as a background-image and a box-shadow inset overlays it.
Obviously you'll want to play with the shadow's parameters to get the sort of effect you want. This is what this snippet produces:
.vignette {
width: 400px;
height: 300px;
background-image: url(https://picsum.photos/id/129/400/300);
background-size: cover;
background-position: center center;
padding: 150px 200px;
box-sizing: border-box;
box-shadow: inset 0 0 70px 50px black;
}
<img src="https://picsum.photos/id/129/400/300" class="vignette">
I am using CSS3 background-position to position a background image 3% from the right edge of the container. However it appears in a different position compared to if i have an equivalent container that is 97% wide with the background image right aligned. You can see what i mean at http://jsfiddle.net/deshg/9qveqdcu/2/, the logo in the black row is further to the right than the one in the green row but surely they should be in the same horizontal position?
If anyone could shed some light on why this is happening it would be massively appreciated.
For reference, code is below.
Thanks all!
#container {
width: 100%;
background-color: #ffcc00;
}
#d1 {
background-color: #cccc00;
background-image: url('http://jsfiddle.net/img/logo.png');
background-position: right 3% center;
background-repeat: no-repeat;
width: 100%;
}
#d2 {
background-color: #000000;
color: #ffffff;
background-image: url('http://jsfiddle.net/img/logo.png');
background-position: right center;
background-repeat: no-repeat;
width: 97%;
margin-right: 3%;
}
<div id="container">
<div id="d1">
abvc
</div>
<div id="d2">
def
</div>
</div>
The background image itself is being offset 3% of it's own width
From the docs:
Percentages refer to the size of the background positioning area minus
size of background image; size refers to the width for horizontal
offsets and to the height for vertical offsets
Here's an illustration when using 25% 25% (from CSS Tricks):
Background position is not working as you thinking.
It's different than if you, say, had an and positioned it at left: 50%; in that scenario, the left edge of the image would be at the halfway point. If you want to center it, you'll need to pull it back to the left (negative translate or negative margin)
For better understanding refer Link And Link
For what you trying to achieve you have to set
background-position: 96% 0px, center center;
Fiddle
I was wondering if there is anyway to make the background image in a div expand to the border.
Let's say I have a div with a background and a border. I want to make the background image in the div expand over the border so it kind of looks like there is no border at all(I know there's no point for this but I need to know how to do it for something I'm working on).
Maybe something like this code:
#myImage {
height: 200px;
width: 500px;
background-image: url("image.jpg")
background-repeat: no-repeat;
border: 0px solid black;
overflow: hidden;
}
I'm trying to use 2 instances of background-image in one <div> layer.
The first background-image (which is partly transparent) should be displayed at top of the <div>, the second should be displayed directly under the the first background-image (this works).
Due dynamic content the second image with a height of 1px should be repeated vertically (repeat-y) and start repeating under the first background-image. My Problem is when I try to repeat the second background-image it is repeated over the whole <div> layer.
.mainFrameRoundBorder {
border: none;
background: url(../images/theme_box_main_l.png), url(../images/theme_box_main_2.png);
background-repeat: no-repeat, repeat-y;
border-radius: 0 0 0 0;
box-shadow:0 0 0 0;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-position: center top, 0px 364px;
margin-top:10px;
padding: 6px 15px;
overflow: hidden;
color: #FFFFFF;
}
I would suggest using the :before or :after pseudo-selectors. You could place your repeating background on the div as you normally do, and then put the non-repeating background in a pseudo-selector element.
This tutorial should be able to give you some good pointers on this method:
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
I would suggest you to use z-index
i have div take css class
.headbg01
{
background-image: url(../images/header_background01.jpg);
border-left: #cccccc 1px solid;
background-color: #ffffff;
width: 920px;
background-repeat: no-repeat;
height: 160px;
border-right: #cccccc 1px solid;
}
its working great in ie
the problem is the bg image doesn't appear properly in firefox
here is the ie div view
alt text http://img341.imageshack.us/img341/3595/35520026.jpg
and here is the firefox div view
alt text http://img641.imageshack.us/img641/950/31289427.jpg
i don't know whats wrong is it the height or what?
please i need some help
You may need to supply the background-position, try this:
.headbg01
{
background: #fff url(../images/header_background01.jpg) no-repeat top left;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: 920px;
height: 160px;
}
try declerating a strict doctype that should do the job
It appears that one browser is stretching the height/width to fill the div without keeping the image's height/width ratio, whereas the other is using the image's dimensions to scale it properly.
Make sure your image and your div have the same dimensions, minus the 2 extra pixels for the left and right border.
EDIT:
After closer inspection, it appears that the top of the second image is being cut off. Try specifying background-position: top left;.