I'm trying to make a page without the opacity css stuff, but with a transparant image over all the text and images. Only, i can't get the background over the text.
CSS:
background-image: url('spotlight.png');
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
And HTML simple:
<div class="darkLayer"></div>
Result:
Thanks!
If you want the png overlay over everything in the page, you need to have your overlay div empty of all content, and increase z-index to something like 20000 or whatever.
Although, I'm not 100% sure what you are trying to do.
But it does beat css in terms of cross-browser compatiblity, I think.
Yes, use quotation marks on your image url.
The url should be url('spotlight.png'); and of course the png have to be transparent. I also suggest toninoj's idea with the high number z-index.
Anyway. Why do you want to do this? The only explanation I can guess is for making right click resist web pages, but there are other better way for reaching that goal.
How about this?
http://jsfiddle.net/Z8rkT/
In this example you'd just replace the background/opacity lines with your transparent background image.
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida, metus pharetra euismod eleifend, nisi est tempor massa, vel consectetur lorem elit non ante. Nulla facilisi. Nulla id libero eu erat suscipit pellentesque ultrices quis tellus. Donec ante dui, scelerisque nec venenatis id, suscipit sit amet ligula. Nulla turpis justo, fermentum id ullamcorper condimentum, posuere sit amet ligula. Praesent auctor, mi at tempor tincidunt, felis libero pretium ipsum, quis iaculis odio erat eu urna. Integer vel fermentum ipsum. Duis sit amet accumsan nunc. Nulla facilisi. Etiam condimentum nulla nec quam venenatis laoreet. Etiam massa ipsum, pellentesque sed imperdiet eget, ornare eget est. Fusce pulvinar lorem in nunc tempus fringilla. Vivamus posuere augue a mi interdum rhoncus. </p>
</div>
<div class="overlay"></div>
html, body {
width:100%;
height:100%;
}
.wrapper {
position:relative;
z-index:1;
}
.overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#333;
opacity:0.75;
}
Related
Explanation
I've run into an issue in my website; I have conflicting style sheets. Instead of manually changing each class, I'd like to take a different approach, which I hopefully could apply to other projects in the long run. After doing some research, creating a seperate web page and utilizing an IFrame on the original webpage seems best, however I wouldn't want users to notice any difference. Because of this it would have to be seamless, and have the height automatically adjust to that of the content on the external web page. In theory I could apply CSS to make the iFrame seamless, and set the height to either height:100%; or height:auto; which would ideally make the iFrame height that of the content.
However, both height settings don't affect the content inside the iFrame itself but by the container of the iFrame, meaning height:100%; would take up 100% of webpage it's being displayed on. I've seen answers to similar questions, however they all involve javascript for the solution. I'd like to avoid javascript, as not only am I not educated in javascript but I personally believe that there can be another way without involving another programming language.
TLDR In other words, I would like to create a completely seamless iFrame, displaying the contents of a different webpage. The height should automatically adjust to that of the content inside it. The end result should implement another webpage seamlessly without users noticing it as any different to the rest of the web page.
Code
I found a helpful question which helped me out writing the code, however it doesn't fully work as intended. The iFrame completely replaces all of web page instead of adding onto it (Example below). I didn't paste in my exact code, I trimmed it down to only keep the relevant parts.
CSS
html, body, iframe { height: 100%; }
html { overflow: hidden; }
HTML
<iframe src="https://example.com/" width="100%" scrolling="yes" frameborder="0">
<h2>Lorem Ispum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor vitae est finibus dapibus. Maecenas convallis ante turpis. Pellentesque eget interdum mi. Sed scelerisque rhoncus eleifend. Quisque tortor massa, molestie non odio et, tristique placerat enim. Fusce id massa eleifend, placerat massa at, auctor purus. Cras posuere augue et dolor convallis, at vulputate elit tincidunt. Morbi ut imperdiet orci. Donec commodo est metus, sit amet laoreet nisl mattis a. Sed magna nunc, molestie sed risus vel, faucibus euismod orci. Mauris bibendum, quam a lacinia euismod, ex mi laoreet odio, a tincidunt nisl neque in sapien</p>
Output
html, body, iframe { height: 100%; }
html { overflow: hidden; }
<iframe src="https://example.com/" width="100%" scrolling="yes" frameborder="0">
<h2>Lorem Ispum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor vitae est finibus dapibus. Maecenas convallis ante turpis. Pellentesque eget interdum mi. Sed scelerisque rhoncus eleifend. Quisque tortor massa, molestie non odio et, tristique placerat enim. Fusce id massa eleifend, placerat massa at, auctor purus. Cras posuere augue et dolor convallis, at vulputate elit tincidunt. Morbi ut imperdiet orci. Donec commodo est metus, sit amet laoreet nisl mattis a. Sed magna nunc, molestie sed risus vel, faucibus euismod orci. Mauris bibendum, quam a lacinia euismod, ex mi laoreet odio, a tincidunt nisl neque in sapien</p>
Desired Output
To show you the desired output, I downloaded the webpage from the iFrame and set css rules to simulate what I want. This is not an actual solution.
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
}
#iFrame {
width: 600px;
margin: 5em auto;
padding: 50px;
background-color: #fff;
border-radius: 1em;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
#media (max-width: 700px) {
body {
background-color: #fff;
}
#iFrame {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
#Desired {
background-color: white;
}
<div id="iFrame">
<h1>Example Domain</h1>
<p>This domain is established to be used for illustrative examples in documents. You may use this
domain in examples without prior coordination or asking for permission.</p>
<p>More information...</p>
</div>
<div id="Desired">
<h2>Lorem Ispum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor vitae est finibus dapibus. Maecenas convallis ante turpis. Pellentesque eget interdum mi. Sed scelerisque rhoncus eleifend. Quisque tortor massa, molestie non odio et, tristique placerat enim. Fusce id massa eleifend, placerat massa at, auctor purus. Cras posuere augue et dolor convallis, at vulputate elit tincidunt. Morbi ut imperdiet orci. Donec commodo est metus, sit amet laoreet nisl mattis a. Sed magna nunc, molestie sed risus vel, faucibus euismod orci. Mauris bibendum, quam a lacinia euismod, ex mi laoreet odio, a tincidunt nisl neque in sapien</p>
</div>
Thank you everyone, I looked forward to hearing what you have to say.
EDIT Reworded post
In html \ css, I've got a div element that can appear at different y positions of a page (conditional to the populated html above it). Problem occurs when content of the div rendered is too tall. In that case I'd like the div to expand to at most the page's height (e.g. based on screen resolution) and add a scrollbar to match its content.
Is there any pure html \ css solution for this, without using js?
Attached is an example of the div structure. Notice that I'd like to have a scroll inside the big blue div, without tying to a specific height, as I do not know in advance what are the given sizes (they're dynamic).
http://jsbin.com/jaboxoneju/edit?html,output
Here is a flexbox layout that causes the second div to scroll when its height would exceed the height of the window.
Live Demo:
html, body {
margin: 0;
padding: 0;
}
html, body, #container {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
}
#upper {
background-color: red;
}
#scrolling {
background-color: blue;
flex-grow: 1;
overflow: auto;
}
<div id="container">
<div id="upper"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultricies nisl lacus, sit amet viverra magna scelerisque a. Morbi rutrum quam a tellus fermentum, vel ultricies ligula dignissim. Nam bibendum nisi in metus bibendum, sit amet tristique massa molestie.</p></div>
<div id="scrolling"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultricies nisl lacus, sit amet viverra magna scelerisque a. Morbi rutrum quam a tellus fermentum, vel ultricies ligula dignissim. Nam bibendum nisi in metus bibendum, sit amet tristique massa molestie. Quisque pretium arcu non magna pretium, nec fringilla augue pretium. Etiam a tellus ipsum. Curabitur ultrices vel nibh sit amet feugiat. Etiam consequat id ligula eget suscipit. Vestibulum sagittis tincidunt quam porta eleifend. Suspendisse interdum metus et tellus maximus dapibus. Phasellus vel bibendum leo, eu faucibus nisi. Sed vestibulum interdum arcu, et sodales diam cursus vel. Aliquam tristique lorem posuere tortor aliquet, sit amet pharetra lectus tristique. Maecenas consectetur laoreet tellus. Proin interdum tincidunt ex non commodo. Morbi non tristique orci, vel porta ligula. Duis sollicitudin in elit eu laoreet.</p>
<p>Sed volutpat vel tortor id placerat. In nisl odio, ornare at enim sit amet, mollis ultricies libero. Mauris et auctor lorem, in maximus felis. Fusce elementum nisi odio, sed venenatis enim convallis euismod. Sed sed pharetra ligula. Donec venenatis imperdiet turpis, vitae vehicula leo luctus a. Cras ultrices rutrum aliquet. Proin scelerisque nisl vitae posuere consectetur. Sed viverra rutrum nulla ut accumsan. Curabitur posuere consectetur nulla nec cursus. Donec id massa odio.</p></div>
</div>
JSFiddle Version: https://jsfiddle.net/9gtLughL/
<div style="overflow:Auto;">
<h2>my code</h2>
</div>
use this code at the start of the div
You can do this using a table structure.
HTML:
<div class="container table">
<div class="table-row">
Top Content
</div>
<div class="table-row height-100">
<div class="table-cell">
<div class="height-100">
<div class="scroll">
Bottom scrollable content with 100% remaining height
</div>
</div>
</div>
</div>
</div>
CSS:
.table { display:table; }
.table-row { display:table-row; width:100%; }
.table-cell {display:table-cell; height:0; overflow:hidden; }
.container { height:100vh; }
.height-100 { height:100%; }
.scroll { overflow:auto; height:100%; }
The 100vh attributes makes the body tag to have 100% of view height(screen height).
In a table structure, the div with class table-row will get height as much as needed by children, but if it also has height-100 will get 100% of what the other rows do not occupy. Inside it I did a few ugly twitches to get the overflow running on a dynamic height table-cell,
Demo: http://jsfiddle.net/alexix/70vf92e3/2/
I don't want to just place text within an image. I want the text it to begin over the bottom-center of the image and to be able to run to the right, outside of the image.
Think of the stackoverflow site image above (if the text wasn't actually part of the image).
Consider if the orange bars continued till it was over the 'K'
Here is a crude example (# represents the image).
#################
#################
#####
##### TEXT GOES HERE
#####
I hope that I was able to adequately explain.
It would be impractical to list everything that I have tried, maainly because I didn't keep track of every single thing I have tried (sfd).
<td valign="left">
<div style="float:left;">
<img src="image.png" />
</div>
<div style="float:left;vertical-align:bottom; margin-right:100px">
<asp:Label ID="Label1" runat="server" style="font-size:1.5em;" >TEXT TEXT TEXT TEXT</asp:Label>
</div>
</td>
i'm not 100% on the solution you want, but i imagine it's something like this?
http://jsfiddle.net/ujL4pwx9/1/
HTML
<div class="foo">
<img src= "http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg"/>
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
}
img{
width:300px;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
make the div containing both the img and text relative then you can make the text absolute and decide where the edge will reach. as shown in the jsfiddle above.
is this what you meant?
but personally i'd not use img and instead use a background-image
http://jsfiddle.net/9ka1fq2j/3/
HTML
<div class="foo">
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
height:300px;
background-image:url(http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg);
background-size:cover;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
When the size of the image is known, this is relatively simple: just give the text a background color (otherwise it is transparent by default) and a negative left margin of half the image's width.
span {
background: white;
margin-left: -70px;
}
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
That's it. For cosmetic purposes, you could wrap it in a div so that it can placed on its own. Secondly, the above solution aligns the bottom of the image with the baseline of the text instead of the bottom of the text. If you want both fixed as well, then use this slightly more complex solution:
div {
float: left;
}
img {
vertical-align: bottom;
}
span {
background: white;
margin-left: -70px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tristique ante in rhoncus. Vivamus auctor nec massa elementum mattis. Nunc tempor metus quam, quis varius nibh posuere eu. Suspendisse vitae iaculis ex, id lacinia nunc.</p>
<div>
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
</div>
<p>Sed gravida congue ligula. Cras dignissim varius aliquet. Morbi semper nulla eget mauris feugiat accumsan. Aenean iaculis nisl a erat interdum bibendum. Nullam eu urna tempus, efficitur urna sit amet, vestibulum lorem. Duis tincidunt, nunc id semper maximus, ante lorem suscipit orci, nec laoreet libero dui in odio. Mauris in mi at dui aliquam vestibulum id non metus. Sed et enim ut metus tristique tempus. In tempus purus a eros imperdiet porttitor. Fusce faucibus, nisl at vestibulum suscipit, tellus magna tincidunt ante, at ultrices nulla libero non quam.</p>
<p>Ut orci nunc, cursus eget quam id, malesuada consequat odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ullamcorper nunc. Integer luctus faucibus augue, ac fermentum mi bibendum sed. Donec ultrices pulvinar tellus. Praesent mollis euismod erat eu semper. Pellentesque pretium interdum nibh sed aliquet. Etiam vehicula aliquam ligula id imperdiet. Cras sodales purus leo, sed scelerisque enim porttitor ac. Aenean id luctus quam. Nullam elementum arcu quis elit malesuada dapibus. Maecenas leo nisi, maximus dignissim enim sed, lacinia tempor est. Maecenas eget cursus ligula.</p>
The z-index css property would be a good tool to use also in situations like this, just center the text using margin values.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
There is a z-index property, you should increase it by 1 and that should help you. You can make some methods that will increas/decrease it in case you would like to hide it and then let it show up back again.
More about z-index in here and here.
I'd like to create a grid of squares in the background of my webpage which already has a lot of different elements carrying content. My trouble now is that the div squares I'm creating are intefereing with the layout of everything else. I've tried setting z-index of the parent div of my square divs to like -3, but that doesn't seem to really help. What's are some good css rules that can help me sort this out? Thanks
Create the tiles in Photoshop and then save it out as a *.PNG or *.GIF. These have the smallest file sizes.
Use this within your container or wrapper div:
.contentContainer {
background:url(images/image_background.png) top left no-repeat;
}
background:url set's the URL of the image.
top left sets the position. You can use just "top", "center", "bottom", etc. or "top left", "top bottom" to align it how you need it.
no-repeat makes it so the BG image doesn't "tile" over and over again as you might have experienced with say, your windows wallpaper. It looks tacky.
As already mentioned, it may be best to use an image for this situation. Regardless, here is a jsfiddle showing how to use absolute positioning on the wrapper for the background squares to take it out of the flow of the document: http://jsfiddle.net/eL1w7kdz/
HTML:
<div id="container">
<div id="background-squares">
<div>Square 1</div><div>Square 2</div><div>Square 3</div><div>Square 4</div><div>Square 5</div><div>Square 6</div><div>Square 7</div><div>Square 8</div><div>Square 9</div><div>Square 10</div><div>Square 11</div><div>Square 12</div>
</div>
<div id="main-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum neque a venenatis dictum. Donec fringilla euismod sodales.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer leo ipsum, aliquam sit amet ligula non, fringilla commodo diam. Vivamus tortor mi, blandit vel mi at, feugiat rhoncus libero. Donec volutpat, tellus nec sagittis tempor, leo dui sollicitudin turpis, et fringilla nisl metus ac libero. In augue mauris, malesuada id ipsum vel, hendrerit vulputate justo.</p><p>Morbi aliquam est non fringilla cursus. Sed at felis et magna vehicula egestas. Integer finibus lectus lorem, a commodo nulla rutrum eu. Sed eleifend condimentum tristique. Curabitur eu nisl mi. Etiam imperdiet nisl metus, at iaculis ex consequat eget. In non eros dolor.</p>
</div>
</div>
CSS:
#background-squares {
position: absolute;
z-index: -1;
}
#background-squares div {
background-color: lightblue;
width: 100px;
height: 100px;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
#main-content {
padding: 10px;
}
You know how tekst (paragraphs) always wrap around a floated image, like so? [see img]
I would like the tekst to go OVER the image. Like in the example img below. I tried using z-index and display:inline but neither worked.
This is not my actual HTML, but basically what I looks like;
<img src="" alt="" style="float:right;" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed eros tellus, sit amet ultrices quam. Sed quis justo metus, quis gravida orci. Vivamus porttitor fringilla massa at luctus. Quisque lacinia diam eget justo tempor vehicula. Nulla fringilla libero sit amet tortor bibendum imperdiet. Pellentesque in risus vel libero pellentesque hendrerit. Suspendisse vehicula fermentum pretium. Sed elementum eleifend dolor nec aliquam. Nam ac viverra dolor. Vivamus vitae ultricies velit.</p>
Try:
<div style="position: relative;">
<img src="" alt="" style="position: absolute; top: 0px; right: 0px;" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed eros tellus, sit amet ultrices quam. Sed quis justo metus, quis gravida orci. Vivamus porttitor fringilla massa at luctus. Quisque lacinia diam eget justo tempor vehicula. Nulla fringilla libero sit amet tortor bibendum imperdiet. Pellentesque in risus vel libero pellentesque hendrerit. Suspendisse vehicula fermentum pretium. Sed elementum eleifend dolor nec aliquam. Nam ac viverra dolor. Vivamus vitae ultricies velit.</p>
</div>
The key is absolute positioning. Make sure the container has a position set (use relative if it doesn't have one currently).
(You may also need some z-indexing to make sure the layers are correct).
You could either use position: absolute and z-index to move the image behind the text, or use the image as the paragraph's background image.
eg
HTML:
<p><img src="xyz.jpg" /> Lorem ipsum</p>
CSS:
img {
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
p {
z-index: 10;
}
Alternatively:
<p>Lorem ipsum</p>
CSS:
p {
background: url(xyz.jpg) top right no-repeat transparent;
}
If I understand the question, here is what you want jsfiddle .
Z-index only works with position: absolute.
Countdown coordinates depends on the value of the property position.
If the parent element is set to position: relative, then absolute positioning of child elements determines their position on top of the parent.