http://jsfiddle.net/sXLg7/1/
I am trying to place the background image such that there is 50px space left at the top and bottom of the div.
I can position background image easily 50px below top by this property
background-position: 0 50px;
But, how do i also position this background image so that there is 50px space lefft at the bottom
I tried this
background-position: 0 50px 0 50px;
but this doesn't seem to work. I assumed it would accept 4 parameters for positioning it from 4 directions.
Any ideas?
Try the background-clip property instead :
padding-top:50px;
padding-bottom:50px;
background-clip: content-box;
See this Fiddle : http://jsfiddle.net/A5u8j/
Unfortunately, I do not believe this is possible. Depending on what it's being used for, you might be able to use two divs, with the inner div having the background image and a top & bottom margin of 50px;
try adding this two properties
background-size: 500px 400px;
background-position: 0 50px;
You can't do this with background position; however, you could hack something together using a pseudo-element.
http://jsfiddle.net/sXLg7/3/
Here is the updated CSS:
.test {
border: 2px solid red;
height: 500px;
width: 500px;
position: relative;
}
.test:before {
content: '';
z-index: -1;
background-image: url("http://www.reallyslick.com/pictures/helios.jpg");
background-repeat: no-repeat;
position: absolute;
top: 50px; left: 0; right: 0; bottom: 50px;
}
You can use CSS background-size, although browser support is somewhat limited.
.test {
border: 2px solid red;
background-image: url("http://www.reallyslick.com/pictures/helios.jpg");
background-position: 0 50px;
background-size:100% 400px;
height: 500px;
width: 500px;
background-repeat: no-repeat;
}
Working Example
Alternate Method
Alternately, you can use two nested elements. The outer has padding set on the top and bottom to so that the inner won't reach the top/bottom.
I've used CSS box-sizing so that the padding is accounted for in the height. Note that support for this is also somewhat limited.
Working Example
Alternatively, you can subtract the padding from the height of the outer element.
Working Example
Heres one way todo it. Place an image with absolute positioning, and a negative z-index. Places it behind any content in your test div.
http://jsfiddle.net/sXLg7/8/
html
<div class="test">
Text on top of background.
<img src="http://www.reallyslick.com/pictures/helios.jpg" class="background"/>
</div>
and the css
.test {
border: 2px solid red;
height: 500px;
width: 500px;
overflow: hidden;
position: relative;
color: #fff;
}
.test .background {
position: absolute;
bottom: 50px;
left: 0;
z-index: -1;
}
You could put a 50px border on the element.
http://jsfiddle.net/sXLg7/10/
html
<div class="test"></div>
css
.test {
outline: 2px solid red;
border: 50px solid transparent;
background-image: url("http://www.reallyslick.com/pictures/helios.jpg");
background-position: center;
background-size: auto 100%;
height: 500px;
width: 500px;
background-repeat: no-repeat;
box-sizing: border-box;
}
why not just add a 50px margin? like this:
.test {
border: 2px solid red;
background-image: url("http://www.reallyslick.com/pictures/helios.jpg");
height: 500px;
width: 500px;
background-repeat: no-repeat;
margin:50px;
}
http://jsfiddle.net/4Dmkv/
Related
I've been following this solution to add responsiveness to my parallax images in my right grid. The responsiveness is working fine except the image doesn't takes up the WHOLE viewpoint.
I have put a red border around the image to show this: https://jsfiddle.net/65r3bth1/3/
When it becomes responsive, the image doesn't fill up the left side of the viewpoint unless I change the background-size and mess around with my background positioning. Is it possible to ensure my image takes up the whole viewpoint while maintaining its responsiveness?
.image-greet {
background: url("http://placekitten.com/g/800/800")
calc(75% + 120px) 50px /120px auto;
/*calc (middle of right grid + how pushed to the rigth) how far push down from top / zoom*/
border-top: 20px;
background-size: 40% auto;
width: 78%;
height: 12%;
margin: 15% auto 0;
background-attachment: fixed;
background-repeat: no-repeat;
border: 1px solid red;
}
Is it possible to ensure my image takes up the 100% of the viewpoint while maintaining responsiveness in its original background position?
Thank you!
The solution that you are following can be achieved with CSS, without the need for JS, as you can see in this fiddle. Hope this helps!
.body {
display: flex;
}
.container {
border: 1px solid red;
width: 100%;
height: 400px;
margin-top: 50px;
}
.sidebar {
height: 2000px;
width: 50px;
background-color: #333333;
margin-right: 30px;
}
.bg {
background: url('https://loremflickr.com/320/240');
background-size: cover;
background-attachment: fixed;
width: 100%;
height: 100%;
display: block;
}
<div class="body">
<div class="sidebar"></div>
<div class="container">
<div class="bg"></div>
</div>
</div>
On my website I am building a custom HSV Color picker.
Instead of using Gradients I've decided to opt for a .SVG Gradient image that I will use in my HSV Slider.
I am having a problem with the fitting of that Image into the Background of my DIV.
Here's an example.
The Image is fitted perfectly in both Mozilla Firefox and Internet Explorer, but in Edge it looks as if only the "height" is at a "100%", and the "width" is "auto" - Which it is not, at least not in the CSS:
#pvdivsliderhue {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
width: auto;
height: 30px;
border-radius: 15px;
background-image: url('images/pvhue.svg');
background-size: 100% 100%;
background-color: green;
display: flex;
}
How would I go about solving this issue?
Appreciate all the help!
SVG is still buggy in Edge. Therefore, I advise to use old school .png or .jpg images if you don't require a vector image.
Check out the working example:
/* Demo Styles */
.picker {
height: 150px;
width: 200px;
position: relative;
margin: 0 auto;
background-color: #e9e9e9;
}
/* Hue Slider */
#pvdivsliderhue {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
width: auto;
height: 30px;
border-radius: 15px;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Hue_alpha.png/900px-Hue_alpha.png');
background-size: 100% 100%;
background-color: white;
display: flex;
}
<div class="picker">
<div id="pvdivsliderhue"></div>
</div>
Make the margins and padding 0
#pvdivsliderhue {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
width: auto;
height: 30px;
border-radius: 15px;
background-image: url('images/pvhue.svg');
background-size: 100% 100%;
background-color: green;
display: flex;
margin :0;
padding :0
}
Try background-size: cover or background-size: container. I hope it will solve your problem.
Suppose I have a div that is on top of the ion-content. I'm trying to set the height of the div by getting the width of the device and calculate it so that the aspect ratio is 16:9 just like the youtube app. However, I have no idea how to achieve it using css. For now, this is what I have.
div {
width: auto;
max-height: 40%; <-- how to set this height so that it is 16:9
background: black;
div.img {
width: 360px;
max-height: 202.5px;
}
What I wanted:
You just need to use this simple css Style
56.25% = 16:9 Aspect Ratio
.img {
width: 100%;
height: 56.25vw;
}
First: your source images need be 16:9.
Than you can as simply as :
div {
width: auto;
max-height: 40%;
background: black;
div.img {
height: 100%;
}
Of course if that css corresponds to a properly nested <div><img...></div> structure.
¿Can you set the image as background-image? In that case you could use this:
The HTML:
<div class="container">
<div class="header" style="background-image: url(https://placehold.it/1200x600)">
</div>
<div class="content">Content here</div>
</div>
And the CSS:
.container {
width: 960px;
max-width: 90%;
margin: 20px auto;
border: 1px solid #ddd;
}
.header {
position: relative;
width: 100%;
padding-top: 56%;
background-color: rgba(#f00,0.1);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
overflow: hidden;
}
.content {
padding: 30px;
}
Here you can see it in action: Codepen
Hope it helps!!
I want to make it so that Online Users div stays always at size of 200px while the chat window to the left of it resize to the max size it can taking all available space.
So when window is resized for example - the chat window will shrink but Online Users window stays at 200px, kind of like liquid layout.
left div (chat window) is: entry_window
right div (online users) is: online_window
#entry_window{
border: 2px solid #D4D4D4;
float: left;
width: 75%;
height: 100%;
margin: 1%;
overflow: scroll;
overflow-x: hidden;
}
#online_window{
border: 2px solid #D4D4D4;
margin: 1%;
margin-left: 0%;
display: inline-block; float: left;
background-color: white;
width: 21.5%;
height: 100%;
}
oh and by the way: for vertical size I made this function to make it in height as big as possible without disturbing bottom part.
function autoscale(){
var v = window.innerHeight - 170;
document.getElementById("entry_window").style.height= v+"px";
document.getElementById("online_window").style.height= v+"px";
}
This can be done entirely without javascript. You can use absolute positioning along with defining top/left/bottom/right and width.
example:
<div id="lefty">this is left content</div>
<div id="righty">this is right content</div>
and
#lefty {
position: absolute;
background-color: blue;
top: 0;
bottom: 0;
left: 0;
right: 200px;
}
#righty {
position: absolute;
background-color: red;
top: 0;
bottom: 0;
width: 200px;
right: 0;
}
See this jsfiddle:
http://jsfiddle.net/Lyp96yqq/
With display:table and table-cell you can do it this way:
*{margin:0;padding:0}
.parent {
width:100%;
display:table;
}
.parent > div {
height:200px;
line-height:200px;
background:orange;
display:table-cell;
}
.parent .fixed {
width:200px;
}
.parent .flexible {
background:red;
}
<div class="parent">
<div class="fixed">Fixed Width</div>
<div class="flexible">Chat Room</div>
</div>
Here The Example on Jsfiddle too.
This could be easily done with the css calc function. However, it depends on what browsers you want to support. check out this link so see what it is compatible with.
Essentially, just do this:
#entry_window{
border: 2px solid #D4D4D4;
float: left;
width: calc(100% - 208px);
height: 100%;
overflow: scroll;
overflow-x: hidden;
background-color:red;
}
#online_window{
border: 2px solid #D4D4D4;
margin-left: 0%;
display: inline-block;
float: left;
background-color: white;
width: 200px;
height: 100%;
}
note: you need to -208 to take the border into account. Also, check out the jsfiddle
I want to take what is here:
http://test.thebkk.net
and make it scale and fit to any browser window, maintaining position of the elements and keeping the image completely in the window.
CSS involving positioning etc.:
body {
background-color: black;
background-image: url('http://thebkk.net/Images/BVF-Temp.jpg');
background-repeat: no-repeat;
background-position: 45px -30px;
}
/* Player Style */
#player {
position: fixed;
width: 680px;
margin-top: 15px;
margin-left: 350px;
border: outset 5px white;
}
ul#menu {
position: fixed;
margin-top: 12px;
margin-left: 90px;
padding: 0;
list-style: none;
clear: both;
}
use background-size: 100% auto; (w/h) and thinks should work. for everything else use percentage widths (and heights) and positions as well