I've been trying to figure something out, but no luck. I have also been searching the internet for possible solutions but again, no luck.
Let's say I wanted an image with text to stay fixed in the background while the user scrolls down while viewing a site, how can I go about this? (also being responsive).
I've tried doing many things but the text goes outside of the image that is in the background when the window size is resized, when I wanted it stay in the background image.
html5
===========
<body>
<header id="head">
<!--head content-->
</header>
<div class="fixedImage">
<div class="welcome">
<h1>Welcome to this site</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo, enim eu posuere commodo, elit mauris condimentum sem.</p>
</div>
</div>
</body>
css
======
#head{
width:100%;
background-color:#FFFFFF;
}
.fixedImage{
background-attachment:url(img/random.jpg);
background-size: 100%;
background-repeat:no-repeat;
background-attachment:fixed;
}
.welcome{
/*styling goes here*/
}
A huuuuuuuge example of what I want to do is this:
http://www.nois3.it/
The image that is fixed right at the top, with text in it and it does not pour out of the image when resized.
If any one can please help me with this darn thing, that would be amazing!
thank you for your time!
Use a div with CSS, position:absolute;
Also the problem has been answered here:
css - Floating div positioning
Related
PURPOSE
Having an editable div in which the text flows in different "simulated" pages, so to obtain an effect like Word. At the moment, I'm interested to have this working in Chrome (no crossbrowser compatibility).
WHAT I'VE DONE
I've created an editable div (pagina) already filled with some text. Inside this div there are 2 divs: block1 and block2.Block1 is a floating right div that simulates the page height.Block2 is a floating left div that simulate the space between pages.The effect I've obtained is a long text "broken" into pages. In my code I've used different background colors to have a better view of the various divs.
THE PROBLEM
When I move the cursor at the beginning of a new "page" and I press [return] more times, the new lines are moved at the right side of the above block2 div (the pages sepatator). If I type something, single letters appears in the right side (see screenshot below).
Problem screenshot
In this Fiddle (http://jsfiddle.net/n4d2jtd9/4/) you can see my experiments result.
.pagina {
width: 200px;
background-color: #AAA;
}
div.block1 {
float: right;
width: 100px;
height: 100px;
background-color: #CCC;
}
div.block2 {
float: left;
width: 200px;
height: 100px;
background-color: #FFF;
}
<body>
<div class="pagina">
<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>
<div class="block2"></div>
<div contenteditable="true" style="width:90px;background-color:#DDD;word-break:break-all;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero mi, tempus in tincidunt vitae, aliquet nec nibh. Integer egestas leo vel orci
</div>
</div>
</body>
THE QUESTION
Is there a way to prevent that text effect?
CONSIDERATIONS
When you press [enter] inside an editable div, Chrome adds a div tag per paragraph (and a br tag when you press [enter]+[shift]).
The created "empty" div is always <div><br></div>. Having a zero width, the floating div moves this tag to right. I've noticed that if I put a space char inside the div, it works properly. Maybe jQuery can help.
New Code: based on browsers:
working demo: http://jsfiddle.net/n4d2jtd9/9/
HTML
<body>
<div class="pagina">
<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>
<div class="block2"></div>
<div id="editable" contenteditable="true" style="width:90px;background-color:#DDD;word-break:break-all;
">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero mi, tempus in tincidunt vitae, aliquet nec nibh. Integer egestas leo vel orci
</div>
</div>
</body>
CSS
#editable{white-space:normal}
}
/* Chrome 29+ */
#media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
#editable{white-space:pre-line;}
}
/* Chrome 22-28 */
#media screen and(-webkit-min-device-pixel-ratio:0) {
.selector {-chrome-:only(;
#editable{white-space:pre-line;}
);}
}
I'm trying to get an image to stick to the bottom of one div AND overlap the div above it.
fiddle is here: http://jsfiddle.net/5U34m/1/
There are 2 divs side by side the image in the right side
- if the content of the left is shorter than the right, the image should overlap the row above it
- if the content of the left is longer than the height of the image then the image should stick to the bottom of the right div.
- the image should also be centered in the div
here is the HTML:
<div class="container clearfix">
<div class="wrap header">
<div class="grid_6 logo">
<img src="http://cba.thelibertylab.com/wp-content/uploads/cba-logo-placeholder.png" />
</div>
<div class="grid_6 phone">
<!-- <p>p. 905-579-5302</p> -->
</div>
</div>
<div class="wrap upper-content">
<div class="grid_6">
<p>Nunc id porttitor lectus, et auctor ante. Morbi ullamcorper quam in leo auctor tempor. </p>
<p> Morbi a enim nibh. Vestibulum molestie augue libero, vitae fringilla massa eleifend quis. </p>
</div>
<div class="grid_6 headshot"><div class="img-container"><img src="http://www.manncontractors.com.au/media/pics/site/imagecache/1/1/1176381DF49D6256D968FFB72490208C.jpg" height="400" width="300"/></div></div>
</div>
<div class="wrap lower-content">
<div class="grid_6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="grid_6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
</div>
</div>
The CSS on the fiddle does not work correctly - I'm not sure what to try from here.
Your problem is multiple-fold.
You actually want the text to push down the image when it is longer, so your image should be UNDER your text in the HTML, not adjacent to it. Your structure should be like this:
<div> <!-- First row contains the text -->
<div class="grid_6 txt>YOUR TEXT</div>
<div class="grid_6></div>
</div>
<div class="grid_12"></div><!-- This one to prevent the float from stacking -->
<div> <!-- Second row contains the image and has height = 0 -->
<div class="grid_6></div>
<div class="grid_6 headshot">
<div class="img-container">
<img src="yourimg.jpg">
</div>
</div>
</div>
The CSS
First of all clear the styling height:100%; from .container. This styling rule inhibits the element from expanding and makes it impossible for children to inherit height. (Check for yourself in the console)
If you want the image to truly stick to the bottom, you will have to set .grid6.headshot { line-height: 0; } The line-height property actually inserts unwanted space in elements where you don't want it.
Replace .img-container property top: 70px; with margin-top: -450px; (your image height)
Set a min-height on the grid_6 div which has text in it, equal to your image height (450px) - your header height (94px) + some padding (10px) => 346px; If you don't do this your image will overlap your navigation
For #media only screen and (max-width: 767px), set .img-container { margin-top: 0; } else the image will overlap the text on mobile.
I've updated your fiddle here: http://jsfiddle.net/5U34m/4/
Note:
Consider using id's to target specific divs. The classes here are quite a mess.
Consider using responsive CSS frameworks (% and ems) instead of fixed-width ones.
You'll need to use position: absolute for the styling of your image. Then use the Left, Right, Top, Bottom attributes to position it as you like.
To adjust what element goes on top of each other, use the z-index attribute!
so i have my index.html and a canvas.css
body{
}
#canvasHIPPO{
display:block;
margin:0px auto 0px;
width:100%;height:100%
background-image:url('http://www.pcl.co.nz/site/pclimaging/images/Big%20Print%20Carry.jpg')
}
in my index.html:
<div id="container">
<canvas id="canvasHIPPO" width="800" height="600" display="block"></canvas>
</div>
I would like to know how to:
1) center the canvas ontop of the background city image, despite 2) different screen sizes and/or 3) maintain the same aspect ratio.
I was pretty sure the margin:0,auto should have fixed the (1) and centered the canvas ontop of the background image...what am i missing?
Thanks!
Are you trying to centre the image horizontally or vertically?
If you are centring it horizontally, in your css it should be:
#content {
background-image: url('http://www.pcl.co.nz/site/pclimaging/images/Big%20Print%20Carry.jpg');
}
#contentHIPPO {
margin: 0 auto;
display: block;
width: 800px;
height: 600px;
}
and in your html:
<div id="content">
<div id="contentHIPPO">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
This will cause the div to be centred horizontally, with the image repeating in the background. If you want the image to be re-sized to the browser window, you would need to use javascript to get the size of the window.
Why not you use
display: webkit-box;
The new css3 provide more properties follow the tutorial
http://www.w3schools.com/css3/default.asp
If it's a small project, you can always convert your hex colours (#FFFFFF) to RGB and Alpha (where the alpha channel is transparency), which looks something like this rgba(255,255,255,100). However, if you've got hundreds, or even thousands, of instances of colour references, you're probably better off Googling a tutorial.
This renders the same in Chrome and FireFox so maybe this is intended behavior but it seems pretty screwy. Putting a image in the h2 tag at the top of a div with "display:table-cell" causes extra padding to the top of the other table-cell divs roughly the same size as the image.
Here's my test code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chrome Test</title>
<style>
#col3 {
display:table;
border:1px solid black;
}
#col3 div {
width:33%;
display:table-cell;
border:1px solid blue;
}
</style>
</head>
<body>
<h2>Wrong?</h2>
<div id="col3">
<div>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div>
<h2><img src="url" height="80" width="215" alt="heading 2" /></h2>
<p>Suspendisse imperdiet lorem porta est venenatis viverra. </p>
</div>
<div>
<h2>Heading 2</h2>
<p>Aliquam laoreet diam sed ligula varius porta. Morbi volutpat ullamcorper diam, </p>
</div>
</div>
<h2>Right</h2>
<div id="col3">
<div>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, </p>
</div>
<div>
<h2>Heading 2</h2>
<p><img src="url" height="80" width="215" alt="heading 2" />Suspendisse imperdiet lorem porta est venenatis viverra. </p>
</div>
<div>
<h2>Heading 2</h2>
<p>Aliquam laoreet diam sed ligula varius porta. Morbi volutpat ullamcorper diam, </p>
</div>
</div>
</body>
</html>
Is this a bug? Can I avoid this behavior?
An h2 tag is a block element and may have some default padding assigned to it by the browser. Be sure to include a CSS Reset file (for example, this one), to remove that unwanted formatting.
Based on your given code i create the fiddle below -
Fiddle: http://jsfiddle.net/TtYn3/
Demo: http://jsfiddle.net/TtYn3/embedded/result/
As per required image in H2 tag and the padding issue solved in other columns.
Your divs are table cells and you don't set any vertical-align anywhere, so everything ends up baseline-aligned. The baseline of a cell is the bottom of the first line of text (more or less), so the bottoms of the first lines end up vertically aligned with each other. If the lines have very different heights (as in this case, because the image gives its line an 80px ascent), you get white gaps above the shorter lines.
If you don't want the cells to baseline-align, set their vertical-align to whatever value you want (sounds like top in your case).
Because you have display set to table-cell, your divs will behave just like they are in a table, and will stretch to the height of your tallest div (in each case, the div with the image inside an <h2>.
Second, you are using <div id="col3">. Id is only to be used in CSS for when you will call that CSS only once. You should assign col3 to a class instead of id, so that it can be used over and over on your page.
If you remove the display:table and table-cell attributes, your divs should shrink to their correct sizes.
Also, display:table-cell does not work in IE6 or IE7 (not that big of an issue these days, but still).
H tags and P tags always have default top and bottom padding / margins and it depends on the browser. I always set a class for them and set the margin to 0 and the padding to 0 unless I'm looking for some spacing, in which case I will set my own via css.
I am trying to put an image as the background and would like it to align to the right, but not closely align to. Something like margin-right:10px. Is it possible to do that in pure css, without explicitly adding a margin to the image?
I had several attempts, but all failed...
http://jsfiddle.net/cA7Un/1/
Thanks in advance!
You could use a percentage, but this is only good if you know the width of the container will stay the same:
background-position: 95% center;
Otherwise, you could add 10 pixels of whitespace to the right of your image in an image editor like Photoshop.
To use the example you put on jsfiddle:
I declared the following extra style:
.rss
{
background-image: url('http://tipabsorb.com/index/wp-content/plugins/category-specific-rss-feed-menu/rss_small_icon.png');
background-repeat: no-repeat;
float: right;
width: 16px;
min-width: 16px;
max-width: 16px;
height: 16px;
min-height: 16px;
max-height: 16px;
margin: 10px;
}
This uses the same image, but adds an extra div to your your markup. This method gives you the image as a background image, and then with the margin you can position it as far from which ever side you want (by also changing the float if you want it on left hand side).
<div class='test' style='width: 300px; height: 100%'>
<div class="rss">
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
The positioning of the "rss" div before you normal markup is important as this affects the flow. Could also do it by positioning the div absolutely with a relative parent.
Finally I deleted the background from the ".test" class, as it has now been moved to the "rss" class.
I hope this helps.