Is there a way of having one image (PNG or SVG) as a background for multiple divs? Please see the images below as to how it would work. Also when the screen width becomes smaller and the divs line up below each other, would there be a way of changing the background to match that aswell?
DIVs without background:
The background:
DIVs with background:
Using background-attachment: fixed will give you the desired effect. You just need to make sure your background image works within the bounds of the div or else you will get tiling which can be turned off with background-repeat: none
.border {
border: 1px solid #000;
position: absolute;
}
div {
background-image: url("https://dummyimage.com/500x250/000/fff.png");
background-attachment: fixed;
}
<div id="div1" class="border" style="height:100px;width:200px"></div>
<div id="div2" class="border" style="left:225px;height:100px;width:200px"></div>
<div id="div3" class="border" style="top: 125px;height:100px;width:225px"></div>
<div id="div4" class="border" style="left:250px;top:125px;height:100px;width:175px"></div>
You might be looking for background-attachment: fixed:
If a background-image is specified, the background-attachment CSS
property determines whether that image's position is fixed within the
viewport, or scrolls along with its containing block.
.container {
background-color: gray;
}
.window {
background-image: url("https://i.stack.imgur.com/RPBBs.jpg");
background-attachment: fixed;
display: inline-block;
}
<div class="container">
<div class="window" style="width: 100px; height: 50px; margin: 20px;"></div>
<div class="window" style="width: 200px; height: 50px; margin: 20px;"></div>
<div class="window" style="width: 500px; height: 50px; margin: 20px;"></div>
</div>
How's it going? I'm still relatively new to HTML and CSS, but I think we can tackle this one together!
Your "WHOLE" picture might exist in a that contains the other "WINDOW" elements...where each of the window elements is positioned relative to the parent div that contains the whole picture
.whole{
position:relative;
}
.UpperL{
position: absolute;
height: 25px;
width: 100px;
}
.UpperR{
position:...;
}
.LowerL{
position:...;
}
.LowerR{
position:...;
}
<div class="whole" img src="whole picture.png">
<!-- let the whole class contain the background image-->
<div class="UpperL"> Upper Left Window</div>
<div class="UpperR"> Upper Left Window</div>
<div class="LowerL"> Upper Left Window</div>
<div class="LowerR"> Upper Left Window</div>
</div>
The code doesn't run well yet, but the point of setting four windows inside of a fifth window is to give the four an ability or property to see through the fifth;
If your parent contains the image, but is still colored all white (opacity at 100%), the four window elements should be able to see through the opacity of the fifth window (turning their opacity down to reveal the image).
hmm...
Related
I have 3 boxes on my page. The second (red) has to be fixed position. If the height of the green box increases, it has to increase to the top side, not to the bottom. So red one's position has to be fixed. Also if the red one's height increases, yellow has to move forward to the bottom. How can i do that?
Here is my css and html code:
#div1 {position:relative;top:0;bottom:0;right:0;background:green;width:100px;height:100px;}
#div2 {width:100px;height:140px;position:absolu;bottom:0;left:0;background:red;}
#div3 {width:100px;height:100px;position:relative;top:0;right:0;background:yellow;}
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div class="parent">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<!-- End your code here -->
</body>
</html>
This is possible with simple CSS using a few positioning tricks. First off, since everything orients around your red div, you need this to be the cornerstone. Setting this div to a relative position and inserting the remaining divs as children will allow all of its children to be positioned absolute relative to the parents location.
Because using absolute positioning as a percent will base off of the relative positioned parents size, we can use this to always attach the bottom div off of its base with position:absolute;top:100%. This places the child div at 100% distance from the top of your parent div.
Under that same logic, we can place a div always at the top of the parent using position:absolute;bottom:100%;
Note: I've changed your ID's to classes to allow multiple examples
.div1 {
width:100px;
height:140px;
position:relative;
top:200px;
background:red;
/* ignore this in a real case, these allow multiple examples to stack nicely*/
float:left;
margin-left: 5px;
}
.div2 {
width:100px;
position:absolute;
bottom:100%;
background-color:green;
}
.div3 {
width:100px;
position:absolute;
top:100%;
background:yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div class="div1">
<div class="div2" style="height:100px;"></div>
<div class="div3" style="height:100px;"></div>
</div>
<div class="div1">
<div class="div2" style="height:200px;"></div>
<div class="div3" style="height:200px;"></div>
</div>
<div class="div1" style="height:190px">
<div class="div2" style="height:120px;"></div>
<div class="div3" style="height:227px;"></div>
</div>
<div class="div1" style="height:190px">
<div class="div2" style="height:20px;"></div>
<div class="div3" style="height:360px;"></div>
</div>
<!-- End your code here -->
</body>
</html>
When in doubt, create more parent or wrapper elements around the elements you want to manipulate.
* {
box-sizing: border-box;
}
.parent {
position: absolute;
top: 0px;
left: 0px;
border: 5px solid #0000ffc0;
width: 100%;
height: auto;
}
#div1-wrapper {
border: 2px solid lime;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100px;
}
#div1 {
position: absolute;
bottom: 0px;
left: 0;
background: green;
width: 100px;
height: 20vh;
}
#div2-wrapper {
border: 2px solid #ff3300;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 30vh;
}
#div2 {
width:100px;
height: 30vh;
position: absolute;
top: 0;
left: 0;
background: red;
}
#div3-wrapper {
border: 2px solid #ffff00;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100px;
}
#div3 {
width: 100px;
height: 100%;
position: relative;
top: 0;
right: 0;
background: yellow;
}
<body>
<!-- Start your code here -->
<div class="parent">
<div id="div1-wrapper">
<div id="div1"></div>
</div>
<div id=div2-wrapper>
<div id="div2"></div>
</div>
<div id=div3-wrapper>
<div id="div3"></div>
</div>
</div>
I created a wrapper around each of the elements named #div. The wrapper around #div1 is #div1-wrapper, and then #div2-wrapper, and so on...
Just to make sure that you overwrite any native browser position styling, give position: relative to each wrapper. With a top: 0 and left: 0. This will make sure that each element begins on the far left of the .parent element and each one begins just after the end of the last one.
If you want #div1 to grow and shrink with the size of the screen, give it a height in vh instead of pixels. #div1's outer wrapper should be position: relative, but the #div1 element itself should be position: absolute. (If you try to set its position to relative, it will stick to the top of its wrapper, rather than the bottom, as you want.
You said you wanted the red div (#div2) to be fixed from the top, but able to grow and shrink underneath. To achieve this, you need to set the position of #div2 to absolute, sitting inside of a position: relative wrapper.
You also need to make sure that it's wrapper (#div2-wrapper) has a height set in vh, instead of pixels. That way, the whole outer wrapper will grow and shrink. And to have the inner element (#div2) grow and shrink with it, set its height to 100% of the parent.
Next, set the #div3-wrapper to position relative and a set height of your choosing (in this case, 100px).
And lastly, set the #div3 (yellow div) to height: 100%;
To make the interactions more clear, I gave the outermost .parent element a blue border, and I gave each #div-wrapper a border color that matches the inner #div and I set box-sizing: border box on all elements.
My Goal:
So I am making a webpage with a map of the USA as the "background image" and on top of that map I have about 10 markers pointing to specific location. The markers are NOT part of the picture thats just me adding them with absolute positioning and top and left with a percentage.
The Problem:
As I scale down the page or scroll up and down the markers that I have set with absolute positioning begin to move out of the spot they are suppose to be on because the background-image is getting smaller do to it displaying 100%.
The Question:
How can I achieve what I want with the markers on the map where they are suppose to be not moving as the window is being scaled down?
Now I know of only 1 solution and this solution can take a VERY LONG TIME. What I was thinking is instead of positioning the markers that I want on the map with percentage I can do it with pixels and then use a TON of media queries and keep on adjusting it. Not only is this solution going to take extremely long but it also does not seems like the correct way to go about this.
HTML:
<div class="container main-content"><!--the map background image is set here-->
<div class="row relative">
<div class="eq-content-wrap">
<div class="eq-content">
<div class="marker"></div> <!--the marker that is positioned absolute-->
</div>
</div>
</div>
CSS:
html, body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: #000;
}
body{ overflow: hidden; }
.main-content{
background: url('assets/img/map1.jpg') no-repeat top center;
background-size: contain;
height: 100% !important;
width: 100% !important;
}
.eq-content-wrap{
position: absolute;
width: 500px !important;
top: 22%;
left: 40%;
}
.marker{
height: 40px;
width: 40px;
border-radius: 100%;
background-color: red;
position: absolute;
top: 50%;
margin-top: -20px;
}
The problem is that your background image's size is set to 100%: background-size: 100%. This means that when the browser tries to scale the content, the background does not scale with it (it stays 100%).
Your best bet is to remove the background-size property completely. This allows the markers to stay in place when the page scales, however, you won't get the full-screen background effect that you currently have (unless you have a larger image).
The background will still move, however, once the browser window width is less than the image's width. This is because you have the background-position set to top center. The center is what causes it to move once the browser window width is less than the image width. Change center to left and it will fix that issue. You'll also need to set the marker's container to be based to the left as well for this to work on wider screens though. Basically, removing all center properties would help, but the screen wouldn't be centered on a wide screen.
Try substituting css :before pseudo element for .marker ; set percentage unit values utilizing calc()
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: #000;
}
body {
overflow: hidden;
}
.main-content {
background: url(http://lorempixel.com/400/300) no-repeat top center;
background-size: contain;
height: 100% !important;
width: 100% !important;
}
.eq-content-wrap {
position: absolute;
width: 500px !important;
top: 22%;
left: 40%;
}
.main-content:before {
content: " ";
height: calc(12.5%);
width: calc(5%);
border-radius: 100%;
background-color: red;
position: absolute;
top: calc(50%);
left: calc(50%);
margin-top: calc(1%);
}
<div class="container main-content">
<!--the map background image is set here-->
<div class="row relative">
<div class="eq-content-wrap">
<div class="eq-content">
<div class="marker"></div>
<!--the marker that is positioned absolute-->
</div>
</div>
</div>
jsfiddle http://jsfiddle.net/o79rpawc/
I would like to place an image centrally within a div (fiddle). Because I want that div to inherit that div's height from another one that is floating next to it, I had to use this trick.
For that reason, the solutions described here don't seem to be working.
The requirement is that no other behavior is modified, but the code can be as long as the effect achieved is the same. I am also willing to accept solutions involving javascript, if necessary.
<div class="container">
<div class="logo-div">
<img class="logo" src="http://bit.ly/1qCKrtJ" />
</div>
<div class="text-div">
<h4 style="display: inline;">Because Sometimes It Takes a Village</h4><br />
What about robots the size of tea cups that scoot around on tiny wheels, snapping pictures with miniature cameras and keeping track of where they are in relation to dozens of others?
</div>
.container {
background: green;
overflow: hidden;
}
.logo-div {
background: yellow;
width: 150px;
float: left;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
.text-div {
background: blue;
float: left;
max-width: 350px;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
.logo {
width: 100px;
}
I have modified the code so that the logo image can be center aligned horizontally as well as vertically.
JSFiddle
HTML code:
<div class="container">
<div class="image-div">
<div class="logo-div">
<img class="logo" src="http://bit.ly/1qCKrtJ" />
</div>
</div>
<div class="text-div">
<h4 style="display: inline;">Because Sometimes It Takes a Village</h4><br />
What about robots the size of tea cups that scoot around on tiny wheels, snapping pictures with miniature cameras and keeping track of where they are in relation to dozens of others?
</div>
</div>
Css code:
.container {
background: green;
overflow: hidden;
}
.logo-div {
background: #FFFF00;
display: table-cell;
height: 100px;
text-align: center;
vertical-align: middle;
width: 150px;
}
.text-div {
background: blue;
float: left;
max-width: 350px;
}
.image-div {
float: left;
}
.logo {
width: 100px;
}
If you have further issue, please comment on the code, and modify the jsfiddle.
Regards D.
There are two ways for this. One you can set Margin property of any component to 'auto' if you want it to align at the middle. Of course you can set this property in CSS instead of using style tag.
<img src="http://bit.ly/1qCKrtJ" style="margin:auto;"/>
Another is using center tag
(As 'margin:auto' may not work for images for some browsers however it works for div tag.)
<center>
<img src="http://bit.ly/1qCKrtJ" alt="Logo">
</center>
If you need just horizontal center, try:
.logo-div {text-align: center;}
img {margin: 0 auto;}
http://jsfiddle.net/yXNnd/18/
JS version
Using jQuery (I'm too lazy :))
http://jsfiddle.net/yXNnd/25/
Add this js
$(document).ready(function(){
var img = $('.logo-div img');
var top = ($('.container').height() / 2) - (img.height() / 2);
img.css('margin-top', top + 'px');
});
I want to overlay the background image of a parent div over the content of its children.
What I have in essence is simple:
<div> <!-- has BGImage -->
<div>
<div>
<iframe /> <!-- serves content that needs to be interacted with -->
</div>
</div>
</div>
The top parent div has a background image (a silhouette of an ipad) and the content in the iframe is a page serving JQuery Mobile content (it is a mobile preview). I can't have another parent div with absolute positioning using z-index because the content in the iframe must remain fully usable and click-able.
The reason I need this is that the inside edge of the tablet silhouette has a transparent inner border, I need this to soften the edges of the served iframe content.
I hope this is achievable, I put the JavaScript and JQuery tags in the question because I am not shy to using if they need to be, but as always, if I can complete this using CSS then I am all for that.
Mock up JS fiddle basically showing what I have: http://jsfiddle.net/fQ22A/1/
The following image is where I am wanting to go based on the JSFiddle above:
Not the way you wanted but your purpose is solved here. http://jsfiddle.net/fQ22A/5/
Full Screen: http://jsfiddle.net/fQ22A/5/embedded/result/
HTML:
<div id="finalCont2">
<div id="insidewrapper2">
<div id="outsidewrapper2">
<div class="fullheight2">
<iframe id="template_preview_iframe" src="http://www.w3schools.com" width="770" height="1024"></iframe>
</div>
</div>
</div>
</div>
CSS:
#insidewrapper2{
background-image:url("http://desktop.ly/images/devices/ipad_mini_black.png");
background-repeat: no-repeat;
display: block;
height: 1289px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
width: 870px;
}
#outsidewrapper2{
position: relative;
}
.fullheight2{
padding-top:133px;
}
#template_preview_iframe{
overflow:hidden;
display:block;
border:none;
margin:0 auto;
}
You can't do that.
...but you can get something close to what I guess your want using a box-shadow inner.
EDIT:
body{border:none;box-shadow: inset 0 0 10px #000;}
http://jsfiddle.net/rwA2f/1/
This could be something closer to what you are actually after:
Demo: http://jsfiddle.net/abhitalks/ZVEug/2/
Full Screen: http://jsfiddle.net/abhitalks/ZVEug/2/embedded/result/
You need to position the iframe inside your div using positioning. Here is a simple markup to give you the idea:
HTML:
<div class="outer">
<iframe src="..." />
</div>
CSS:
div.outer {
width: 320px;
height: 320px;
background: url('...') no-repeat top left;
background-size: 100%;
position: relative;
}
iframe {
border: none;
width: 250px;
height: 220px;
position: absolute;
top: 48px; left: 32px;
border-radius: 10px;
box-shadow: 0 0 30px #fff;
opacity: 0.6;
}
The trick is to use a combination of box-shadow with opacity to give the illusion of soft edges and also meets your requirement of the background peeping through at the same time the iframe contents are usable.
Please notice how the background's reflection (diagonal glass reflection) is visible through the iframe contents.
I am using this system to try to implement a sliding window selector.
I have a <div> that is contained in another <div>. The outer <div> has a fixed size and the inner one should expand to contain its contents.
<div style="width: 25px; overflow: hidden">
<div id="middle">
<div style="width: 50px"></div>
</div>
</div>
The outer <div> has a fixed size.
The middle <div> should expand to match the size of the inner <div> (the one that has width 50px)
How, using CSS or JavaScript can I ensure that the middle <div> is as wide as the inner <div>, but still gets cut off by the outer <div>?
I have tried to use JQuery to get the length of the inner <div> and then dynamically set the width of the middle <div>, but this does not consistently get the right length.
Div elements, by default, try to fit their container. so the middle one will try to fit its container which is the outer div.. it is not affected by content.
If you set the middle one to be display:inline-block you make it fit the contents instead of the container it that fixes the issue..
Can you make inner div float? That way it should display full width of the span but without editing outer div width to expand the content longer than outer div width will be invisible.
divs are block elements, so your inner div will naturally expand to the width of the containing div. You can ensure this by setting the style attribute of the inner div to 100%. You should also set its overflow CSS property to "hidden."
You can get the width of the content of any HTML object like this:
document.getElementById("myDIV").clientWidth
Use display: inline-block and max-width: ?px on middle. You'll want to put overflow-x: hidden on middle (not outer like in your code), but I left it off in the demo so you could see the width working.
Demo: http://jsfiddle.net/ThinkingStiff/hHDQS/
HTML:
<div class="outer">
<div class="middle">
<div id="inner1"></div>
</div>
</div>
<div class="outer">
<div class="middle">
<div id="inner2"></div>
</div>
</div>
CSS:
.outer {
border: 1px solid green;
height: 100px;
width: 300px;
}
.middle {
border: 1px solid red;
display: inline-block;
height: 75px;
max-width: 300px;
}
#inner1 {
border: 1px solid blue;
height: 50px;
width: 50px;
}
#inner2 {
border: 1px solid blue;
height: 50px;
width: 350px;
}
Output:
If the inner div can be absolutely positioned the following will stretch it to fill up the parent completely (width and height):
#myInner{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
width:auto;
height:auto;
}