I'm trying to accomplish the following:
I have fixed left sidebar with percent width like so:
.sidebar {
position: fixed;
background-color: tomato;
width: 35%;
height: 400px;
}
.. and a right container with a fixed background image:
.right {
background: url('http://farm7.staticflickr.com/6212/6365239995_8f5d03fb30_b.jpg') no-repeat fixed;
height: 400px;
}
How can I make the background image start where the width of the sidebar ends and not be below it?
Here is a fiddle: http://jsfiddle.net/EKqPg/ (the opacity propery is there for demo purposes)
.right {
background: url('http://farm7.staticflickr.com/6212/6365239995_8f5d03fb30_b.jpg') no- repeat fixed;
min-height: 400px;
background-size: 65%;
background-position: left 100% top 0px;
}
http://jsfiddle.net/aronez/EKqPg/4/
something like this?
I think this is what you're looking for:
add background-position property to .right
information regarding this property: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
.right {
background: url('http://farm7.staticflickr.com/6212/6365239995_8f5d03fb30_b.jpg') no-repeat;
height: 400px;
background-position:289px,0px;
}
updated fiddle:
http://jsfiddle.net/EKqPg/1/
From what I understand, you never want to have any content inside .right on the 'left' anyway, so why not give it (100-35)% = 65% width and float it to the right?
.sidebar {
width: 35%;
float: right;
}
Fiddle: http://jsfiddle.net/Q4Hey/
The only reliable way to do this by using background positioning properties will end up ruining the aspect ratio, unless you can define an absolute width (not a %):
.sidebar {
background-position: 100% 50%;
background-repeat: no-repeat;
background-size: 65% 100%;
}
Fiddle: http://jsfiddle.net/K9N8p/
Related
I'm trying to add a stylish "wave" element to the top of a div, however with my attempts, the svg moves from its position and leaves a gap when the browser resizes.
Here's a mockup of what it should look like:
CSS:
.wave {
position: absolute;
top: -72px;
}
.container {
background: #eee;
}
.col-1 {
height: 200px;
}
.col-2 {
position: relative;
background: #fff;
height: 100px;
width: 100%;
margin-top: 100px;
}
My other attempt was using background-image: url(wave.svg); in a :after selector, but same results.
Here's a codepen:
https://codepen.io/anon/pen/LmRyLK
How can I get the wave to keep put as is when it's resizing and when it's not?
Set your SVG as a background image on the element where you have your funky purple bit, you can stack the background images on each other, like so:
.purpleElement{
background: url("/path/to/asset/image.svg") bottom center no-repeat, purple;
background-size: 100%;
/*I've set a height here to replicate content*/
height: 70vh;
width: 100%;
}
I've forked off your codepen to show what will happen
This'll probably be one of the easier questions, but I just cannot seem to find the answer.
I've got the following setup:
.wrapper {
position: absolute;
top: 5%;
bottom: 5%;
left: 50%;
transform: translateX( -50%);
}
img.content {
height: 100%;
width: auto;
}
The image's width doesn't seem to change when shrinking the height of the window.
Here's a quick JSfiddle to demonstrate the issue. Adjusting the height of the window either skews or offsets the image, instead of adjusting the width accordingly.
https://jsfiddle.net/5p82ey8k/
Cheers
width + translate is maybe not the best way.
block and margin auto is less tricky:
.wrapper {
position: absolute;
top: 5%;
bottom: 5%;
left: 0;
right: 0;
}
.content {
height: 100%;
display: block;
margin: auto;
}
<div class="wrapper">
<img src="http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg" alt="" class="content">
</div>
https://jsfiddle.net/5p82ey8k/2/
If you want to keep the image a well <img/> you could try this style.
img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
This should preserve the ratio. However a better solution in my opinion is making the img a css background-image, and setting it's size to cover, like so:
.image {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
you could implement your picture as a background image instead of an img. and give the container this stylings.
background:url('imgurl') center center no-repeat;
background-size:cover;
this way you could set the background-size property which allows you to let the picture always covers the container or contains it
about background-size
see working fiddle.
I am working with a set HTML template that makes things a little tricky to customize exactly the way I want. So I am stuck with a structure that somewhat lacks flexibility.
I have a div that takes up 50% width of the page, but I want to center a containing div in the middle of the page. Due to other restrictions in other parts of the page, I really can't change the parent div being set to position: relative.
This is the effect I am after:
This is the code I have so far (which is not working):
HTML:
<div class="parent">
<div class="centerpage"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Berlin_U-Bahn_Train_A3L71.jpg/220px-Berlin_U-Bahn_Train_A3L71.jpg"></div>
</div>
CSS:
.parent {
background-color: #85D782;
height: 400px;
width: 50%;
position: relative;
}
.centerpage {
position: absolute;
}
you can use the old method of absolute and negative margin :
http://codepen.io/anon/pen/Htpen
.parent {
background-color: #85D782;
height: 400px;
width: 50%;
position:relative;
}
.centerpage {
position: absolute;
left:100%;
top:50%;
vertical-align:middle;
margin :-80px 0 0 -110px;/* negative margin is equal to half height/width of image */
}
or use a background-image or gradient http://codepen.io/anon/pen/GDbtg :
.centerpage {
background:
linear-gradient(to right,
#85D782 0%,
#85D782 50%,
#ffffff 50%,
#ffffff
)
;
height: 400px;
text-align:center;
line-height:400px;
}
img{
display:inline-block;
vertical-align:middle;
}
put image into a div and apply class below
{
width: 100px /* with your width whatever it is */;
text-align: center;
padding: 0px;
height: 110px;
display: table-cell;
vertical-align: middle;
}
and add one more class
.centerpage img {
width:100%;
}
I'm trying to use webkit-mask-size to make a mask image smaller. Like this:
.myClass {
width: 100%;
height: 100%;
background: #ffffff;
-webkit-mask-size: 50% 50%;
-webkit-mask: url(../css/images/myimage.png) center center;
}
The div which has myClass applied to it has a parent container which has a fixed height set on it.
Whatever I set -webkit-mask-size to it makes no difference.
Just swap the order:
.myClass {
width: 100%;
height: 100%;
background: #ffffff;
-webkit-mask: url(../css/images/myimage.png) center center;
-webkit-mask-size: 50% 50%;
}
When you specify the whole property, -webkit-mask, it contains values for all the subproperties, so it resets the -webkit-mask-size.
If you set that the last, that won't happen.
Alternatively, specify the subproperties individually (image, position, size ...)
Hmm. I think it might be that center center after your webkit mask url. Also you should set a webkit-mask-position. Take a look at this code:
.myClass {
width: 100%;
height: 100%;
background: red;
/*-webkit-mask-size: 50% 50%;*/
-webkit-mask-position: 0 0;
-webkit-mask-size: 200px 200px;
-webkit-mask-image: url(https://dl.dropboxusercontent.com/u/535060/mask.png);
}
It works for me... Here is the fiddle: http://jsfiddle.net/U9axq/
I have a footer that is 1024px in width with a background image 1024px by 482px.
I want to put an x-repeating background to the left of it and an x-repeating background to the right of it. How do I do this?
This is what I have:
.footer {
background:
url("footerleft-bg.png") repeat-x,
url("footerright-bg.png") repeat-x 0 0 #fff;
height:482px;
width:100%;
}
But it makes the left background image completely cover the right one.
You could do it like this:
demo
footer {
position: absolute;
bottom: 0;
width: 100%;
min-height: 10em;
background: black;
}
footer:before, footer:after {
position: absolute;
top: 5%; bottom: 5%;
width: 40%;
background-repeat: repeat-x;
background-size: 1px 100%;
content: '';
}
footer:before { left: 5%; background-image: linear-gradient(crimson, black); }
footer:after { right: 5%; background-image: linear-gradient(black, dodgerblue); }
However, there is no way to do it without using nested elements or pseudo-elements. A background repeats itself or it doesn't. It doesn't repeat itself just on an interval from point A to point B (though I would sometimes find that useful as well).
CSS2 does not support multiple background images. You'll need to nest another HTML element to make this work.
See: http://www.quirksmode.org/css/multiple_backgrounds.html